寻竹

dify的本地部署

Mon, 01 Dec 2025 11:38:22 GMT

前提： 确保你已经安装并启动了 Docker Desktop

# 1. 回到你的用户根目录
cd ~

# 2. 创建一个专门放项目的文件夹
mkdir -p MyProjects
cd MyProjects

# 3. 重新克隆 Dify 代码
git clone https://github.com/langgenius/dify.git

# 4. 进入 docker 目录
cd dify/docker

# 5. 复制配置文件
cp .env.example .env

# 6. 启动 Dify
docker compose up -d

:::note 因为网络原因，在启动的时候有可能会下载中断，无需在意，直接重新输入 docker compose up -d 就可以继续下载了，一直不行的话就考虑换源吧。 :::

如何启动： 打开浏览器，访问 http://localhost，然后注册管理员账户并使用就可以了。

如何停止： 重新打开终端，进入那个目录 (cd ~/MyProjects/dify/docker)，输入 docker compose down 即可。

考虑到一直开着的话，内存和电池负担会比较重，并且停止对流程还不算简单，可以考虑简化指令输入。

可以在 .zshrc (终端配置文件) 里加两个快捷别名，把繁琐的命令简化成一个词：

打开配置文件：

nano ~/.zshrc

在文件末尾加上这两行（假设你的路径是 ~/MyProjects/dify/docker）：

alias dify-up="cd ~/MyProjects/dify/docker && docker compose up -d"
alias dify-stop="cd ~/MyProjects/dify/docker && docker compose stop"

保存退出 (Ctrl+O, Enter, Ctrl+X)，然后让它生效：

source ~/.zshrc

简化操作流：

启动：打开终端输入 dify-up，去浏览器用。
关闭：打开终端输入 dify-stop。

如果你觉得这依然很麻烦的话，那就直接在 docker Desktop 里面一键启停吧。

进阶写作与Tailwind CSS实践

Thu, 27 Nov 2025 18:41:46 GMT

我的博客集成了 Tailwind CSS，那么我就可以直接写带 Tailwind 类的 HTML。下面大多以炫技为主，你喜欢的话，复制直接拿来用就好了。

<div class="not-prose w-full my-8 bg-[#0b0c15] rounded-xl border border-gray-800/60 overflow-hidden relative shadow-2xl select-none group"> <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-5 mix-blend-overlay pointer-events-none"></div> <div class="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-cyan-500 to-transparent opacity-50"></div> <div class="flex items-center justify-between px-5 py-3 border-b border-gray-800 bg-[#121420]/80 backdrop-blur-sm"> <div class="flex items-center gap-3"> <div class="w-2 h-2 bg-cyan-500 rounded-sm animate-ping"></div> <span class="text-xs font-mono text-cyan-400 tracking-[0.2em] font-bold">SYSTEM_MODULES</span> </div> <span class="text-[10px] text-gray-600 font-mono">16 LOADED</span> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-[1px] bg-gray-800/50 border-b border-gray-800"> <a href="#流光渐变文字" class="relative p-4 bg-[#0e1016] hover:bg-cyan-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-cyan-500 transition-colors">01 UI</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-cyan-400 group-hover/item:translate-x-1 transition-all duration-300">流光渐变文字</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-cyan-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#毛玻璃卡片" class="relative p-4 bg-[#0e1016] hover:bg-cyan-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-cyan-500 transition-colors">02 UI</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-cyan-400 group-hover/item:translate-x-1 transition-all duration-300">毛玻璃卡片</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-cyan-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#伪终端窗口" class="relative p-4 bg-[#0e1016] hover:bg-green-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-green-500 transition-colors">03 TERM</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-green-400 group-hover/item:translate-x-1 transition-all duration-300">伪终端窗口</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-green-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#折叠框" class="relative p-4 bg-[#0e1016] hover:bg-yellow-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-yellow-500 transition-colors">04 COMP</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-yellow-400 group-hover/item:translate-x-1 transition-all duration-300">折叠框</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-yellow-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#嵌入3D模型" class="relative p-4 bg-[#0e1016] hover:bg-purple-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-purple-500 transition-colors">05 3D</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-purple-400 group-hover/item:translate-x-1 transition-all duration-300">嵌入3D模型</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#技能属性卡" class="relative p-4 bg-[#0e1016] hover:bg-red-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-red-500 transition-colors">06 GAME</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-red-400 group-hover/item:translate-x-1 transition-all duration-300">技能属性卡</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-red-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#动态加载条" class="relative p-4 bg-[#0e1016] hover:bg-blue-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-blue-500 transition-colors">07 ANIM</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-blue-400 group-hover/item:translate-x-1 transition-all duration-300">动态加载条</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-blue-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#拟物化机械键盘按键" class="relative p-4 bg-[#0e1016] hover:bg-gray-800 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-white transition-colors">08 INPUT</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-white group-hover/item:translate-x-1 transition-all duration-300">拟物键盘按键</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-white scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#代码文件名条" class="relative p-4 bg-[#0e1016] hover:bg-cyan-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-cyan-500 transition-colors">09 CODE</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-cyan-400 group-hover/item:translate-x-1 transition-all duration-300">代码文件名条</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-cyan-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#数据面板" class="relative p-4 bg-[#0e1016] hover:bg-blue-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-blue-400 transition-colors">10 DATA</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-blue-400 group-hover/item:translate-x-1 transition-all duration-300">数据面板</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-blue-400 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#动态警报横幅" class="relative p-4 bg-[#0e1016] hover:bg-yellow-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-yellow-500 transition-colors">11 ALERT</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-yellow-400 group-hover/item:translate-x-1 transition-all duration-300">动态警报横幅</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-yellow-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#解密效果" class="relative p-4 bg-[#0e1016] hover:bg-emerald-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-emerald-500 transition-colors">12 SEC</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-emerald-400 group-hover/item:translate-x-1 transition-all duration-300">解密效果</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-emerald-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#数学绘图" class="relative p-4 bg-[#0e1016] hover:bg-pink-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-pink-500 transition-colors">13 MATH</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-pink-400 group-hover/item:translate-x-1 transition-all duration-300">数学绘图</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-pink-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#闪卡" class="relative p-4 bg-[#0e1016] hover:bg-indigo-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-indigo-500 transition-colors">14 VFX</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-indigo-400 group-hover/item:translate-x-1 transition-all duration-300">闪卡特效</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-indigo-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#实时行情滚动条" class="relative p-4 bg-[#0e1016] hover:bg-orange-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-orange-500 transition-colors">15 TICKER</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-orange-400 group-hover/item:translate-x-1 transition-all duration-300">实时行情滚动条</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-orange-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> <a href="#仿钱包连接" class="relative p-4 bg-[#0e1016] hover:bg-rose-900/10 transition-colors group/item h-24 flex flex-col justify-between"> <div class="text-[10px] text-gray-600 font-mono group-hover/item:text-rose-500 transition-colors">16 WEB3</div> <div class="text-sm font-bold text-gray-400 group-hover/item:text-rose-400 group-hover/item:translate-x-1 transition-all duration-300">仿钱包连接</div> <div class="absolute bottom-0 left-0 w-full h-[2px] bg-rose-500 scale-x-0 group-hover/item:scale-x-100 transition-transform origin-left"></div> </a> </div> </div>

流光渐变文字

<div class="not-prose text-center my-8"> <span class="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 animate-pulse"> LEVEL UP YOUR CODE </span> </div>

<div class="not-prose text-center my-8">
  <span class="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 animate-pulse">
    LEVEL UP YOUR CODE
  </span>
</div>

原理：利用 bg-clip-text 把背景裁切成文字形状，加上 animate-pulse 让它呼吸闪烁。
注：not-prose 是 Tailwind Typography 插件的一个类，用来防止博客默认的文章样式干扰自定义设计。

毛玻璃卡片

<div class="relative z-10"> <h3 class="text-xl font-bold mb-2 flex items-center gap-2 text-gray-900 dark:text-white"> 🎮 电脑环境配置 </h3> <ul class="space-y-2 text-sm text-gray-700 dark:text-gray-300"> <li class="flex items-center">✅ CPU: AMD Ryzen 7500F</li> <li class="flex items-center">✅ GPU: RTX 4060 Ti 16G</li> </ul> </div> </div>

<div class="not-prose relative my-8 p-6 rounded-2xl overflow-hidden shadow-xl 
            border border-gray-300/50 dark:border-white/20 
            bg-white/60 dark:bg-black/20 backdrop-blur-xl">
            
  <div class="absolute -top-10 -right-10 w-32 h-32 bg-blue-500/20 rounded-full blur-2xl"></div>
  <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-purple-500/20 rounded-full blur-2xl"></div>
  
  <div class="relative z-10">
    <h3 class="text-xl font-bold mb-2 flex items-center gap-2 text-gray-900 dark:text-white">
      🎮 电脑环境配置
    </h3>
    <ul class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
      <li class="flex items-center">✅ CPU: AMD Ryzen 7500F</li>
      <li class="flex items-center">✅ GPU: RTX 4060 Ti 16G</li>
    </ul>
  </div>
</div>

注：利用 backdrop-filter: blur 实现磨砂玻璃质感。

伪终端窗口

<div class="not-prose my-6 rounded-lg overflow-hidden bg-[#1e1e1e] shadow-2xl border border-gray-700 font-mono text-sm"> <div class="bg-[#2d2d2d] px-4 py-2 flex items-center gap-2 border-b border-gray-700"> <div class="w-3 h-3 rounded-full bg-red-500"></div> <div class="w-3 h-3 rounded-full bg-yellow-500"></div> <div class="w-3 h-3 rounded-full bg-green-500"></div> <div class="ml-2 text-gray-400 text-xs">cxz-terminal — -zsh</div> </div> <div class="p-4 text-gray-300"> <div class="flex"> <span class="text-green-400 mr-2">➜</span> <span class="text-blue-400 mr-2">~</span> <span class="typing-effect">npm run build</span> </div> <div class="mt-2 text-gray-500"> > Astro v4.0.0<br> > Building client...<br> <span class="text-green-400">✓ Completed in 1.45s</span> </div> </div> </div>

<div class="not-prose my-6 rounded-lg overflow-hidden bg-[#1e1e1e] shadow-2xl border border-gray-700 font-mono text-sm">
  <div class="bg-[#2d2d2d] px-4 py-2 flex items-center gap-2 border-b border-gray-700">
    <div class="w-3 h-3 rounded-full bg-red-500"></div>
    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
    <div class="w-3 h-3 rounded-full bg-green-500"></div>
    <div class="ml-2 text-gray-400 text-xs">cxz-terminal — -zsh</div>
  </div>
  <div class="p-4 text-gray-300">
    <div class="flex">
      <span class="text-green-400 mr-2">➜</span>
      <span class="text-blue-400 mr-2">~</span>
      <span class="typing-effect">npm run build</span>
    </div>
    <div class="mt-2 text-gray-500">
      > Astro v4.0.0<br>
      > Building client...<br>
      <span class="text-green-400">✓ Completed in 1.45s</span>
    </div>
  </div>
</div>

折叠框

<details class="not-prose group my-4 bg-red-500/10 border border-red-500/20 rounded-lg open:bg-red-500/5 transition-all duration-300"> <summary class="cursor-pointer p-4 font-bold text-red-500 flex justify-between items-center select-none"> <span>⚠️ 警告：包含《传送门》结局剧透</span> <span class="group-open:rotate-180 transition-transform duration-300">▼</span> </summary> <div class="p-4 pt-0 text-gray-600 dark:text-gray-300 border-t border-red-500/10 mt-2"> The cake is a lie. 蛋糕是个谎言，GLaDOS 其实一直都知道... </div> </details>

<details class="not-prose group my-4 bg-red-500/10 border border-red-500/20 rounded-lg open:bg-red-500/5 transition-all duration-300">
  <summary class="cursor-pointer p-4 font-bold text-red-500 flex justify-between items-center select-none">
    <span>⚠️ 警告：包含《传送门》结局剧透</span>
    <span class="group-open:rotate-180 transition-transform duration-300">▼</span>
  </summary>
  <div class="p-4 pt-0 text-gray-600 dark:text-gray-300 border-t border-red-500/10 mt-2">
    The cake is a lie. 蛋糕是个谎言，GLaDOS 其实一直都知道...
  </div>
</details>

注：利用 HTML5 原生的 details 和 summary 标签，不需要 JS 就能做折叠效果。

嵌入3D模型

<div class="not-prose my-8 w-full h-[450px] rounded-2xl overflow-hidden shadow-[0_20px_50px_rgba(8,_112,_184,_0.4)] border border-blue-500/30 relative group bg-black"> <div class="absolute inset-0 flex items-center justify-center bg-black/40 group-hover:bg-transparent transition-all duration-500 pointer-events-none z-10"> <span class="text-white/80 border border-white/30 px-4 py-2 rounded-full backdrop-blur-md text-sm group-hover:opacity-0 transition-opacity"> 👆 点击并拖拽查看 3D 模型 </span> </div>

</iframe> </div> <p class="text-center text-sm opacity-60 -mt-4 mb-8">鼠标拖拽旋转，滚轮可以缩放</p>


<div class="not-prose my-8 w-full h-[450px] rounded-2xl overflow-hidden shadow-[0_20px_50px_rgba(8,_112,_184,_0.4)] border border-blue-500/30 relative group bg-black">
  <div class="absolute inset-0 flex items-center justify-center bg-black/40 group-hover:bg-transparent transition-all duration-500 pointer-events-none z-10">
    <span class="text-white/80 border border-white/30 px-4 py-2 rounded-full backdrop-blur-md text-sm group-hover:opacity-0 transition-opacity">
      点击并拖拽查看3D模型
    </span>
  </div>
  
  <iframe 
    title="Sci-Fi Drone" 
    frameborder="0" 
    allowfullscreen 
    mozallowfullscreen="true" 
    webkitallowfullscreen="true" 
    allow="autoplay; fullscreen; xr-spatial-tracking" 
    xr-spatial-tracking 
    execution-while-out-of-viewport 
    execution-while-not-rendered 
    web-share 
    src="https://sketchfab.com/models/ebea8df5042d447fa3ae2c45de3056fd/embed?autostart=0&ui_theme=dark&dnt=1" 
    class="w-full h-full"
  >
  </iframe>
</div>
<p class="text-center text-sm opacity-60 -mt-4 mb-8">鼠标拖拽旋转，滚轮可以缩放</p>

注：看看代码的话，不用我说你也应该知道怎么调整和修改。

技能属性卡

利用 Tailwind 的 Group Hover 特性实现交互。

<div class="not-prose my-10 grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="group relative bg-slate-800 p-6 rounded-xl overflow-hidden border-2 border-red-900 hover:border-red-500 transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_30px_rgba(239,68,68,0.5)]"> <div class="absolute -right-4 -bottom-4 text-9xl text-red-500/10 group-hover:text-red-500/20 transition-all group-hover:rotate-12">💪</div> <h3 class="text-2xl font-bold text-red-500 mb-2">STRENGTH (力量)</h3> <div class="text-4xl font-black text-white mb-4">A+</div> <div class="w-full bg-slate-700 h-3 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-red-800 to-red-500 w-[90%] group-hover:animate-pulse"></div> </div> <p class="text-slate-400 text-sm mt-4">精通 C++ 与底层架构，能扛住高并发压力。</p> </div>

<div class="group relative bg-slate-800 p-6 rounded-xl overflow-hidden border-2 border-emerald-900 hover:border-emerald-500 transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_30px_rgba(16,185,129,0.5)]"> <div class="absolute -right-4 -bottom-4 text-9xl text-emerald-500/10 group-hover:text-emerald-500/20 transition-all group-hover:rotate-12">⚡</div> <h3 class="text-2xl font-bold text-emerald-500 mb-2">AGILITY (敏捷)</h3> <div class="text-4xl font-black text-white mb-4">S</div> <div class="w-full bg-slate-700 h-3 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-emerald-800 to-emerald-500 w-[98%] group-hover:animate-pulse"></div> </div> <p class="text-slate-400 text-sm mt-4">快速学习新技术，代码交付速度极快。</p> </div>

<div class="group relative bg-slate-800 p-6 rounded-xl overflow-hidden border-2 border-blue-900 hover:border-blue-500 transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_30px_rgba(59,130,246,0.5)]"> <div class="absolute -right-4 -bottom-4 text-9xl text-blue-500/10 group-hover:text-blue-500/20 transition-all group-hover:rotate-12">🧠</div> <h3 class="text-2xl font-bold text-blue-500 mb-2">INTELLECT (智力)</h3> <div class="text-4xl font-black text-white mb-4">A</div> <div class="w-full bg-slate-700 h-3 rounded-full overflow-hidden"> <div class="h-full bg-gradient-to-r from-blue-800 to-blue-500 w-[85%] group-hover:animate-pulse"></div> </div> <p class="text-slate-400 text-sm mt-4">擅长算法设计与复杂系统架构分析。</p> </div> </div>

<div class="not-prose my-10 grid grid-cols-1 md:grid-cols-3 gap-6">
  <div class="group relative bg-slate-800 p-6 rounded-xl overflow-hidden border-2 border-red-900 hover:border-red-500 transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_30px_rgba(239,68,68,0.5)]">
    <div class="absolute -right-4 -bottom-4 text-9xl text-red-500/10 group-hover:text-red-500/20 transition-all group-hover:rotate-12">💪</div>
    <h3 class="text-2xl font-bold text-red-500 mb-2">STRENGTH (力量)</h3>
    <div class="text-4xl font-black text-white mb-4">A+</div>
    <div class="w-full bg-slate-700 h-3 rounded-full overflow-hidden">
      <div class="h-full bg-gradient-to-r from-red-800 to-red-500 w-[90%] group-hover:animate-pulse"></div>
    </div>
    <p class="text-slate-400 text-sm mt-4">精通 C++ 与底层架构，能扛住高并发压力。</p>
  </div>

  <div class="group relative bg-slate-800 p-6 rounded-xl overflow-hidden border-2 border-emerald-900 hover:border-emerald-500 transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_30px_rgba(16,185,129,0.5)]">
    <div class="absolute -right-4 -bottom-4 text-9xl text-emerald-500/10 group-hover:text-emerald-500/20 transition-all group-hover:rotate-12">⚡</div>
    <h3 class="text-2xl font-bold text-emerald-500 mb-2">AGILITY (敏捷)</h3>
    <div class="text-4xl font-black text-white mb-4">S</div>
    <div class="w-full bg-slate-700 h-3 rounded-full overflow-hidden">
      <div class="h-full bg-gradient-to-r from-emerald-800 to-emerald-500 w-[98%] group-hover:animate-pulse"></div>
    </div>
    <p class="text-slate-400 text-sm mt-4">快速学习新技术，代码交付速度极快。</p>
  </div>
  
   <div class="group relative bg-slate-800 p-6 rounded-xl overflow-hidden border-2 border-blue-900 hover:border-blue-500 transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_30px_rgba(59,130,246,0.5)]">
    <div class="absolute -right-4 -bottom-4 text-9xl text-blue-500/10 group-hover:text-blue-500/20 transition-all group-hover:rotate-12">🧠</div>
    <h3 class="text-2xl font-bold text-blue-500 mb-2">INTELLECT (智力)</h3>
    <div class="text-4xl font-black text-white mb-4">A</div>
    <div class="w-full bg-slate-700 h-3 rounded-full overflow-hidden">
      <div class="h-full bg-gradient-to-r from-blue-800 to-blue-500 w-[85%] group-hover:animate-pulse"></div>
    </div>
    <p class="text-slate-400 text-sm mt-4">擅长算法设计与复杂系统架构分析。</p>
  </div>
</div>

悬停反馈：鼠标放上去时，卡片上浮 (hover:-translate-y-2)，边框变亮，底部出现对应颜色的光晕 (hover:shadow-[...])。
细节动画：进度条在悬停时会呼吸闪烁 (group-hover:animate-pulse)，背景的大图标会旋转 (group-hover:rotate-12)。

动态加载条

用来表示进度的动态元素。 <div class="not-prose my-8 p-6 bg-[#1a1b26] rounded-xl border border-gray-800 relative overflow-hidden"> <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent animate-[shimmer_2s_infinite_linear]" style="background-size: 200% 100%;"></div>

<h4 class="text-cyan-400 mb-4 font-mono flex items-center"> <span class="inline-block w-2 h-2 bg-cyan-400 rounded-full mr-2 animate-ping"></span> > 正在初始化神经链接... </h4>

<div class="relative w-full h-4 bg-gray-900/50 rounded-full overflow-hidden border border-gray-700/50 backdrop-blur"> <style> @keyframes load-progress { 0% { width: 5%; } 100% { width: 85%; } } </style> <div class="h-full bg-gradient-to-r from-cyan-600 via-blue-500 to-purple-600 rounded-full relative" style="animation: load-progress 3s ease-out forwards; width: 85%;"> <div class="absolute right-0 top-0 h-full w-10 bg-white/50 blur-[10px]"></div> </div> </div> <div class="flex justify-between text-xs font-mono text-cyan-300/50 mt-2"> <span>STATUS: CONNECTING</span> <span>85% COMPLETE</span> </div> </div>

<div class="not-prose my-8 p-6 bg-[#1a1b26] rounded-xl border border-gray-800 relative overflow-hidden">
  <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent animate-[shimmer_2s_infinite_linear]" style="background-size: 200% 100%;"></div>
  
  <h4 class="text-cyan-400 mb-4 font-mono flex items-center">
    <span class="inline-block w-2 h-2 bg-cyan-400 rounded-full mr-2 animate-ping"></span>
    > 正在初始化神经链接...
  </h4>
  
  <div class="relative w-full h-4 bg-gray-900/50 rounded-full overflow-hidden border border-gray-700/50 backdrop-blur">
    <style>
      @keyframes load-progress {
        0% { width: 5%; }
        100% { width: 85%; }
      }
    </style>
    <div class="h-full bg-gradient-to-r from-cyan-600 via-blue-500 to-purple-600 rounded-full relative" 
         style="animation: load-progress 3s ease-out forwards; width: 85%;">
         <div class="absolute right-0 top-0 h-full w-10 bg-white/50 blur-[10px]"></div>
    </div>
  </div>
  <div class="flex justify-between text-xs font-mono text-cyan-300/50 mt-2">
    <span>STATUS: CONNECTING</span>
    <span>85% COMPLETE</span>
  </div>
</div>

组合动画：使用了自定义动画 shimmer（通过内联 style 模拟流光），进度条使用了 CSS @keyframes 实现从短变长的加载效果。
呼吸灯：使用了 animate-ping 做了一个呼吸的指示灯，进度条尖端加了高光模糊，增加了质感。

拟物化机械键盘按键

<div class="not-prose my-8 p-8 bg-gray-100 dark:bg-slate-800 rounded-xl flex items-center justify-center gap-4 flex-wrap border border-gray-200 dark:border-gray-700"> <style> .kbd-key { background: linear-gradient(to bottom, #f9fafb, #e5e7eb); color: #374151; border: 1px solid #d1d5db; box-shadow: 0 4px 0 #9ca3af, 0 5px 5px rgba(0,0,0,0.1); transition: all 0.1s; } /* 暗色模式适配 / .dark .kbd-key { background: linear-gradient(to bottom, #374151, #1f2937); color: #e5e7eb; border: 1px solid #4b5563; box-shadow: 0 4px 0 #111827, 0 5px 5px rgba(0,0,0,0.3); } / 按下效果 */ .kbd-key:active { transform: translateY(4px); box-shadow: 0 0 0 #9ca3af, inset 0 2px 4px rgba(0,0,0,0.1); } .dark .kbd-key:active { box-shadow: 0 0 0 #111827, inset 0 2px 4px rgba(0,0,0,0.3); } </style>

<div class="not-prose my-8 p-8 bg-gray-100 dark:bg-slate-800 rounded-xl flex items-center justify-center gap-4 flex-wrap border border-gray-200 dark:border-gray-700">
  <style>
    .kbd-key {
      background: linear-gradient(to bottom, #f9fafb, #e5e7eb);
      color: #374151;
      border: 1px solid #d1d5db;
      box-shadow: 0 4px 0 #9ca3af, 0 5px 5px rgba(0,0,0,0.1);
      transition: all 0.1s;
    }
    /* 暗色模式适配 */
    .dark .kbd-key {
      background: linear-gradient(to bottom, #374151, #1f2937);
      color: #e5e7eb;
      border: 1px solid #4b5563;
      box-shadow: 0 4px 0 #111827, 0 5px 5px rgba(0,0,0,0.3);
    }
    /* 按下效果 */
    .kbd-key:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 #9ca3af, inset 0 2px 4px rgba(0,0,0,0.1);
    }
    .dark .kbd-key:active {
      box-shadow: 0 0 0 #111827, inset 0 2px 4px rgba(0,0,0,0.3);
    }
  </style>

  <span class="text-gray-500 dark:text-gray-400 text-sm font-bold mr-2">快捷键：</span>
  
  <button class="kbd-key px-4 py-2 rounded-lg font-mono font-bold text-lg cursor-pointer select-none">CTRL</button>
  <span class="text-gray-400">+</span>
  <button class="kbd-key px-4 py-2 rounded-lg font-mono font-bold text-lg cursor-pointer select-none">ALT</button>
  <span class="text-gray-400">+</span>
  <button class="kbd-key px-4 py-2 rounded-lg font-mono font-bold text-lg cursor-pointer select-none">DEL</button>
</div>

代码文件名条

<div class="not-prose mt-6 -mb-2 bg-slate-800 rounded-t-lg border-b border-slate-700 flex justify-between items-center px-4 py-2 text-xs text-slate-300 font-mono"> <div class="flex items-center gap-2"> <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/></svg> <span>src/components/GameEngine.cpp</span> </div> <span class="text-slate-500">C++</span> </div>

<div class="not-prose mt-6 -mb-2 bg-slate-800 rounded-t-lg border-b border-slate-700 flex justify-between items-center px-4 py-2 text-xs text-slate-300 font-mono">
  <div class="flex items-center gap-2">
    <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/></svg>
    <span>src/components/GameEngine.cpp</span>
  </div>
  <span class="text-slate-500">C++</span>
</div>

数据面板

<div class="not-prose my-12 relative group"> <div class="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl blur-xl opacity-30 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div> <div class="relative p-6 bg-[#0a0a0a]/80 backdrop-blur-xl rounded-xl border border-cyan-500/30 shadow-[inset_0_0_20px_rgba(6,182,212,0.2)] overflow-hidden"> <div class="absolute inset-0 bg-[linear-gradient(rgba(6,182,212,0.1)1px,transparent_1px)] bg-[size:100%4px] pointer-events-none"></div> <div class="flex justify-between items-center mb-6 border-b border-cyan-500/20 pb-2"> <h3 class="text-cyan-400 font-mono text-lg tracking-wider flex items-center"><span class="inline-block w-2 h-2 bg-cyan-400 rounded-full mr-2 animate-pulse shadow-[0_0_10px#22d3ee]"></span>SYSTEM STATUS</h3> <span class="text-xs text-cyan-300/50 font-mono">UID: 9527-TK</span></div> <div class="grid grid-cols-2 gap-6 relative z-10"> <div class="flex flex-col"><span class="text-cyan-300/60 text-xs font-mono mb-1">CPU LOAD</span><div class="flex items-end"><span class="text-3xl font-bold text-white font-mono mr-2">32%</span><div class="h-6 w-24 bg-cyan-900/50 rounded-sm overflow-hidden flex items-end gap-[2px] p-[2px]"><div class="h-[30%] w-1 bg-cyan-400"></div><div class="h-[50%] w-1 bg-cyan-400"></div><div class="h-[80%] w-1 bg-cyan-400 animate-pulse"></div><div class="h-[40%] w-1 bg-cyan-400"></div><div class="h-[60%] w-1 bg-cyan-400"></div></div></div></div> <div class="flex flex-col"><span class="text-cyan-300/60 text-xs font-mono mb-1">MEMORY</span><span class="text-3xl font-bold text-white font-mono">12.4 <span class="text-lg text-cyan-400">GB</span></span></div> <div class="col-span-2"><span class="text-cyan-300/60 text-xs font-mono mb-1">NETWORK UPLINK</span><div class="w-full h-2 bg-cyan-900/50 rounded-full overflow-hidden relative"><div class="absolute inset-y-0 left-0 bg-gradient-to-r from-cyan-500 to-blue-500 w-[75%] shadow-[0_0_10px_#22d3ee]"><div class="absolute right-0 top-0 h-full w-4 bg-white/80 blur-sm"></div></div></div><div class="flex justify-between text-xs font-mono text-cyan-300/50 mt-1"><span>Stable</span><span>750 Mbps</span></div></div></div> <div class="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-cyan-500/50"></div><div class="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-cyan-500/50"></div> </div> </div>

<div class="not-prose my-12 relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl blur-xl opacity-30 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
<div class="relative p-6 bg-[#0a0a0a]/80 backdrop-blur-xl rounded-xl border border-cyan-500/30 shadow-[inset_0_0_20px_rgba(6,182,212,0.2)] overflow-hidden">
<div class="absolute inset-0 bg-[linear-gradient(rgba(6,182,212,0.1)_1px,transparent_1px)] bg-[size:100%_4px] pointer-events-none"></div>
<div class="flex justify-between items-center mb-6 border-b border-cyan-500/20 pb-2">
<h3 class="text-cyan-400 font-mono text-lg tracking-wider flex items-center"><span class="inline-block w-2 h-2 bg-cyan-400 rounded-full mr-2 animate-pulse shadow-[0_0_10px_#22d3ee]"></span>SYSTEM STATUS_</h3>
<span class="text-xs text-cyan-300/50 font-mono">UID: 9527-TK</span></div>
<div class="grid grid-cols-2 gap-6 relative z-10">
<div class="flex flex-col"><span class="text-cyan-300/60 text-xs font-mono mb-1">CPU LOAD</span><div class="flex items-end"><span class="text-3xl font-bold text-white font-mono mr-2">32%</span><div class="h-6 w-24 bg-cyan-900/50 rounded-sm overflow-hidden flex items-end gap-[2px] p-[2px]"><div class="h-[30%] w-1 bg-cyan-400"></div><div class="h-[50%] w-1 bg-cyan-400"></div><div class="h-[80%] w-1 bg-cyan-400 animate-pulse"></div><div class="h-[40%] w-1 bg-cyan-400"></div><div class="h-[60%] w-1 bg-cyan-400"></div></div></div></div>
<div class="flex flex-col"><span class="text-cyan-300/60 text-xs font-mono mb-1">MEMORY</span><span class="text-3xl font-bold text-white font-mono">12.4 <span class="text-lg text-cyan-400">GB</span></span></div>
<div class="col-span-2"><span class="text-cyan-300/60 text-xs font-mono mb-1">NETWORK UPLINK</span><div class="w-full h-2 bg-cyan-900/50 rounded-full overflow-hidden relative"><div class="absolute inset-y-0 left-0 bg-gradient-to-r from-cyan-500 to-blue-500 w-[75%] shadow-[0_0_10px_#22d3ee]"><div class="absolute right-0 top-0 h-full w-4 bg-white/80 blur-sm"></div></div></div><div class="flex justify-between text-xs font-mono text-cyan-300/50 mt-1"><span>Stable</span><span>750 Mbps</span></div></div></div>
<div class="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-cyan-500/50"></div><div class="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-cyan-500/50"></div>
</div>
</div>

动态警报横幅

<div class="not-prose my-8 rounded-lg overflow-hidden relative border-2 border-yellow-500/50 shadow-[0_0_20px_rgba(234,179,8,0.3)]"> <style> @keyframes scroll-stripes { 0% { background-position: 0 0; } 100% { background-position: 50px 0; } } .hazard-stripes { /* 使用 repeating-linear-gradient 创建斜条纹 / background-image: repeating-linear-gradient( -45deg, #eab308, / 黄色 / #eab308 20px, #000000 20px, / 黑色 */ #000000 40px ); background-size: 200% 200%; animation: scroll-stripes 1s linear infinite; } </style>

<div class="relative z-10 bg-[#1a1a1a]/90 p-4 flex items-center gap-4 backdrop-blur-sm"> <div class="h-12 w-12 flex-shrink-0 bg-yellow-500 text-black rounded flex items-center justify-center font-bold text-2xl shadow-lg"> ⚠️ </div> <div> <h4 class="text-yellow-500 font-bold text-lg uppercase tracking-wider mb-1">Warning: Breaking Changes</h4> <p class="text-yellow-100/80 text-sm"> 即将到来的 V2.0 版本将重构核心 API。请务必查看迁移指南，否则你的项目可能会崩溃。 </p> </div> </div> </div>

<div class="not-prose my-8 rounded-lg overflow-hidden relative border-2 border-yellow-500/50 shadow-[0_0_20px_rgba(234,179,8,0.3)]">
  <style>
    @keyframes scroll-stripes {
      0% { background-position: 0 0; }
      100% { background-position: 50px 0; }
    }
    .hazard-stripes {
      /* 使用 repeating-linear-gradient 创建斜条纹 */
      background-image: repeating-linear-gradient(
        -45deg,
        #eab308, /* 黄色 */
        #eab308 20px,
        #000000 20px, /* 黑色 */
        #000000 40px
      );
      background-size: 200% 200%;
      animation: scroll-stripes 1s linear infinite;
    }
  </style>

  <div class="hazard-stripes absolute inset-0 opacity-20 z-0"></div>
  
  <div class="relative z-10 bg-[#1a1a1a]/90 p-4 flex items-center gap-4 backdrop-blur-sm">
    <div class="h-12 w-12 flex-shrink-0 bg-yellow-500 text-black rounded flex items-center justify-center font-bold text-2xl shadow-lg">
      ⚠️
    </div>
    <div>
      <h4 class="text-yellow-500 font-bold text-lg uppercase tracking-wider mb-1">Warning: Breaking Changes</h4>
      <p class="text-yellow-100/80 text-sm">
        即将到来的 V2.0 版本将重构核心 API。请务必查看迁移指南，否则你的项目可能会崩溃。
      </p>
    </div>
  </div>
</div>

解密效果

<div class="not-prose my-8 inline-block group cursor-pointer"> <style>.secret-blur{filter:blur(6px);letter-spacing:0.2em;opacity:0.6;transition:all 0.5s cubic-bezier(0.4,0,0.2,1);user-select:none;background:#1e293b;color:transparent;text-shadow:0 0 10px rgba(255,255,255,0.5);}.group:hover .secret-blur{filter:blur(0px);letter-spacing:normal;opacity:1;background:transparent;color:#4ade80;text-shadow:none;}.group:hover .secret-container{animation:text-flash 0.5s ease-out;}@keyframes text-flash{0%{text-shadow:0 0 30px #4ade80,0 0 10px white;color:white;}100%{text-shadow:none;color:#4ade80;}}</style> <div class="secret-container relative px-4 py-2 bg-slate-800 border border-slate-700 rounded overflow-hidden"> <div class="absolute inset-0 flex items-center justify-center text-slate-500/30 group-hover:hidden font-mono">[LOCKED DATA]</div> <p class="secret-blur font-mono font-bold text-lg relative z-10">> 宝箱密码：卷死了喵</p> </div> </div>

<div class="not-prose my-8 inline-block group cursor-pointer">
<style>.secret-blur{filter:blur(6px);letter-spacing:0.2em;opacity:0.6;transition:all 0.5s cubic-bezier(0.4,0,0.2,1);user-select:none;background:#1e293b;color:transparent;text-shadow:0 0 10px rgba(255,255,255,0.5);}.group:hover .secret-blur{filter:blur(0px);letter-spacing:normal;opacity:1;background:transparent;color:#4ade80;text-shadow:none;}.group:hover .secret-container{animation:text-flash 0.5s ease-out;}@keyframes text-flash{0%{text-shadow:0 0 30px #4ade80,0 0 10px white;color:white;}100%{text-shadow:none;color:#4ade80;}}</style>
<div class="secret-container relative px-4 py-2 bg-slate-800 border border-slate-700 rounded overflow-hidden">
<div class="absolute inset-0 flex items-center justify-center text-slate-500/30 group-hover:hidden font-mono">[LOCKED DATA]</div>
<p class="secret-blur font-mono font-bold text-lg relative z-10">> 宝箱密码：xxxx</p>
</div>
</div>

数学绘图

这里的具体代码我就不贴了，仅做展示。

3D绘图曲面

<div id="loader-3d-v2" class="absolute inset-0 flex flex-col items-center justify-center bg-white/90 dark:bg-[#0d1117]/90 z-20 transition-opacity duration-500"> <div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-4"></div> <span class="text-sm font-mono text-gray-500 dark:text-gray-400 blink-text">Initializing Physics Engine...</span> </div>

  // 生成数据: z = sin(R) / R
  let size = 80, x = new Array(size), y = new Array(size), z = new Array(size), i, j;
  for(i = 0; i < size; i++) {
    x[i] = y[i] = -2 * Math.PI + 4 * Math.PI * i / size;
    z[i] = new Array(size);
  }
  for(i = 0; i < size; i++) {
    for(j = 0; j < size; j++) {
      let r2 = x[i] * x[i] + y[j] * y[j];
      let r = Math.sqrt(r2);
      z[i][j] = Math.sin(r) / (r || 0.1); // 防止除以0
    }
  }

  var data = [{
    z: z, x: x, y: y,
    type: 'surface',
    colorscale: 'Viridis',
    contours: {
      z: { show: true, usecolormap: true, highlightcolor: "#42f462", project: { z: true } }
    }
  }];

  var layout = {
    title: { text: 'Quantum Wave Function', font: { color: '#888', size: 12 } },
    autosize: true,
    margin: { l: 0, r: 0, b: 0, t: 30 },
    paper_bgcolor: 'rgba(0,0,0,0)',
    plot_bgcolor: 'rgba(0,0,0,0)',
    scene: {
      xaxis: {gridcolor: '#333', showbackground: false},
      yaxis: {gridcolor: '#333', showbackground: false},
      zaxis: {gridcolor: '#333', showbackground: false},
      camera: { eye: {x: 1.5, y: 1.5, z: 1.5} }
    }
  };
  
  var config = { displayModeBar: false, responsive: true };

  Plotly.newPlot(containerId, data, layout, config).then(function(){
    // 绘图成功，淡出 Loader
    const loader = document.getElementById(loaderId);
    if(loader) {
      loader.style.opacity = '0';
      setTimeout(() => loader.remove(), 500);
    }
  });
}

// 2. 智能加载器：检查 Plotly 是否存在，不存在则加载
if (typeof Plotly !== 'undefined') {
  runPlot(); // 库已存在，直接运行
} else {
  // 库不存在，动态加载脚本
  var script = document.createElement('script');
  script.src = 'https://cdn.plot.ly/plotly-2.27.0.min.js';
  script.onload = runPlot; // 加载完后运行
  document.head.appendChild(script);
}

// 3. 窗口调整时重绘
window.addEventListener('resize', function() {
  if (typeof Plotly !== 'undefined') {
    Plotly.Plots.resize('plot-3d-surface-v2');
  }
});

})(); </script> </div>

动态图表

  // 自动检测暗色模式
  var isDark = document.documentElement.classList.contains('dark');
  var myChart = echarts.init(chartDom, isDark ? 'dark' : null, { renderer: 'svg', backgroundColor: 'transparent' });
  
  var option = {
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis' },
    grid: { top: '15%', bottom: '10%', left: '10%', right: '5%' },
    xAxis: { 
      type: 'category', 
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisLine: { lineStyle: { color: '#888' } }
    },
    yAxis: { 
      type: 'value', 
      splitLine: { lineStyle: { color: isDark ? '#333' : '#eee' } } 
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      symbolSize: 10,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(59, 130, 246, 0.5)' },
          { offset: 1, color: 'rgba(59, 130, 246, 0.01)' }
        ])
      },
      itemStyle: { color: '#3b82f6' }
    }],
    animationDuration: 2000,
    animationEasing: 'cubicOut'
  };
  myChart.setOption(option);
  window.addEventListener('resize', function() { myChart.resize(); });
}

// 智能加载 ECharts
if (typeof echarts !== 'undefined') {
  initChart();
} else {
  var script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js';
  script.onload = initChart;
  document.head.appendChild(script);
}

})(); </script> </div>

热力图

<div class="not-prose my-8 w-full h-[500px] border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm bg-white dark:bg-[#0d1117] overflow-hidden relative"> <div id="plot-heatmap" class="w-full h-full"></div> <script> (function(){ function runHeatmap() { var xValues = ['Temp', 'pH', 'DO', 'BOD', 'COD', 'TN', 'TP', 'Flow', 'Turb', 'Cond']; var yValues = xValues.slice(); var zValues = []; for (var i = 0; i < 10; i++) { var row = []; for (var j = 0; j < 10; j++) { if (i === j) row.push(1); else if (i > j) row.push(zValues[j][i]); else row.push((Math.random() * 2 - 1).toFixed(2)); } zValues.push(row); } var data = [{ z: zValues, x: xValues, y: yValues, type: 'heatmap', colorscale: 'RdBu', zmin: -1, zmax: 1 }]; var layout = { title: { text: 'Figure 1: Pearson Correlation Matrix', font: { family: 'Arial', size: 16 } }, margin: { l: 50, r: 50, b: 50, t: 50 }, paper_bgcolor: 'rgba(0,0,0,0)', plot_bgcolor: 'rgba(0,0,0,0)', xaxis: { ticks: '', side: 'bottom' }, yaxis: { ticks: '', ticks_suffix: ' ' }, annotations: [] }; for ( var i = 0; i < yValues.length; i++ ) { for ( var j = 0; j < xValues.length; j++ ) { var currentValue = zValues[i][j]; var textColor = Math.abs(currentValue) > 0.5 ? 'white' : 'black'; layout.annotations.push({ xref: 'x1', yref: 'y1', x: xValues[j], y: yValues[i], text: zValues[i][j], font: { family: 'Arial', size: 9, color: textColor }, showarrow: false }); } } Plotly.newPlot('plot-heatmap', data, layout, {responsive: true, displayModeBar: false}); } if (typeof Plotly !== 'undefined') { runHeatmap(); } else { var s = document.createElement('script'); s.src = 'https://cdn.plot.ly/plotly-2.27.0.min.js'; s.onload = runHeatmap; document.head.appendChild(s); } })(); </script> </div>

网络拓扑图

<div class="not-prose my-8 w-full h-[500px] border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm bg-[#101010] overflow-hidden relative"> <div id="echarts-network" class="w-full h-full"></div> <script> (function(){ function initNetwork() { var dom = document.getElementById('echarts-network'); if(!dom) return; var myChart = echarts.init(dom, 'dark', { renderer: 'canvas', backgroundColor: '#101010' }); var nodes = [], links = [], categories = ['Core', 'Dependency', 'External', 'Hidden'].map(n => ({name: n})); nodes.push({ id: 0, name: 'Main', symbolSize: 40, category: 0, x: null, y: null, draggable: true }); for (var i = 1; i < 30; i++) { nodes.push({ id: i, name: 'Node_' + i, symbolSize: Math.random() * 15 + 5, category: i % 4, draggable: true }); links.push({ source: 0, target: i }); if(i > 5 && Math.random() > 0.7) links.push({ source: i, target: Math.floor(Math.random() * i) }); } var option = { title: { text: 'System Topology', top: 'bottom', left: 'right' }, tooltip: {}, legend: [{ data: categories.map(a => a.name) }], series: [{ type: 'graph', layout: 'force', data: nodes, links: links, categories: categories, roam: true, label: { show: true, position: 'right' }, force: { repulsion: 200 } }] }; myChart.setOption(option); window.addEventListener('resize', function(){ myChart.resize(); }); } if (typeof echarts !== 'undefined') { initNetwork(); } else { var s = document.createElement('script'); s.src = 'https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js'; s.onload = initNetwork; document.head.appendChild(s); } })(); </script> </div>

桑基图

<div class="not-prose my-8 w-full h-[400px] border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm bg-white dark:bg-[#0d1117] overflow-hidden relative"> <div id="echarts-sankey" class="w-full h-full"></div> <script> (function(){ function initSankey() { var dom = document.getElementById('echarts-sankey'); if(!dom) return; var isDark = document.documentElement.classList.contains('dark'); var myChart = echarts.init(dom, isDark ? 'dark' : null, { renderer: 'svg', backgroundColor: 'transparent' }); var option = { title: { text: 'Energy Flow Model', left: 'center', top: 10 }, tooltip: { trigger: 'item' }, series: [{ type: 'sankey', layout: 'none', emphasis: { focus: 'adjacency' }, data: [{name: 'Total'}, {name: 'Loss'}, {name: 'Used'}, {name: 'Ind'}, {name: 'Res'}, {name: 'Tra'}], links: [ {source: 'Total', target: 'Loss', value: 30}, {source: 'Total', target: 'Used', value: 70}, {source: 'Used', target: 'Ind', value: 35}, {source: 'Used', target: 'Res', value: 20}, {source: 'Used', target: 'Tra', value: 15} ] }] }; myChart.setOption(option); window.addEventListener('resize', function(){ myChart.resize(); }); } if (typeof echarts !== 'undefined') { initSankey(); } else { var s = document.createElement('script'); s.src = 'https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js'; s.onload = initSankey; document.head.appendChild(s); } })(); </script> </div>

预测置信区间图

<div class="not-prose my-8 w-full h-[450px] border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm bg-white dark:bg-[#0d1117] overflow-hidden relative"> <div id="echarts-confidence" class="w-full h-full"></div> <script> (function(){ function initConfidence() { var dom = document.getElementById('echarts-confidence'); if(!dom) return; var isDark = document.documentElement.classList.contains('dark'); var myChart = echarts.init(dom, isDark ? 'dark' : null, { renderer: 'svg', backgroundColor: 'transparent' }); var data = [], lower = [], upper = []; for (var i = 0; i < 200; i++) { var x = -Math.PI + i * 0.1, y = Math.sin(x), noise = Math.random() * 0.4; data.push([x.toFixed(2), (y+noise).toFixed(2)]); lower.push([x.toFixed(2), (y+noise-0.3).toFixed(2)]); upper.push([x.toFixed(2), (y+noise+0.3).toFixed(2)]); } var option = { title: { text: '95% Confidence Interval', left: 'center' }, tooltip: { trigger: 'axis' }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', boundaryGap: false, data: data.map(d=>d[0]) }, yAxis: { type: 'value' }, series: [ { name: 'L', type: 'line', data: lower.map(d=>d[1]), lineStyle: { opacity: 0 }, stack: 'band', symbol: 'none' }, { name: 'U', type: 'line', data: upper.map(d=>d[1]), lineStyle: { opacity: 0 }, areaStyle: { color: '#ccc', opacity: 0.4 }, stack: 'band', symbol: 'none' }, { name: 'Pred', type: 'line', data: data.map(d=>d[1]), itemStyle: { color: '#3398DB' }, showSymbol: false } ] }; myChart.setOption(option); window.addEventListener('resize', function(){ myChart.resize(); }); } if (typeof echarts !== 'undefined') { initConfidence(); } else { var s = document.createElement('script'); s.src = 'https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js'; s.onload = initConfidence; document.head.appendChild(s); } })(); </script> </div>

雷达图

<div class="not-prose my-8 w-full h-[500px] border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm bg-white dark:bg-[#0d1117] overflow-hidden relative"> <div id="echarts-radar-fixed" class="w-full h-full"></div> <script> (function(){ function initRadar() { var dom=document.getElementById('echarts-radar-fixed'); if(!dom)return; var isDark=document.documentElement.classList.contains('dark'); var myChart=echarts.init(dom,isDark?'dark':null,{renderer:'svg',backgroundColor:'transparent'}); var option={ title:{text:'Model Evaluation',left:'center',top:20}, legend:{bottom:10,data:['Model A','Model B']}, radar:{ indicator:[ {name:'Accuracy',max:100},{name:'Stability',max:100},{name:'Speed',max:100}, {name:'Cost',max:100},{name:'Robustness',max:100} ], radius:'60%',center:['50%','50%'] }, series:[{ type:'radar', data:[ {value:[95,90,85,92,88],name:'Model A',areaStyle:{color:'rgba(59,130,246,0.5)'},itemStyle:{color:'#3b82f6'}}, {value:[70,75,60,80,70],name:'Model B',areaStyle:{color:'rgba(16,185,129,0.3)'},itemStyle:{color:'#10b981'}} ] }] }; myChart.setOption(option); window.addEventListener('resize',function(){myChart.resize();}); } if(typeof echarts!=='undefined'){initRadar();} else{ var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js'; s.onload=initRadar;document.head.appendChild(s); } })(); </script> </div>

闪卡

<div class="absolute inset-0 rounded-xl overflow-hidden bg-gradient-to-br from-purple-900 via-blue-900 to-black z-10 border border-white/20"> <div class="absolute inset-0 bg-[linear-gradient(rgba(0,255,255,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(0,255,255,0.1)_1px,transparent_1px)] bg-[size:20px_20px] opacity-30"></div> <div class="absolute bottom-0 inset-x-0 p-6 bg-gradient-to-t from-black to-transparent"> <h3 class="text-2xl font-bold text-white mb-1 text-shadow-[0_0_10px_rgba(0,255,255,0.5)]">Cyberdeck Unit</h3> <p class="text-cyan-400 text-sm font-mono">LEGENDARY / HARDWARE</p> </div> </div>

</div>

if (!card || !glare) return;

// 鼠标移动事件 card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2;

// 计算旋转角度（增加了一点灵敏度）
const rotateX = ((y - centerY) / centerY) * -18;
const rotateY = ((x - centerX) / centerX) * 18;

// 应用卡片 3D 旋转
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;

// 计算流光位置和颜色 (动态彩虹色)
const angle = Math.atan2(y - centerY, x - centerX) * (180 / Math.PI);
glare.style.background = `linear-gradient(${angle}deg, rgba(255,255,255,0.1), rgba(0,255,255,0.3), rgba(255,0,255,0.3), rgba(255,255,255,0.1)), radial-gradient(circle at ${x}px ${y}px, rgba(255,255,255,0.8) 0%, transparent 60%)`;

});

// 鼠标离开重置 card.addEventListener('mouseleave', () => { card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)'; glare.style.background = 'none'; }); })(); </script> <style> /* 补充一些必要的 CSS 样式来确保 3D 效果 */ .preserve-3d { transform-style: preserve-3d; } .perspective-1000 { perspective: 1000px; } </style> </div>

<div class="not-prose my-12 flex justify-center perspective-1000">
<div class="holo-card relative w-[300px] h-[420px] rounded-xl bg-[#1c1c1c] transition-all duration-100 ease-out preserve-3d cursor-pointer group shadow-2xl">
  
  <div class="absolute inset-0 rounded-xl overflow-hidden bg-gradient-to-br from-purple-900 via-blue-900 to-black z-10 border border-white/20">
    <div class="absolute inset-0 bg-[linear-gradient(rgba(0,255,255,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(0,255,255,0.1)_1px,transparent_1px)] bg-[size:20px_20px] opacity-30"></div>
    <div class="absolute bottom-0 inset-x-0 p-6 bg-gradient-to-t from-black to-transparent">
      <h3 class="text-2xl font-bold text-white mb-1 text-shadow-[0_0_10px_rgba(0,255,255,0.5)]">Cyberdeck Unit</h3>
      <p class="text-cyan-400 text-sm font-mono">LEGENDARY / HARDWARE</p>
    </div>
  </div>

  <div class="holo-glare absolute inset-0 rounded-xl z-20 mix-blend-color-dodge opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none" style="transform: translateZ(2px);"></div>
  
  <div class="absolute inset-0 rounded-xl z-30 border-2 border-white/0 group-hover:border-cyan-400/50 transition-colors duration-300 pointer-events-none"></div>

</div>

<script>
(function(){
  // 使用 IIFE 确保变量隔离
  const card = document.currentScript.previousElementSibling;
  const glare = card.querySelector('.holo-glare');
  
  if (!card || !glare) return;

  // 鼠标移动事件
  card.addEventListener('mousemove', (e) => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;
    
    // 计算旋转角度（增加了一点灵敏度）
    const rotateX = ((y - centerY) / centerY) * -18;
    const rotateY = ((x - centerX) / centerX) * 18;
    
    // 应用卡片 3D 旋转
    card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;
    
    // 计算流光位置和颜色 (动态彩虹色)
    const angle = Math.atan2(y - centerY, x - centerX) * (180 / Math.PI);
    glare.style.background = `linear-gradient(${angle}deg, rgba(255,255,255,0.1), rgba(0,255,255,0.3), rgba(255,0,255,0.3), rgba(255,255,255,0.1)), radial-gradient(circle at ${x}px ${y}px, rgba(255,255,255,0.8) 0%, transparent 60%)`;
  });

  // 鼠标离开重置
  card.addEventListener('mouseleave', () => {
    card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale3d(1, 1, 1)';
    glare.style.background = 'none';
  });
})();
</script>
<style>
  /* 补充一些必要的 CSS 样式来确保 3D 效果 */
  .preserve-3d { transform-style: preserve-3d; }
  .perspective-1000 { perspective: 1000px; }
</style>
</div>

实时行情滚动条

<div class="not-prose my-8 w-full overflow-hidden bg-[#0d1117] border-y border-gray-800 relative"> <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10 mix-blend-overlay pointer-events-none"></div> <div class="flex animate-[marquee_20s_linear_infinite] hover:[animation-play-state:paused] items-center whitespace-nowrap py-3" id="crypto-ticker-track"> <span class="text-gray-500 font-mono mx-4">Loading Market Data...</span> </div> <style> @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } .crypto-item { display: inline-flex; align-items: center; margin: 0 1.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .crypto-symbol { color: #8b949e; font-weight: bold; margin-right: 0.5rem; } .crypto-price { color: #e6edf3; font-weight: bold; margin-right: 0.5rem; } .crypto-change-up { color: #3fb950; } .crypto-change-down { color: #f85149; } </style> <script> (function(){ var track = document.getElementById('crypto-ticker-track'); if(!track) return; fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false&price_change_percentage=24h') .then(r => r.json()) .then(data => { var html = ''; data.forEach(coin => { var isUp = coin.price_change_percentage_24h >= 0; var changeClass = isUp ? 'crypto-change-up' : 'crypto-change-down'; var sign = isUp ? '+' : ''; html += <div class="crypto-item"> <img src="${coin.image}" class="w-5 h-5 mr-2 grayscale brightness-125"> <span class="crypto-symbol">${coin.symbol.toUpperCase()}</span> <span class="crypto-price">$${coin.current_price.toLocaleString()}</span> <span class="${changeClass}">${sign}${coin.price_change_percentage_24h.toFixed(2)}%</span> </div>; }); track.innerHTML = html + html; // 复制一份用于无缝滚动 }).catch(e => { track.innerHTML = '<span class="text-red-500 mx-4">Failed to load data. API limit may be reached.</span>'; }); })(); </script> </div>

<div class="not-prose my-8 w-full overflow-hidden bg-[#0d1117] border-y border-gray-800 relative">
<div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10 mix-blend-overlay pointer-events-none"></div>
<div class="flex animate-[marquee_20s_linear_infinite] hover:[animation-play-state:paused] items-center whitespace-nowrap py-3" id="crypto-ticker-track">
<span class="text-gray-500 font-mono mx-4">Loading Market Data...</span>
</div>
<style>
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
.crypto-item { display: inline-flex; align-items: center; margin: 0 1.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.crypto-symbol { color: #8b949e; font-weight: bold; margin-right: 0.5rem; }
.crypto-price { color: #e6edf3; font-weight: bold; margin-right: 0.5rem; }
.crypto-change-up { color: #3fb950; } .crypto-change-down { color: #f85149; }
</style>
<script>
(function(){
var track = document.getElementById('crypto-ticker-track');
if(!track) return;
fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false&price_change_percentage=24h')
.then(r => r.json())
.then(data => {
var html = '';
data.forEach(coin => {
var isUp = coin.price_change_percentage_24h >= 0;
var changeClass = isUp ? 'crypto-change-up' : 'crypto-change-down';
var sign = isUp ? '+' : '';
html += `<div class="crypto-item">
<img src="${coin.image}" class="w-5 h-5 mr-2 grayscale brightness-125">
<span class="crypto-symbol">${coin.symbol.toUpperCase()}</span>
<span class="crypto-price">$${coin.current_price.toLocaleString()}</span>
<span class="${changeClass}">${sign}${coin.price_change_percentage_24h.toFixed(2)}%</span>
</div>`;
});
track.innerHTML = html + html; // 复制一份用于无缝滚动
}).catch(e => { track.innerHTML = '<span class="text-red-500 mx-4">Failed to load data. API limit may be reached.</span>'; });
})();
</script>
</div>

仿钱包连接

<div class="not-prose my-12 flex justify-center"> <div class="relative group cursor-pointer"> <div class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div> <button id="web3-connect-btn" class="relative px-8 py-4 bg-black rounded-lg leading-none flex items-center divide-x divide-gray-600 text-gray-100 transition-all hover:bg-gray-900"> <span class="flex items-center space-x-3 pr-4"> <svg class="h-6 w-6 text-pink-500 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg> <span id="btn-text" class="font-bold font-mono tracking-wider text-lg">CONNECT WALLET</span> </span> <span class="pl-4 text-pink-400 transition-colors group-hover:text-gray-100 font-mono text-sm" id="btn-status">Web3 Ready</span> </button> </div> <script> (function(){ var btn = document.getElementById('web3-connect-btn'); var textSpan = document.getElementById('btn-text'); var statusSpan = document.getElementById('btn-status'); var isConnected = false; btn.addEventListener('click', function() { if (!isConnected) { textSpan.innerHTML = '0x1F9...8A2B'; statusSpan.innerHTML = '<span class="text-green-500">● Connected</span>'; btn.classList.add('border-green-500/50'); isConnected = true; } else { textSpan.innerHTML = 'CONNECT WALLET'; statusSpan.innerHTML = 'Web3 Ready'; btn.classList.remove('border-green-500/50'); isConnected = false; } }); })(); </script> <style> @keyframes tilt { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(0.5deg); } 75% { transform: rotate(-0.5deg); } } .animate-tilt { animation: tilt 5s infinite linear; } </style> </div>

<div class="not-prose my-12 flex justify-center">
<div class="relative group cursor-pointer">
<div class="absolute -inset-0.5 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>
<button id="web3-connect-btn" class="relative px-8 py-4 bg-black rounded-lg leading-none flex items-center divide-x divide-gray-600 text-gray-100 transition-all hover:bg-gray-900">
<span class="flex items-center space-x-3 pr-4">
<svg class="h-6 w-6 text-pink-500 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
<span id="btn-text" class="font-bold font-mono tracking-wider text-lg">CONNECT WALLET</span>
</span>
<span class="pl-4 text-pink-400 transition-colors group-hover:text-gray-100 font-mono text-sm" id="btn-status">Web3 Ready</span>
</button>
</div>
<script>
(function(){
var btn = document.getElementById('web3-connect-btn');
var textSpan = document.getElementById('btn-text');
var statusSpan = document.getElementById('btn-status');
var isConnected = false;
btn.addEventListener('click', function() {
if (!isConnected) {
textSpan.innerHTML = '0x1F9...8A2B';
statusSpan.innerHTML = '<span class="text-green-500">● Connected</span>';
btn.classList.add('border-green-500/50');
isConnected = true;
} else {
textSpan.innerHTML = 'CONNECT WALLET';
statusSpan.innerHTML = 'Web3 Ready';
btn.classList.remove('border-green-500/50');
isConnected = false;
}
});
})();
</script>
<style>
@keyframes tilt { 0%, 50%, 100% { transform: rotate(0deg); } 25% { transform: rotate(0.5deg); } 75% { transform: rotate(-0.5deg); } }
.animate-tilt { animation: tilt 5s infinite linear; }
</style>
</div>

:::note 我已经沉浸在自己的艺术里了，后面就是玩，不贴源代码了。 :::

<div class="not-prose my-10 border border-gray-800 bg-[#0d1117] rounded-xl overflow-hidden shadow-2xl relative"> <div class="px-4 py-3 border-b border-gray-800 flex justify-between items-center bg-[#161b22]"> <div class="flex items-center gap-2"><span class="text-yellow-500 font-bold">ETH/USDT</span><span class="text-xs text-green-500 px-2 py-0.5 bg-green-500/10 rounded-full animate-pulse">● BINANCE REALTIME</span></div> <div class="text-gray-500 font-mono text-sm" id="live-price-header">--</div> </div> <div id="tv-chart-real" style="width: 100%; height: 450px;"></div> </div> <script src="https://unpkg.com/lightweight-charts@4.1.3/dist/lightweight-charts.standalone.production.js"></script> <script> (function(){ // 等待库加载 const checkLib = setInterval(() => { if (typeof LightweightCharts !== 'undefined') { clearInterval(checkLib); initRealChart(); } }, 100); function initRealChart() { const container = document.getElementById('tv-chart-real'); const priceHeader = document.getElementById('live-price-header'); if (!container) return; const chart = LightweightCharts.createChart(container, { layout: { background: { type: 'solid', color: '#0d1117' }, textColor: '#d1d5db' }, grid: { vertLines: { color: 'rgba(42, 46, 57, 0.5)' }, horzLines: { color: 'rgba(42, 46, 57, 0.5)' } }, width: container.clientWidth, height: 450, timeScale: { timeVisible: true, secondsVisible: false, borderColor: '#374151' }, rightPriceScale: { borderColor: '#374151', scaleMargins: { top: 0.1, bottom: 0.1 } } }); const series = chart.addCandlestickSeries({ upColor: '#10b981', downColor: '#ef4444', borderVisible: false, wickUpColor: '#10b981', wickDownColor: '#ef4444' }); // 1. 获取历史数据 (150根 1分钟K线) fetch('https://api.binance.com/api/v3/klines?symbol=ETHUSDT&interval=1m&limit=150') .then(res => res.json()) .then(data => { const klines = data.map(d => ({ time: d[0] / 1000, open: parseFloat(d[1]), high: parseFloat(d[2]), low: parseFloat(d[3]), close: parseFloat(d[4]) })); series.setData(klines); chart.timeScale().fitContent(); // 适配视野 // 2. 建立 WebSocket 实时更新 const ws = new WebSocket('wss://stream.binance.com:9443/ws/ethusdt@kline_1m'); ws.onmessage = (event) => { const msg = JSON.parse(event.data); const k = msg.k; const currentBar = { time: k.t / 1000, open: parseFloat(k.o), high: parseFloat(k.h), low: parseFloat(k.l), close: parseFloat(k.c) }; series.update(currentBar); priceHeader.innerText = '$' + currentBar.close.toFixed(2); priceHeader.style.color = currentBar.close >= currentBar.open ? '#10b981' : '#ef4444'; }; }); new ResizeObserver(entries => { if(entries[0]) chart.applyOptions({ width: entries[0].contentRect.width }); }).observe(container); } })(); </script>

<div class="not-prose my-10 border border-gray-800 bg-[#0d1117] rounded-xl overflow-hidden shadow-2xl"> <div class="px-4 py-3 border-b border-gray-800 bg-[#161b22] flex justify-between items-center"> <div class="flex items-center gap-2"><span class="text-yellow-500 font-bold">BTC LIVE TRADES</span><span class="text-xs text-green-500 px-2 py-0.5 bg-green-500/10 rounded-full animate-pulse">● CONNECTED</span></div> <div class="text-sm text-gray-400 font-mono">Binance WS</div> </div> <div class="px-4 py-2 bg-[#1a1f2e] grid grid-cols-3 gap-2 text-xs text-gray-400 font-mono"><span>Price(USDT)</span><span class="text-right">Amount(BTC)</span><span class="text-right">Time</span></div> <div id="trade-feed-container" class="relative overflow-hidden bg-[#0d1117]" style="height: 300px;"> </div> <script> (function(){ const container = document.getElementById('trade-feed-container'); const ws = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@aggTrade'); const maxTrades = 15; ws.onmessage = (event) => { const d = JSON.parse(event.data); const price = parseFloat(d.p).toFixed(2); const amount = parseFloat(d.q).toFixed(5); const time = new Date(d.T).toLocaleTimeString(); const isBuy = !d.m; // m=true 为做市商卖出（即主动买入为false? Binance定义有点反直觉，m=true意味着买单是Maker，所以是主动卖单吃掉买单，显示红色） // 修正：m=true -> 主动卖 (红), m=false -> 主动买 (绿) const colorClass = d.m ? 'text-red-500' : 'text-green-500'; const row = document.createElement('div'); row.className = 'px-4 py-1.5 border-b border-gray-800/30 grid grid-cols-3 gap-2 text-xs font-mono animate-fade-in'; row.innerHTML = <span class="${colorClass} font-bold">${price}</span><span class="text-right text-gray-300">${amount}</span><span class="text-right text-gray-500">${time}</span>; container.prepend(row); if(container.children.length > maxTrades) container.lastElementChild.remove(); }; })(); </script> <style> @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.2s ease-out; } </style> </div>

<div class="not-prose my-10 border border-gray-800 bg-[#0d1117] rounded-xl overflow-hidden shadow-2xl relative select-none"> <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-overlay pointer-events-none"></div> <div class="px-4 py-3 border-b border-gray-800 bg-[#161b22] flex items-center justify-between"> <div class="flex items-center gap-2"> <span class="text-yellow-500 font-bold tracking-wider">MARKET SENTIMENT</span> <span id="risk-badge" class="text-[10px] px-2 py-0.5 rounded uppercase font-semibold animate-pulse border bg-gray-800 border-gray-600 text-gray-400">LOADING...</span> </div> <span class="text-gray-500 text-xs font-mono">FEAR & GREED API</span> </div> <div class="p-8 relative z-10"> <div class="flex justify-between items-end mb-3"> <span class="text-gray-400 text-sm">Current Index</span> <span id="vol-text" class="text-2xl font-bold tracking-wider drop-shadow-md transition-colors duration-300 text-gray-500">...</span> </div> <div class="relative h-4 w-full rounded-full bg-[#1c2128] border border-gray-800/50"> <div class="absolute inset-0 rounded-full bg-gradient-to-r from-red-600 via-yellow-500 to-green-500 opacity-80"></div> <div class="absolute inset-0 rounded-full bg-gradient-to-r from-red-600 via-yellow-500 to-green-500 blur-sm opacity-40"></div> <div id="vol-pointer" class="absolute top-1/2 -translate-y-1/2 w-1.5 h-7 bg-white shadow-[0_0_10px_rgba(255,255,255,0.8)] z-20 rounded-full transition-all duration-1000 ease-out opacity-0" style="left: 0%;"></div> </div> <div class="flex justify-between mt-3 text-[10px] text-gray-500 font-mono uppercase tracking-wider font-bold"> <span>Fear (0)</span> <span>Neutral (50)</span> <span>Greed (100)</span> </div> </div> <div class="grid grid-cols-3 gap-0 border-t border-gray-800 bg-[#161b22]/50 relative z-10 divide-x divide-gray-800"> <div class="p-4 text-center"> <div class="text-gray-500 text-[10px] uppercase mb-1">Next Update</div> <div id="time-countdown" class="text-gray-200 font-mono font-bold text-sm">--:--:--</div> </div> <div class="p-4 text-center"> <div class="text-gray-500 text-[10px] uppercase mb-1">Index Value</div> <div id="fear-val" class="text-yellow-500 font-mono font-bold text-lg">--</div> </div> <div class="p-4 text-center"> <div class="text-gray-500 text-[10px] uppercase mb-1">Sentiment</div> <div id="sentiment-text" class="text-gray-200 font-mono font-bold text-sm">--</div> </div> </div> <script> (function(){ var pointer = document.getElementById('vol-pointer'); var indexText = document.getElementById('vol-text'); var valDisplay = document.getElementById('fear-val'); var sentText = document.getElementById('sentiment-text'); var badge = document.getElementById('risk-badge'); var countdown = document.getElementById('time-countdown'); async function fetchRealData() { try { var response = await fetch('https://api.alternative.me/fng/'); var result = await response.json(); var data = result.data[0]; var value = parseInt(data.value); var classification = data.value_classification; var secondsUntilUpdate = parseInt(data.time_until_update); updateUI(value, classification); startCountdown(secondsUntilUpdate); } catch (error) { if(indexText) indexText.innerText = "ERR"; console.error(error); } } function updateUI(value, label) { if(!pointer) return; pointer.style.opacity = '1'; pointer.style.left = value + '%'; indexText.innerText = label.toUpperCase(); valDisplay.innerText = value; sentText.innerText = label; var colorClass = 'text-gray-200'; var badgeClass = 'bg-gray-800 border-gray-600 text-gray-400'; if (value < 25) { colorClass = 'text-red-500'; badgeClass = 'bg-red-900/20 border-red-500/30 text-red-400'; } else if (value < 45) { colorClass = 'text-orange-500'; badgeClass = 'bg-orange-900/20 border-orange-500/30 text-orange-400'; } else if (value < 55) { colorClass = 'text-yellow-500'; badgeClass = 'bg-yellow-900/20 border-yellow-500/30 text-yellow-400'; } else { colorClass = 'text-green-500'; badgeClass = 'bg-green-900/20 border-green-500/30 text-green-400'; } indexText.className = 'text-2xl font-bold tracking-wider drop-shadow-md transition-colors duration-300 ' + colorClass; badge.className = 'text-[10px] px-2 py-0.5 rounded uppercase font-semibold border ' + badgeClass; badge.innerText = label; } function startCountdown(seconds) { var timeLeft = seconds; var interval = setInterval(function() { timeLeft--; if (timeLeft < 0) { clearInterval(interval); fetchRealData(); return; } var h = Math.floor(timeLeft / 3600).toString().padStart(2, '0'); var m = Math.floor((timeLeft % 3600) / 60).toString().padStart(2, '0'); var s = (timeLeft % 60).toString().padStart(2, '0'); if(countdown) countdown.innerText = h + ':' + m + ':' + s; }, 1000); } fetchRealData(); })(); </script> </div>

<div class="not-prose my-10 border border-gray-800 bg-[#0d1117] rounded-xl overflow-hidden shadow-2xl relative select-none"> <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 mix-blend-overlay pointer-events-none"></div> <div class="px-4 py-3 border-b border-gray-800 bg-[#161b22] flex items-center justify-between"> <div class="flex items-center gap-2"><span class="text-yellow-500 font-bold tracking-wider">MARKET OVERVIEW</span><span id="live-indicator" class="text-[10px] text-cyan-400 px-2 py-0.5 bg-cyan-900/30 border border-cyan-500/30 rounded-full animate-pulse flex items-center gap-1"><span class="w-1.5 h-1.5 rounded-full bg-cyan-400"></span>LIVE DATA</span></div> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-4 p-6 relative z-10"> <div class="bg-[#141414] border border-orange-500/20 rounded-lg p-4 hover:-translate-y-1 transition-transform duration-300 group"> <div class="flex justify-between mb-2"><span class="text-gray-500 text-xs">Bitcoin</span><span class="text-orange-500 font-bold">BTC</span></div> <div id="price-BTC" class="text-xl font-bold text-gray-100">Loading...</div> <div id="change-BTC" class="text-xs font-mono mb-2 text-gray-500">--%</div> <div id="spark-BTC" class="h-10 w-full opacity-70 group-hover:opacity-100 transition-opacity"></div> </div> <div class="bg-[#141414] border border-blue-500/20 rounded-lg p-4 hover:-translate-y-1 transition-transform duration-300 group"> <div class="flex justify-between mb-2"><span class="text-gray-500 text-xs">Ethereum</span><span class="text-blue-500 font-bold">ETH</span></div> <div id="price-ETH" class="text-xl font-bold text-gray-100">Loading...</div> <div id="change-ETH" class="text-xs font-mono mb-2 text-gray-500">--%</div> <div id="spark-ETH" class="h-10 w-full opacity-70 group-hover:opacity-100 transition-opacity"></div> </div> <div class="bg-[#141414] border border-yellow-500/20 rounded-lg p-4 hover:-translate-y-1 transition-transform duration-300 group"> <div class="flex justify-between mb-2"><span class="text-gray-500 text-xs">BNB</span><span class="text-yellow-500 font-bold">BNB</span></div> <div id="price-BNB" class="text-xl font-bold text-gray-100">Loading...</div> <div id="change-BNB" class="text-xs font-mono mb-2 text-gray-500">--%</div> <div id="spark-BNB" class="h-10 w-full opacity-70 group-hover:opacity-100 transition-opacity"></div> </div> <div class="bg-[#141414] border border-purple-500/20 rounded-lg p-4 hover:-translate-y-1 transition-transform duration-300 group"> <div class="flex justify-between mb-2"><span class="text-gray-500 text-xs">Solana</span><span class="text-purple-500 font-bold">SOL</span></div> <div id="price-SOL" class="text-xl font-bold text-gray-100">Loading...</div> <div id="change-SOL" class="text-xs font-mono mb-2 text-gray-500">--%</div> <div id="spark-SOL" class="h-10 w-full opacity-70 group-hover:opacity-100 transition-opacity"></div> </div> </div> <div class="grid grid-cols-3 gap-4 px-6 pb-6 pt-0 text-center relative z-10"> <div class="bg-[#1c2128] rounded p-3 border border-white/5"><div class="text-gray-500 text-[10px] uppercase">Market Cap</div><div id="global-cap" class="text-white font-mono font-bold text-sm">Loading...</div></div> <div class="bg-[#1c2128] rounded p-3 border border-white/5"><div class="text-gray-500 text-[10px] uppercase">24h Vol</div><div id="global-vol" class="text-white font-mono font-bold text-sm">Loading...</div></div> <div class="bg-[#1c2128] rounded p-3 border border-white/5"><div class="text-gray-500 text-[10px] uppercase">Dominance</div><div id="btc-dom" class="text-white font-mono font-bold text-sm">Loading...</div></div> </div> <script> (function(){ var CONFIG = { 'BTC': { color: '#f97316' }, 'ETH': { color: '#3b82f6' }, 'BNB': { color: '#eab308' }, 'SOL': { color: '#a855f7' } }; function formatMoney(num){ return '$' + parseFloat(num).toLocaleString('en-US', {maximumFractionDigits: 2}); } function formatCompact(num) { if(num > 1e12) return '$' + (num/1e12).toFixed(2) + 'T'; if(num > 1e9) return '$' + (num/1e9).toFixed(2) + 'B'; return '$' + num.toLocaleString(); } function createSparkline(symbol, color, isUp) { var container = document.getElementById('spark-'+symbol); if(!container) return; var points = []; var width = 100; var y = 15; for(var i=0; i<=width; i+=5) { y += (Math.random() - 0.5) * 10; y = Math.max(2, Math.min(28, y)); points.push(i + ',' + y); } if(isUp && y > 10) points[points.length-1] = width + ',5'; if(!isUp && y < 20) points[points.length-1] = width + ',25'; var svg = <svg viewBox="0 0 100 30" preserveAspectRatio="none" class="w-full h-full overflow-visible"><path d="M0,30 L${points.join(' L')} L100,30 Z" fill="${color}" fill-opacity="0.1" stroke="none" /><polyline points="${points.join(' ')}" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" /></svg>; container.innerHTML = svg; } async function fetchCoinLore() { try { var tickersRes = await fetch('https://api.coinlore.net/api/tickers/?start=0&limit=20'); var globalRes = await fetch('https://api.coinlore.net/api/global/'); var tickersData = await tickersRes.json(); var globalData = await globalRes.json(); tickersData.data.forEach(function(coin) { if(CONFIG[coin.symbol]) { var priceEl = document.getElementById('price-'+coin.symbol); var changeEl = document.getElementById('change-'+coin.symbol); if(priceEl) priceEl.innerText = formatMoney(coin.price_usd); if(changeEl) { var change = parseFloat(coin.percent_change_24h); var isUp = change >= 0; changeEl.innerText = (isUp ? '+' : '') + change + '%'; changeEl.className = 'text-xs font-mono mb-2 ' + (isUp ? 'text-green-500' : 'text-red-500'); createSparkline(coin.symbol, CONFIG[coin.symbol].color, isUp); } } }); if(globalData && globalData.length > 0) { var g = globalData[0]; document.getElementById('global-cap').innerText = formatCompact(g.total_mcap); document.getElementById('global-vol').innerText = formatCompact(g.total_volume); document.getElementById('btc-dom').innerText = g.btc_d + '%'; } } catch (e) { console.error("API Error:", e); var ind = document.getElementById('live-indicator'); if(ind) ind.innerText = 'OFFLINE'; } } fetchCoinLore(); setInterval(fetchCoinLore, 10000); })(); </script> </div>

<div class="not-prose my-10 w-full h-auto"> <style> .crypto-flip-container{background-color:transparent;perspective:1000px;height:300px}.crypto-flip-inner{position:relative;width:100%;height:100%;text-align:left;transition:transform .8s;transform-style:preserve-3d}.crypto-flip-container:hover .crypto-flip-inner{transform:rotateY(180deg)}.crypto-flip-front,.crypto-flip-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:1rem;overflow:hidden;box-shadow:0 10px 30px -5px rgba(0,0,0,.5)}.crypto-flip-front{background:#111;color:#fff}.crypto-flip-back{background:#0f0f10;color:#fff;transform:rotateY(180deg);border:1px solid rgba(255,255,255,.1)} </style> <div class="text-center mb-8"><h3 class="text-2xl font-bold text-yellow-500 mb-2">LIVE MARKET ASSETS</h3><p class="text-gray-400 text-xs uppercase tracking-widest animate-pulse">Data from Binance API</p></div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6" id="crypto-cards-container"> </div> <script> (function(){ const coins = [ {id:'BTCUSDT', name:'Bitcoin', symbol:'BTC', color:'orange', icon:'₿', desc:'The King'}, {id:'ETHUSDT', name:'Ethereum', symbol:'ETH', color:'blue', icon:'◆', desc:'Smart Contracts'}, {id:'SOLUSDT', name:'Solana', symbol:'SOL', color:'purple', icon:'◎', desc:'High Speed'} ]; const container = document.getElementById('crypto-cards-container'); // 初始化卡片结构 coins.forEach(c => { container.innerHTML += <div class="crypto-flip-container cursor-pointer group" id="card-${c.id}"> <div class="crypto-flip-inner"> <div class="crypto-flip-front border border-${c.color}-500/30"> <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-black to-[#1a1a1a]"></div> <div class="relative h-full p-6 flex flex-col justify-between z-10"> <div class="text-right text-6xl font-black text-white/5 select-none">${c.symbol}</div> <div><div class="w-12 h-12 rounded-full bg-gradient-to-br from-${c.color}-400 to-${c.color}-600 flex items-center justify-center text-2xl font-bold text-white mb-4 shadow-[0_0_20px_${c.color}]">${c.icon}</div><h4 class="text-2xl font-bold text-white">${c.name}</h4><p class="text-${c.color}-400 font-mono text-sm">${c.desc}</p></div> <div class="w-full bg-gray-800/50 h-1 rounded-full overflow-hidden backdrop-blur"><div class="bg-${c.color}-500 h-full w-[60%] shadow-[0_0_10px_${c.color}]"></div></div> </div> </div> <div class="crypto-flip-back p-6 flex flex-col justify-center"> <div class="text-xs text-gray-500 uppercase mb-1 font-mono">Current Price</div> <div class="text-3xl font-bold text-white mb-6 tracking-tight font-mono" id="price-${c.id}">Loading...</div> <div class="space-y-4"> <div class="flex justify-between items-center border-b border-gray-800 pb-2"><span class="text-gray-400 text-sm">24h Change</span><span class="font-mono font-bold flex items-center gap-1" id="change-${c.id}">--</span></div> <div class="flex justify-between items-center border-b border-gray-800 pb-2"><span class="text-gray-400 text-sm">24h High</span><span class="text-gray-200 font-mono" id="high-${c.id}">--</span></div> <div class="flex justify-between items-center"><span class="text-gray-400 text-sm">24h Low</span><span class="text-gray-200 font-mono" id="low-${c.id}">--</span></div> </div> </div> </div> </div>; }); // 建立 WebSocket 连接 const ws = new WebSocket('wss://stream.binance.com:9443/ws/btcusdt@ticker/ethusdt@ticker/solusdt@ticker'); ws.onmessage = (event) => { const data = JSON.parse(event.data); const symbol = data.s; const priceEl = document.getElementById(price-${symbol}); const changeEl = document.getElementById(change-${symbol}); const highEl = document.getElementById(high-${symbol}); const lowEl = document.getElementById(low-${symbol}); if(priceEl) { const price = parseFloat(data.c); const prevPrice = parseFloat(priceEl.dataset.prev || price); priceEl.innerText = '$' + price.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}); priceEl.style.color = price > prevPrice ? '#10b981' : (price < prevPrice ? '#ef4444' : 'white'); priceEl.dataset.prev = price; setTimeout(()=> priceEl.style.color = 'white', 300); } if(changeEl) { const change = parseFloat(data.P); changeEl.innerText = (change >= 0 ? '▲ ' : '▼ ') + change.toFixed(2) + '%'; changeEl.className = font-mono font-bold flex items-center gap-1 ${change >= 0 ? 'text-green-400' : 'text-red-400'}; } if(highEl) highEl.innerText = '$' + parseFloat(data.h).toLocaleString(); if(lowEl) lowEl.innerText = '$' + parseFloat(data.l).toLocaleString(); }; })(); </script> </div>

摄影基础词汇——从入门到放弃

Thu, 30 Oct 2025 19:44:04 GMT

前言

事情的起因是我在网络上查找摄影相关的基础知识时，看到了一篇文章。

下面我引用一下原文

Q：摄影入门需要掌握些什么？

A：摄影比较难，先学拍照吧，拍照简单，只要你掌握了：光圈、焦距、快门、光比、大逆光、小逆光、前45度光、135度光、反光板、营造光、平光、侧光、七分人像、三分人像、全身照、俯拍、仰拍、感光度、光比、离机闪、引导线、兴趣点、主体、陪体、黄金分割、对角线、剪影、高光溢出、直方图、死黑、死白、自动对焦、焦平面、白平衡、白平衡漂移、测光点、评价测光、包围曝光、眼神光、18灰、高调、色温、低调、中灰渐变、渐变镜、ND镜、闪光灯输出量、切割点、地平线、多重曝光、HDR、虚化背景、画面语言、画面简洁、构图、地脚光、唯美光、鳄鱼光、小清新、特写、鱼眼镜头、抓拍、摆拍、肢体语言、合影照、顶光、眼影、三角光、K值、拍摄模式、反光板预升、快门线、三脚架、画质、锐度、ISO 、半按快门、测光锁定、CCD、白加黑减、黑白灰、亮度值、光学变焦、数码变焦、全画幅、135胶片、柔光、散射光、硬光、伽马线、DX画幅、APS-C画幅、APS-H画幅、防抖、大平光、LR、PS、LB、RAW、ACR、曝光模式、对焦点、快门优先、光圈优先、AF-S超音波马达镜头、镜头口径比、B快门、C-PL镜、高速同步闪光、鬼影、内对焦、前帘同步、后帘同步、 TTL、分区曝光、接片、糖水片、透视度、色相、饱和度、黑反转、HSB模式、RGB三原色模式、CMYK模式、JPEG、热靴、慢门、跟踪、色阶、曲线、高感、噪点、虚化、锐化、视角、机位、景深、点测光、矩阵测光、交点、三分构图、平行线、水平线、垂直线、框架式构图、宽容度、动态范围、悬浮人像、闪光灯指数、平价测光、点元素、前景深、中景、后景深、影调、色彩对比、大景深、浅景深、脱焦……等等，再加上多年经验就差不多了。

然后我就突发奇想，与其到用的时候手忙脚乱，不如先把这些词汇查一下，好歹让自己对这些词汇有点印象，也方便我后续需要用能快速查找一下。于是我请了两位 G 师傅和一位豆师傅来帮我整理，就有了以下文章。

这篇文章的理论可能与实际情况有所差别，后续我会逐步修改（应该吧）。

一、曝光基础 (The Exposure Triangle)
二、测光与影调 (Metering & Tone)
三、光线的艺术 (The Art of Light)
四、构图与视角 (Composition & Perspective)
五、相机与传感器 (Cameras & Sensors)
六、镜头与光学 (Lenses & Optics)
七、对焦与景深 (Focusing & Depth of Field)
- 1. 对焦核心操作
- 2. 景深（Depth of Field - DoF）
八、色彩与画质 (Color & Image Quality)
- 1. 色彩控制核心
- 2. 画质核心指标
九、附件与工具 (Accessories & Tools)
- 1. 核心附件清单
- 2. 辅助工具
十、闪光灯摄影 (Flash Photography)
- 1. 闪光灯核心模式
- 2. 实用闪光技巧
十一、拍摄技法与风格 (Shooting Techniques & Styles)
- 1. 经典场景拍摄技法
- 2. 常见摄影风格
十二、后期处理 (Post-Processing)
附录：摄影圣经

一、曝光基础 (The Exposure Triangle)

1. 曝光铁三角 (Exposure Triangle)

定义：控制曝光的三大核心——光圈、快门、ISO（感光度）的统称。
关键逻辑：三者相互关联、此消彼长，共同决定画面明暗。比如光圈开大（进光多）时，快门可适当加快（避免过曝）。

2. 核心要素解析

（1）光圈 (Aperture)

本质：镜头中控制光线进入量的“可调节孔洞”。
F值 (F-Number)：表示光圈大小的数值（如 F1.8、F4、F16）。

:::tip[必记规律] F值越小，光圈孔径越大→进光量越多→背景虚化越强（适合人像）；F值越大，光圈孔径越小→进光量越少→背景（景深）越清晰（适合风光）。 :::

（2）快门 (Shutter Speed)

本质：相机传感器“接收光线的时间长度”，单位为秒（如 1/1000s、1/60s、10s）。
高速快门 (Fast Shutter)：如 1/1000s，时间极短→可捕捉快速运动物体。
慢门 (Slow Shutter)：如 1s 或更长，时间长→可记录运动轨迹。

（3）感光度 (ISO)

本质：相机传感器对光线的“敏感程度”。
低ISO (Low ISO)：如 ISO 100→画面纯净、噪点少→适合光线充足场景（晴天户外）。
高感 (High ISO)：如 ISO 3200→对光线更敏感→适合暗光场景（夜晚、室内），但会增加画面噪点（颗粒感）。

3. 曝光模式 (Shooting Modes)

即相机模式转盘上的 P、A(Av)、S(Tv)、M 档，对应不同的“控制权分配”：

模式	操作逻辑	适用场景
P档（程序自动）	相机自动设光圈+快门，你负责构图	快速抓拍（街头、日常）
A/Av（光圈优先）	你手动设光圈（控虚化），相机自动算快门	人像、风光（需控景深）
S/Tv（快门优先）	你手动设快门（控运动），相机自动算光圈	运动、生态（需冻住/拖影）
M档（手动曝光）	你手动设光圈+快门+ISO，完全掌控曝光	进阶创作（夜景、HDR）
B快门（Bulb）	按住快门则持续曝光，松开即关闭	超长曝光（星轨、烟花）

4. 曝光控制技巧

（1）曝光补偿 (Exposure Compensation)

作用：用 P/A/S 档时，若相机自动曝光偏亮/偏暗，可手动微调（±EV）。 ::: tip[白加黑减] 画面中白色物体（雪地、白衣）占比高时，相机易“误判”为过亮，导致照片偏暗→需增加曝光（+0.7~+2EV）；拍黑色物体（黑猫、深色背景）时，需减少曝光（-0.7~-2EV）。 :::

（2）包围曝光 (Exposure Bracketing - AEB)

操作：相机自动拍3张（或更多）不同曝光的照片（1张正常、1张偏暗、1张偏亮）。
用途：后期合成HDR（高动态范围）照片，解决大光比场景（日落、逆光）亮部过曝/暗部死黑问题。

（3）安全快门 (Safe Shutter Speed)

定义：避免手持拍摄“手抖模糊”的最低快门速度。 :::tip[计算方法] 快门速度 ≥ 1/镜头焦距。例如用50mm镜头，安全快门建议≥1/50s；用200mm长焦，建议≥1/200s（长焦手抖影响更明显）。 :::

二、测光与影调 (Metering & Tone)

1. 测光模式 (Metering Modes)

相机通过不同范围的“光线采样”来计算曝光，选对模式能减少过曝/欠曝：

模式	采样范围	适用场景
评价/矩阵测光	整个画面综合采样	日常拍摄（光线均匀场景）
点测光	仅画面中心1-5%区域采样	大光比场景（逆光剪影、舞台）
平均测光	整个画面亮度取平均值	光线均匀的简单场景（少用）

2. 测光辅助功能

测光点 (Metering Point)：你手动选择的“光线采样点”（比如拍人像时，选人脸作为测光点，确保面部曝光准确）。
测光锁定 (AE Lock)：按下AE-L按钮，锁定当前测光点的曝光值→即使重新构图，曝光也不变（避免二次测光偏差）。

3. 影调核心概念

（1）直方图 (Histogram)

本质：显示照片“明暗分布”的柱状图（横轴从左到右=暗→亮，纵轴=像素数量）。 :::tip[看图技巧] 左侧柱子堆积→暗部死黑（细节丢失）；右侧柱子堆积→亮部过曝（死白）；理想状态是柱子分布均匀，无明显堆积。 :::

（2）动态范围/宽容度 (Dynamic Range)

定义：相机能同时记录的“最亮处”和“最暗处”细节的范围。
影响：宽容度越高，越能在大光比场景（如日落时的天空+地面）保留亮部云彩细节和暗部地面纹理。

（3）18灰 (18% Gray)

作用：相机测光的“基准标准”——相机会默认所有物体都反射18%的光线（即中灰色）。
为什么拍雪地易偏暗？因为相机想把雪地（反射率高）“压成18灰”，导致实际照片偏暗→需用“白加黑减”补偿。

（4）影调风格

高调 (High Key)：画面整体明亮，以白/浅色为主，阴影少→适合清新人像、儿童照。
低调 (Low Key)：画面整体昏暗，以黑/深色为主，对比强→适合复古人像、静物（突出质感）。
分区曝光 (Zone System)：摄影大师安塞尔·亚当斯提出的精准控光系统，将画面从纯黑（Zone 0）到纯白（Zone X）分为11个区域，帮你精准控制每个区域的明暗。

三、光线的艺术 (The Art of Light)

1. 光的性质（硬光 vs 柔光）

类型	光源特点	光影效果	适用场景
硬光	光源集中（正午太阳、闪光灯裸灯）	阴影清晰、明暗对比强	男性人像（突出轮廓）、建筑
柔光	光源分散（阴天、窗户光、柔光箱）	阴影模糊、过渡柔和	女性人像（美化皮肤）、静物
散射光	光线均匀扩散（如阴天的天空）	无明显阴影，画面平	纪实、日常拍摄

2. 光的方向（决定画面立体感）

（1）常用方向及效果

平光/大平光：光线从相机正前方射向主体→主体均匀受光，无阴影→适合证件照（但缺乏立体感）。
侧光（90°）：光线从主体侧面射来→明暗分割明显，突出质感（如拍树皮、金属）。
前45°光：光线从主体前方45°角射来→兼顾亮度和立体感，是最经典的人像布光（拍证件照、写真常用）。
顶光：光线从主体正上方射来（正午太阳）→易在人脸眼窝、鼻下产生难看阴影→尽量避免，或用反光板补阴影。
地脚光：光线从主体下方往上照→营造恐怖/戏剧化效果（如万圣节妆容、舞台特效）。

（2）特殊方向：逆光与轮廓光

逆光：光线从主体背后射来→分“大逆光”（强光，适合拍剪影）和“小逆光”（柔光，适合拍轮廓光）。 :::tip[拍逆光人像技巧] 用点测光测人脸，同时开“曝光补偿+1EV”，或用反光板补人脸阴影→避免人脸黑、背景过曝。 :::

（3）经典布光术语

伦勃朗光 (Rembrandt Light)：光线从主体45°侧后方射来，在脸颊一侧形成“倒三角形亮区”（类似画家伦勃朗的肖像画）→适合复古人像。
135°光：从主体后侧方（与相机成135°）射来的“轮廓光”，作用是分离主体与背景（如拍头发丝光）。
鳄鱼光 (Split Light)：光线从主体正侧方射来→脸被“一分为二”（一半亮、一半暗）→适合表现人物硬朗气质（男性人像）。

3. 光线控制技巧

光比 (Light Ratio)：画面最亮处与最暗处的亮度比例→光比大（如1:8）→对比强，适合复古/戏剧风；光比小（如1:2）→画面平，适合清新/纪实风。
眼神光 (Catchlight)：眼球上的“小光点”→有眼神光会让眼睛更有神，拍人像时可通过反光板、窗户光制造。
营造光：用闪光灯、反光板等工具“主动控光”→比如室内拍人像，用闪光灯+柔光箱打侧光，比直接用天花板灯光更出片。

四、构图与视角 (Composition & Perspective)

1. 构图核心原则

主体明确：画面中最想表达的核心（如人像中的人、风光中的山），避免元素杂乱。
陪体辅助：辅助主体的元素（如人像中的花、风光中的树），不能抢主体风头。
画面简洁：删除无关元素（如背景中的垃圾桶、电线），可用大光圈虚化或改变角度避开。

2. 经典构图法则

（1）基础法则

三分构图 (Rule of Thirds)：用两条横线+两条竖线将画面“井”字分割，把主体放在4个交点或线上→避免主体居中的呆板（拍风光时，地平线对齐横线；拍人像时，眼睛对齐横线）。
引导线 (Leading Lines)：用画面中的线条（道路、栏杆、河流）引导视线到主体→增加画面纵深感（如拍公路时，让公路线条指向远方的山）。
对角线构图：将主体/线条沿画面对角线摆放→增加动感（如拍奔跑的人、斜放的吉他）。

（2）进阶法则

框架式构图：用前景元素（门框、树枝、窗户）“框住主体”→模拟“人眼视角”，增加代入感（如透过车窗拍窗外的风景）。
黄金分割 (Golden Ratio)：比三分构图更精准的比例（1:1.618），适合追求极致美感的场景（如建筑、静物），部分相机可开启黄金分割线辅助。

3. 视角与景别

（1）视角选择

俯拍（高角度）：从高处向下拍→适合拍全景（如城市俯瞰）、让主体显小（如拍人群中的人）。
仰拍（低角度）：从低处向上拍→让主体显高大（如拍高楼、人像）、避开地面杂乱背景。
平拍（与主体同高）：最自然的视角→适合纪实、日常拍摄（如拍孩子时，蹲下来与孩子同高）。

（2）景别分类

:前景/中景/背景：画面的三个层次，同时包含三者能增加纵深感（如拍风光时，近有花（前景）、中有树（中景）、远有山（背景））。
人像景别：七分人像（拍至膝盖以上）、三分人像（拍至腰部以上）、全身照（拍完整身体）→根据场景选择，日常写真常用三分/七分人像。
特写 (Close-up)：拍主体局部（如人像的眼睛、静物的纹理）→突出细节（如拍水滴、指纹）。

（3）实用技巧

地平线水平：拍风光时，确保地平线不倾斜（可用相机网格线辅助），倾斜会让画面失衡。
切割点避开关节：裁人像时，避免在手腕、脚踝、膝盖处切割→否则像“截肢”，显得不自然（如拍七分人像，裁切至膝盖上方10cm处）。

五、相机与传感器 (Cameras & Sensors)

1. 相机类型对比

类型	核心特点	优势	适用人群
单反相机 (DSLR)	有反光镜+五棱镜，光学取景	续航强、耐候性好	专业摄影师、户外拍摄者
微单相机 (Mirrorless)	无反光镜，电子取景（EVF）	体积小、对焦快	入门用户、日常便携拍摄
中画幅相机	传感器比全画幅大	画质顶级、细节丰富	商业摄影（广告、婚纱）

2. 传感器：画质的核心

传感器相当于“胶片时代的底片”，尺寸和类型直接影响画质：

（1）传感器类型

CMOS：目前主流类型，高感表现好、功耗低、连拍速度快，绝大多数相机（单反、微单）都用CMOS传感器。
CCD：早期传感器类型，色彩还原细腻，但高感噪点多、功耗高，现在仅少数复古相机或入门机型使用。

（2）传感器尺寸（画幅）

不同尺寸的传感器，对画质、虚化效果影响极大，常见分类如下：

画幅类型	尺寸（约）	特点与适用场景
全画幅	36×24mm	与传统135胶片尺寸一致，画质、高感、虚化能力最强→适合专业创作（风光、商业人像）
APS-C画幅	23.6×15.7mm（佳能）/ 23.5×15.6mm（索尼）	尺寸约为全画幅的1/1.5，是入门/中端相机主流→兼顾画质与便携（日常、旅行）
DX画幅	同APS-C尺寸	尼康对自家APS-C画幅的专属称呼（如D7500、Z50均为DX画幅）
APS-H画幅	28.7×19.1mm	介于全画幅与APS-C之间，目前已停产（仅部分老机型如佳能1D Mark IV使用）
中画幅	44×33mm（常见）	尺寸远大于全画幅，细节解析力顶级→适合商业摄影（广告、产品）、高端风光

:::tip[等效焦距换算] APS-C/DX画幅相机使用全画幅镜头时，焦距需乘以“换算系数”（佳能1.6x、尼康/索尼1.5x）。例如50mm镜头在索尼APS-C相机上，等效焦距为50×1.5=75mm（视角变窄，类似长焦）。 :::

3. 机身核心功能

热靴 (Hot Shoe)：相机顶部的金属接口，用于连接外置闪光灯、麦克风、GPS模块等附件（注意：热靴仅传信号，部分需额外供电）。
反光板预升 (Mirror Lock-up)：仅单反相机具备，拍摄前先升起反光板，避免快门触发时反光板震动导致画面模糊→适合三脚架拍摄风光、微距（快门速度≤1/30s时效果明显）。

六、镜头与光学 (Lenses & Optics)

1. 镜头核心参数

（1）焦距 (Focal Length)

定义：镜头光学中心到传感器的距离（单位mm），决定“视角宽窄”和“成像大小”。
不同焦距镜头的适用场景：

焦距范围	镜头类型	视角特点	适用场景
8-24mm	超广角镜头	视角极宽（100°以上），易产生畸变	风光（大场景）、建筑（展现空间）、室内
24-35mm	广角镜头	视角略宽于人身，接近日常观察	纪实（街头）、旅行（环境人像）
50mm	标准镜头	视角与人眼接近（约46°），无明显畸变	日常、人像、扫街（“人文镜皇”）
85-135mm	中长焦镜头	视角窄，压缩感强	人像（虚化自然，背景简洁）
200-600mm	长焦/超长焦镜头	视角极窄，可“拉近”远处物体	生态（拍鸟）、体育（拍运动员）、野生动物

（2）光圈（镜头口径比）

标注方式：镜头名称中“F/xx”即为最大光圈（如“EF 50mm F/1.8 STM”表示最大光圈F1.8）。
分类：
- 恒定光圈镜头：变焦时最大光圈不变（如“24-70mm F/2.8”）→画质好、价格高，适合专业场景；
- 浮动光圈镜头：变焦时最大光圈变小（如“18-55mm F/3.5-5.6”）→性价比高，适合入门用户。

（3）变焦类型

光学变焦 (Optical Zoom)：通过移动镜头内镜片组改变焦距，画质无损失→所有变焦镜头均支持；
数码变焦 (Digital Zoom)：对传感器成像进行“裁剪放大”，本质是降低分辨率→画质损失严重，日常不建议使用（手机相机此功能较常见）。

2. 特殊镜头类型

鱼眼镜头：焦距极短（8-15mm），视角接近180°，画面边缘产生夸张“桶形畸变”→适合创意拍摄（如星空穹顶、全景合影）；
微距镜头：放大倍率≥1:1（能拍清昆虫翅膀、水滴纹理），对焦距离近→适合静物、生态微距摄影（常见焦距90mm、100mm）；
移轴镜头：可通过“平移”“倾斜”矫正透视畸变（如拍高楼时避免“倾倒”）→适合建筑、产品摄影（价格昂贵，专业级镜头）。

3. 镜头光学现象与技术

（1）常见光学问题

鬼影 (Ghosting)：强光（如太阳、灯光）射入镜头时，光线在镜片间反复反射，在画面中形成的“光斑/鬼影”→可通过安装遮光罩、避免镜头正对强光减少；
眩光 (Flare)：强光导致画面出现“雾化光斑”，降低对比度→与鬼影成因类似，优质镜头的镀膜（如蔡司T*镀膜、尼康纳米结晶镀膜）可减轻；
色散/紫边 (Chromatic Aberration)：光线穿过镜片时，不同色光折射角度不同，在高反差边缘（如树枝与天空）出现“紫/绿色镶边”→可通过后期软件（LR/PS）矫正，高端镜头光学结构优化更好，色散更轻微。

（2）实用镜头技术

防抖 (Image Stabilization)：
- 镜头防抖（佳能IS、尼康VR、索尼OSS）：镜头内置补偿镜片，抵消手抖→适合手持拍摄（尤其长焦镜头，如70-200mm VR可降低2-3档安全快门）；
- 机身防抖（索尼IBIS、富士IBIS）：传感器自身移动补偿，所有镜头均可受益→微单相机主流配置；
AF-S超音波马达（尼康）：镜头内置超声波马达，对焦安静、快速、精准→适合抓拍（如拍儿童、宠物），对应佳能“USM马达”、索尼“SSM马达”；
内对焦 (Internal Focusing - IF)：对焦时镜头长度不变、前组镜片不旋转→方便使用偏振镜（无需重新调整）、安装遮光罩（不会松动）。

七、对焦与景深 (Focusing & Depth of Field)

1. 对焦核心操作

（1）对焦模式

模式	操作逻辑	适用场景
自动对焦 (AF)	相机自动判断并对准焦点	日常拍摄（90%场景适用）
手动对焦 (MF)	转动镜头对焦环手动调整焦点	微距（精准对焦细节）、夜景（避免自动对焦失效）、视频拍摄

（2）自动对焦细分模式

单次自动对焦 (AF-S/One-Shot)：半按快门锁定焦点，松开后焦点不变→适合拍静止物体（人像、风光、静物）；
连续自动对焦 (AF-C/AI Servo)：半按快门时持续跟踪运动主体，焦点随主体移动→适合拍运动物体（飞鸟、运动员、奔跑的孩子）；
自动伺服对焦 (AF-A/AI Focus)：相机自动判断主体是否运动，静止用AF-S、运动用AF-C→适合不确定主体状态的场景（如街头抓拍）。

（3）对焦关键概念

对焦点 (Focus Point)：屏幕/取景器中用于对焦的“方框/点”，高端相机对焦点数量更多（如索尼A7M4有5940个对焦点），覆盖范围更广；
焦平面 (Focal Plane)：画面中“最清晰”的平面（与镜头光学中心平行），拍人像时建议将焦平面对准眼睛（确保眼睛清晰）；
半按快门：相机默认操作逻辑——半按快门同时完成“对焦”和“测光”，完全按下快门拍摄→避免先按快门再对焦导致错过瞬间；
脱焦 (Out of Focus)：焦点未对准主体，画面模糊→常见原因：对焦点选错（如对焦到背景）、快门速度低于安全快门（手抖）、低光环境自动对焦失效。

2. 景深（Depth of Field - DoF）

（1）核心定义

景深：画面中“从前到后保持清晰的范围”，分为“浅景深”和“大景深”：
- 浅景深 (Shallow DoF)：清晰范围小，仅主体清晰、背景/前景模糊→适合突出主体（人像、静物）；
- 大景深 (Deep DoF)：清晰范围大，从前景到背景均清晰→适合展现场景（风光、建筑、合影）。

（2）景深三要素（必记）

:::tip[景深控制黄金法则] 影响景深的三个核心因素，记住“大、长、近”浅景深（主体更突出），“小、短、远”大景深（场景更清晰）：

光圈：光圈越大（F值越小，如F1.8）→景深越浅；光圈越小（F值越大，如F16）→景深越大；
焦距：焦距越长（如200mm）→景深越浅；焦距越短（如24mm）→景深越大；
拍摄距离：离主体越近→景深越浅；离主体越远→景深越大。 :::

（3）虚化（Bokeh）

定义：景深之外的模糊区域（通常指背景虚化），“好的虚化”边缘柔和、无明显棱角，色彩过渡自然；
影响虚化质量的因素：镜头光圈形状（圆形光圈比多边形光圈虚化更圆润）、镜片数量（多组多片镜头虚化更自然）、背景距离（背景离主体越远，虚化越明显）。

八、色彩与画质 (Color & Image Quality)

1. 色彩控制核心

（1）白平衡 (White Balance - WB)

作用：校正不同光源下的“色彩偏差”，让白色物体在照片中呈现真实白色（人眼会自动适应光线，相机需手动/自动校正）。
常见白平衡模式：

模式	适用光源	效果特点
自动白平衡 (AWB)	所有光源（默认模式）	多数场景准确，复杂光线下可能偏色
日光 (Sunny)	晴天户外（上午10点-下午4点）	还原真实色彩，避免偏蓝/偏黄
阴天 (Cloudy)	阴天、多云天气	增加暖色调（抵消阴天的冷蓝）
阴影 (Shade)	树荫、建筑物阴影下	暖色调更强（阴影光线偏蓝）
白炽灯 (Tungsten)	传统钨丝灯（黄色光）	降低暖色调，避免画面过黄
荧光灯 (Fluorescent)	日光灯、LED灯（偏绿/偏蓝）	校正绿色/蓝色偏差
手动白平衡 (Custom WB)	复杂光源（如混合光）	用灰卡/白纸校准，色彩最精准

（2）色温 (Color Temperature)

定义：用“开尔文（K）”表示光源的颜色属性，K值越低越暖，K值越高越冷：
- 低K值（2000-3000K）：烛光、白炽灯→光线偏黄/橙（暖色调）；
- 中K值（5000-6500K）：晴天日光、正午阳光→光线接近白色（中性色）；
- 高K值（7000-10000K）：阴天、阴影、蓝光灯→光线偏蓝（冷色调）；
手动色温调整：在“K值”模式下，可直接输入数值（如拍夕阳时设3000K，增强暖色调；拍冷调人像时设8000K，增加蓝色氛围）。

（3）色彩相关概念

色相 (Hue)：颜色的“本质属性”（如红色、绿色、蓝色），是色彩分类的基础；
饱和度 (Saturation)：颜色的“鲜艳程度”（饱和度高→颜色浓郁，如正红；饱和度低→颜色淡雅，如粉红）；
明度 (Brightness)：颜色的“明暗程度”（同一色相下，明度高→浅色，如浅黄；明度低→深色，如深黄）；
色彩对比：画面中不同颜色的差异，如冷暖对比（蓝+黄）、互补色对比（红+绿）→对比强则画面活泼，对比弱则画面柔和。

2. 画质核心指标

（1）噪点 (Noise)

定义：画面中出现的“随机彩色/黑白颗粒”，会降低细节清晰度；
产生原因：
- 高ISO（ISO越高，噪点越多，如ISO 6400比ISO 100噪点明显）；
- 长时间曝光（曝光时间＞30s，传感器发热导致热噪点）；
- 暗光环境（光线不足时，相机放大信号，同时放大噪点）；
减少噪点方法：尽量用低ISO拍摄，暗光下用三脚架+慢门代替高ISO，后期用LR“细节-减少噪点”功能优化。

（2）锐度 (Sharpness)

定义：画面中物体“边缘的清晰程度”（锐度高→边缘清晰，如文字边缘锐利；锐度低→边缘模糊，如文字发虚）；
影响因素：镜头素质（定焦镜头比变焦镜头锐度高，高端镜头比入门镜头锐度高）、对焦精度（对焦偏移会导致锐度下降）、快门速度（低于安全快门手抖导致锐度低）；
后期锐化：在LR/PS中适度锐化（“细节-锐化”），避免过度锐化导致画面出现“白边”和噪点。

（3）动态范围（宽容度）

前文已提及，此处补充：动态范围高的相机，在高反差场景（如逆光日落）中，能同时保留亮部（天空）和暗部（地面）的细节，后期调整空间更大（如暗部提亮不会出现明显噪点）。

九、附件与工具 (Accessories & Tools)

1. 核心附件清单

附件名称	作用与适用场景	选购建议
三脚架	稳定相机，避免手抖模糊→适合慢门（瀑布、星轨）、夜景、HDR、合影	入门选铝合金材质（轻便），专业选碳纤维（轻便+稳定），承重≥3kg
快门线/遥控器	远程触发快门，避免按快门时手抖→配合三脚架使用（尤其长曝光）	入门选有线快门线（便宜），进阶选无线遥控器（方便，如拍合影自拍）
反光板	反射光线，给主体阴影补光→适合人像（消除眼窝、下巴阴影）、静物	选5合1反光板（金银白黑透，适配不同光线：金色暖光、银色冷光、白色柔光）
ND镜（减光镜）	减少进入镜头的光量，允许白天用慢门/大光圈→适合拍丝滑瀑布（白天慢门）、浅景深人像（白天大光圈避免过曝）	选ND2/ND4/ND8（低倍，适合轻度减光）或ND1000（高倍，适合白天长曝光），注意镜头口径匹配
C-PL镜（环形偏振镜）	消除非金属表面反光（水面、玻璃、树叶），增强蓝天对比度→适合风光（拍蓝天白云）、静物（拍玻璃制品）	选“环形偏振镜”（适配AF相机），避免买“线性偏振镜”（影响自动对焦），口径与镜头一致
渐变镜（GND镜）	一半透明、一半灰色，压暗过亮天空→适合风光（日落时天空亮、地面暗，用 GND 镜平衡光比），避免天空过曝或地面欠曝。	入门选 1-2 档灰度（GND0.3/GND0.6），避免过度压暗天空导致不自然。

（2）备用电池与存储卡

备用电池：相机原装电池续航通常1-2小时（尤其微单），外出拍摄（如旅行、婚礼）需至少1块备用电池，选原装电池（被副厂电池炸死前最后的挣扎）；
存储卡：
- 类型：选SD卡（主流相机通用），专业相机可选CFexpress卡（读写速度快，适合连拍、4K视频）；
- 容量与速度：日常拍摄选64GB-128GB（足够1天拍摄），速度选UHS-I U3级别（支持4K视频录制，连拍不卡顿），避免买低速卡（导致照片存储慢、错过瞬间）。

2. 辅助工具

镜头清洁套装：包含镜头布、清洁液、气吹→日常清洁镜头指纹、灰尘（避免用纸巾擦，会划伤镜头镀膜）；
相机包：保护相机和附件，选“双肩包”（背负舒适，适合长时间携带）或“单肩包”（取放方便，适合日常扫街），注意内部隔层是否适配相机+镜头尺寸；
镜头遮光罩：减少杂光进入镜头，避免鬼影、眩光，同时保护镜头前端（防碰撞、防刮擦）→建议每次拍摄都安装，尤其户外强光场景。

十、闪光灯摄影 (Flash Photography)

1. 闪光灯核心模式

（1）TTL自动闪光（Through-The-Lens）

原理：相机通过镜头测光，自动计算闪光输出量（无需手动调整）→新手首选模式，适配多数场景；
特点：操作简单，光线变化时自动调整（如从室内到户外，闪光量自动增减），但复杂光线下（如强逆光）可能欠曝/过曝，需配合曝光补偿微调。

（2）手动闪光（M档）

原理：手动设定闪光输出功率（1/1、1/2、1/4…1/128），功率越大，闪光越强→适合精准控光（如人像、静物）；
操作逻辑：闪光功率与拍摄距离成反比（距离越远，需越大功率），例如1/4功率适合3米内补光，1/1功率适合5米外补光。

（3）高速同步闪光（High-Speed Sync - HSS）

作用：突破相机“最高同步快门速度”限制（普通闪光同步快门通常1/125s-1/250s），允许用更高快门（如1/1000s）配合闪光灯→适合白天补光（如户外人像，用大光圈+高速快门+闪光灯，既保证浅景深，又补光消除阴影）；
注意：高速同步模式下，闪光功率会下降（距离越远，效果越弱），需靠近主体或提高闪光功率。

2. 实用闪光技巧

（1）跳闪（Bounce Flash）

操作：将闪光灯灯头向上/向侧面（对准天花板/墙面），让光线反射后再照射主体→避免直接闪光导致的“硬光阴影”（如人脸油光、背景黑）；
适用场景：室内拍摄（天花板/墙面为白色/浅色，反射光线柔和），不适合深色墙面（光线吸收多，补光效果差）。

（2）离机闪光（Off-Camera Flash - OCF）

操作：用引闪器将闪光灯远离相机，从侧面/斜前方给主体补光→比机顶闪光灯更灵活，可制造立体感（如侧光人像）；
入门方案：选“热靴引闪器+单灯”，无需复杂设备，即可实现基础离机闪光（如拍人像时，闪光灯从左前方45°补光，消除面部阴影）。

（3）补光强度控制

曝光补偿联动：TTL模式下，可通过“闪光曝光补偿（FEC）”微调补光强度（+EV增强补光，-EV减弱补光）→例如拍浅色衣服人像，FEC+0.7EV避免主体过暗；
距离控制：手动模式下，靠近主体补光强度增强，远离则减弱，无需频繁调整功率（适合快速抓拍）。

十一、拍摄技法与风格 (Shooting Techniques & Styles)

1. 经典场景拍摄技法

（1）风光摄影

核心思路：突出“大场景+细节”，保证画面清晰、光比平衡；
关键步骤：
1. 设备：三脚架+广角镜头（24mm以下）+C-PL镜（消除反光，增强蓝天）；
2. 参数：光圈F8-F16（保证大景深，从近到远清晰），ISO 100（低噪点），快门速度根据光线调整（白天1/100s-1/30s，长曝光用ND镜）；
3. 构图：三分构图（地平线对齐横线），加入前景（如石头、花草）增加纵深感，避免画面空洞；
4. 时机：黄金时段（日出后1小时、日落前1小时），光线柔和、色彩丰富，避免正午强光（对比强、阴影硬）。

（2）人像摄影

核心思路：突出主体（人脸），背景简洁，肤色自然；
关键步骤：
1. 设备：中长焦镜头（85mm-135mm，压缩感强，背景虚化自然），反光板（补阴影）；
2. 参数：光圈F1.8-F4（浅景深，虚化背景），ISO 100-400（保证画质），快门速度≥1/125s（避免手抖模糊，尤其抓拍动态人像）；
3. 光线：优先用侧光/前侧光（立体感强），避免顶光（眼窝、下巴阴影重），室内用闪光灯跳闪补光；
4. 对焦：对焦到眼睛（确保眼睛清晰，眼神光明显），连拍模式抓拍自然表情（避免僵硬摆拍）。

（3）夜景摄影

核心思路：控制噪点，保证暗部细节，避免灯光过曝；
关键步骤：
1. 设备：三脚架+广角/标准镜头，快门线（避免手抖）；
2. 参数：光圈F8-F11（保证画质，避免灯光星芒模糊），ISO 100-800（根据相机高感能力调整，避免噪点过多），快门速度1-30s（根据光线：灯光亮则快，灯光暗则慢）；
3. 技巧：用“点测光”测灯光边缘（避免灯光过曝），后期暗部适度提亮（不超过1档，避免噪点），避免用大光圈（灯光易产生光斑过曝）。

2. 常见摄影风格

纪实风格：记录真实场景，不刻意摆拍，注重故事性→适合街头、人文、生活记录，常用广角镜头（24-35mm），参数以“抓拍灵活”为主（光圈F4-F5.6，快门≥1/200s）；
清新风格：画面明亮，色彩淡雅，对比度低→适合人像、静物、小景，常用柔光（阴天、窗户光），后期降低饱和度、提高明度，避免浓重色彩；
复古风格：色彩偏暖（黄/橙色调），对比度高，颗粒感强→适合人像、静物，可用低ISO（100）+后期添加胶片颗粒，光线用侧光（增强质感），色彩调整偏向“柯达胶片”色调。

十二、后期处理 (Post-Processing)

1. 主流后期软件

Lightroom（LR）：适合批量处理、基础调整（曝光、白平衡、色彩），操作简单，非破坏性编辑（调整不改变原片，可随时恢复）→入门首选；
Photoshop（PS）：适合精细修图（如去除杂物、人像液化、合成），功能强大，需一定学习成本→进阶阶段配合LR使用（LR调基础，PS精修）；

2. 基础后期流程（以LR为例）

（1）导入与筛选

导入照片时添加“关键字”（如“2025-10-30 人像”），方便后期查找；
筛选优质照片：按“星级”标记（1-5星），优先处理清晰、曝光正常、构图好的照片，删除模糊、过曝/欠曝严重的废片。

（2）基础调整（右侧“基本”面板）

白平衡：修正色彩偏差→如阴天照片偏蓝，拖动“色温”滑块向右（加黄）；室内照片偏黄，拖动“色温”滑块向左（加蓝），以“白色物体还原真实白色”为标准；
曝光：调整整体明暗→过曝则降低“曝光”，欠曝则提高“曝光”，避免暗部死黑或亮部死白（参考直方图，无明显堆积）；
对比度与阴影/高光：优化明暗层次→对比度低则提高“对比度”（画面更通透），暗部细节少则提高“阴影”（提亮暗部），亮部过曝则降低“高光”（恢复亮部细节）；
白色色阶/黑色色阶：控制画面“最亮”和“最暗”点→提高“白色色阶”增强画面通透感，降低“黑色色阶”避免暗部发灰（注意不要过度，否则噪点明显）。

（3）细节优化（“细节”面板）

锐化：增强边缘清晰程度→“数量”100-150（根据照片，人像可低、风光可高），“半径”0.8-1.2（避免边缘出现白边），“蒙版”用画笔涂抹需要锐化的区域（如人像眼睛、风光轮廓）；
减少噪点：降低高ISO照片的颗粒感→“明亮度”根据噪点程度调整（ISO 3200可设30-50），“颜色”10-20（消除彩色噪点），避免过度降噪导致画面模糊。

（4）色彩调整（“颜色”面板）

调整“混合”：针对特定颜色微调→如风光照片想增强蓝天，提高“蓝色”的“饱和度”和“明亮度”；人像想让肤色更红润，提高“红色”“橙色”的“饱和度”（适度，避免肤色怪异）；
避免“色彩溢出”：调整饱和度时，观察画面是否有“色块”（如红色衣服变成纯红，无细节），如有则降低对应颜色的饱和度。

3. 后期注意事项

不破坏原片：LR/PS均支持“非破坏性编辑”，避免直接在原片上调整（如PS中复制背景图层再修图），方便后期重新调整；
适度调整：避免过度曝光（画面发白）、过度锐化（边缘白边）、过度饱和（色彩刺眼），以“自然、接近人眼视觉”为原则；
保留细节：暗部提亮不超过1档（避免噪点），亮部压暗不超过2档（避免细节丢失），尤其风光照片，细节是质感的关键。

附录：摄影圣经

你就长这样，你的腿本来就那么短，你的脸就是那么大的，所以怎么拍都大。
不是光线不好，是你不够白。
你两边脸都不好看。
我的相机不会骗人。
你人比较矮，要不拍半身。
你的脸不太行，口罩再拉上去点。
你别笑了，笑起来出不了片。
你要接受真实的自己，学会与自己和解。
我的相机不会说谎。
你不上镜那是你的问题。
你跟背景一对一比，背景就好看多了。
没关系，索尼后期可以拉。
你要相信索尼的宽容度。
相机只是拍的更清楚，又没有美颜功能。
你就说拍的清不清楚吧。
我学的是摄影又不是魔法，我是摄影师不是魔法师。
相机还原的就是真实的你。
你的美是欠费的。
这个世界上有很多美好的事情，但是都跟你没什么关系。
如果有哪句话伤害到你了你告诉我，我再重复一遍。
我觉得拍的挺好的，你卡粉我都没拍出来。
你的表现力不太好，不是我的问题。
索尼的照片是最难删的。
拍照免费，删照片 50 一张。
你要打我吗？我运动相机全程记录的。

转载-海盗指南

Thu, 23 Oct 2025 19:51:01 GMT

声明：本文为转载，原文链接: 海盗指南——如何优雅地获取和使用盗版资源

前言

楼主自认为还在探索如何作为海盗远洋盗版之海的过程中，但发现不管是现实生活中还是水源上，许多同学仍被付费内容的门槛所困扰。楼主自认为在此方面还有一些个人的小经验，希望分享给大家，以此减少大家在寻找盗版过程中花费的时间精力和金钱成本。本贴也将设为Wiki帖，希望有经验的源友与大家分享你的海盗经验。

本帖已设置有目录，在PC端的页面右侧和手机端底部的三个小横条按钮可查看目录。每个子类别下网站的排序代表楼主对这些网站的偏好排序。

免责声明

在本帖最后更新时，帖子中提到的所有网站均经过个人验证不包含病毒等恶意内容。

本帖并非鼓励盗版行为。希望大家在有经济实力，且创作者值得鼓励的情况下，支持正版内容。

准备工作

若你有一些海盗经验，且自认为对互联网上的内容有一定的辨别能力，可以跳过本部分。若你缺乏经验或刚刚接触盗版，建议先仔细阅读本部分。

本帖提到的大部分网站需要科学上网才能访问。建议你在航海时使用PC，使用移动设备麻烦且耗时。

种子/磁力下载

在帖子中提到的种子网站，其下载链接会以种子文件或磁力链接的方式提供。前者是以.torrent为扩展名的文件，后者是以magnet:开头的URL，在种子网站上一般用磁铁图标表示。

建议使用qBittorrent-Enhanced-Edition下载种子/磁力链接；也可以使用qBittorrent的原始版本，但原始版本不会自动屏蔽恶意Peer。如果你不知道这是什么意思，请使用前者即可。

强烈不建议使用迅雷！迅雷不仅因为被各大客户端屏蔽而速度受限，还会吸其他客户端的血，破坏种子/磁力下载社区的环境。

关于反吸血

可以使用qBittorrent-ClientBlocker阻止恶意Peer占用你的上传带宽。该程序基于行为检测，仅支持qBittorrent。此外，实测qBittorrent-Enhanced-Edition的v4.6.5.10版本加入Shadowban功能后，已可以自动阻止大部分恶意Peer。

关于反吸血的更多信息和其他阻止恶意Peer的方法，可参见此帖子和此文档。感谢 @many_references

直链下载

浏览器自带的下载功能或许够用，但相比专门的多线程下载器，速度可能偏慢。对于采用直接下载的网站，建议你使用IDM等第三方工具下载（IDM的盗版在许多地方都能找到，比如将要提到的Rutracker）。

网页浏览

使用Edge、Chrome、Firefox等主流浏览器均可。

强烈建议安装uBlock Origin插件，该插件可以屏蔽上网冲浪时遇到的99.99%广告，更重要的是，还能有效拦截各大文件托管站烦人的页面跳转。

2024年10月更新：上线Manifest V3后，Chrome浏览器现已不支持uBlock Origin插件。为了解决该问题，你可以：

换用Firefox或者Edge浏览器（Firefox已明确表示将继续支持Manifest V2，因此uBlock Origin此后将一直支持Firefox；Edge曾表示将跟进谷歌推行Manifest V3，但目前还未明确日期，存在未来无法使用的可能性）。

若你希望继续使用Chrome浏览器，请换用 AdGuard（推荐）或 uBlock Origin Lite

防范病毒和恶意软件

虽然帖子中提到的所有网站均不包含病毒等恶意内容，但免不了你想找的资源并不存在于这些网站中，但又急着用。这些情况下，若你找到了某看起来还算正经的网站提供该资源，请先使用谷歌搜索site:reddit.com [网站名]了解网站的声誉，并使用VirusTotal上传你下载到的文件以保证其内容无病毒。

若你下载的内容确实被杀毒软件拦截，90%的情况是文件确实有毒，而非误报（若杀毒软件显示的报毒名称包含Crack、Keygen、KMS等字眼，则误报的可能性较高）。在没有十足把握的情况下请不要运行此类文件。

对于已知的恶意网站/上传者，请参阅这个列表。

请勿…

通过在搜索引擎搜索[软件名] 破解、[软件名] crack等关键词的方式寻找盗版资源。这些网站提供的文件很大概率会包含病毒或广告软件（关于防病毒，请回看防范病毒和恶意软件）。
在欧美国家直接下载盗版资源。请务必使用VPN下载，因为大部分运营商对盗版资源有很强的限制，轻则律师函警告，重则被运营商拉黑或处以罚款。关于位于欧美国家时的VPN选择， Mullvad和ProtonVPN在欧美海盗中声誉较好。（国内用户请勿使用这些VPN）
在种子/磁力下载完成后立即停止任务。由于P2P下载的原理，你所获得的下载速度均是由和你一样的用户提供的，反之亦然，他人所获得的下载速度是由你的上传速度提供的。希望你在索取的同时，也回报给P2P下载社区，在种子的分享率达到一定水平后再停止任务。从分享率=1开始努力吧！

资源分类

影视

TorrentGalaxy - 种子

最全的欧美影视资源种子站，且更新很快，以碟片资源为主，但也会发布枪版。你可以在这里找到未经压缩的、大至数百GB的蓝光原盘，也可以找到便于快速下载观看的1080P资源。请注意列表右侧S/L一栏，该栏下的数字越大，表明该资源越热门，下载速度越快。存在老资源死种的情况，但不多。

从2025年2月开始，TorrentGalaxy处于极不稳定状态，随时可能跑路。若链接无法打开请使用 1337x 作为替代。

硬核指南 - 在线播放

导航站，影视栏目下排名靠前的网站质量都不错，通常包含国内外知名的影视资源，加载速度快，并且基本没有“在线发牌”的视频内滚动和插入广告。由于楼主习惯下种子，故使用经验较少，只能给大家一个导航站。

EZTV - 种子

比较全的欧美影视资源种子站，更新较慢，资源质量差于TorrentGalaxy，主要体现在高分辨率（蓝光碟等）资源缺失。如果觉得1080P足矣，那么也是个不错的选择。请注意列表右侧Seeds一栏，该栏下的数字越大，表明该资源越热门，下载速度越快。

字幕库 - 直接下载

最全的汉语字幕数据库。可配合无字幕的原版资源使用。

海阔视界 - 源聚合App

需要手动搜索微信公众号“新方圆小棉袄”，在公众号的版本更新功能下进入最新文章获取下载链接。

拥有理论上最全的影视资源（关于源聚合App的特征，详见网络小说下阅读 - 源聚合App的介绍），但软件越来越臃肿。个人建议仅使用该软件的浏览器嗅探功能，该功能能将在线播放网站上的视频放入支持拖动快进快退、亮度音量调节的播放器中，使你在用手机在线播放视频时不会太痛苦。类似功能也可以在其他浏览器中找到。

动画

動漫花園 - 种子

知名的ACG资源种子站，资源丰富且更新很快，以动画为主，也有配乐和漫画等相关资源但较少。请注意列表右侧种子和下载两栏，该栏下的数字越大，表明该资源越热门，下载速度越快。但近年来随着用户数量下滑，老资源的死种情况增多，建议下老资源不要抱太大希望。

Nyaa - 种子

知名的ACG资源种子站。请注意列表右侧↑和↓两栏，该栏下的数字越大，表明该资源越热门，下载速度越快。感谢 @NOT_AVAILABLE

樱花动漫 - 在线播放

提供在线播放的动画。感谢 @Narrenschiff

tsdm / 南+ - 种子/网盘

ACG论坛，其中包含了资源分享区，提供了丰富的各类资源；然而有时分享方式为百度网盘，在没有会员的情况下下载速度可能很慢。感谢 @NOT_AVAILABLE

漫画

异次元 - 源聚合App

需要手动搜索微信公众号“异次元APP软件”，在公众号的软件下载 - 软件获取功能下获取下载链接、图源获取 - 图源获取功能下获取源。

拥有理论上最全的漫画资源，具体使用方法请参考上述公众号中的说明。

网络小说

阅读 - 源聚合App

拥有理论上最全的网络小说资源，第一次使用时有一定难度，但按照App内和官方微信公众号的使用说明，你可以在10分钟之内完成配置并开始阅读。之所以是理论上最全，是因为源聚合App的原理基本上就是按照配置文件帮你搜索了网上所有的笔趣阁等网站，将其内容爬取下来并呈现在阅读器中，并辅助你排除排版混乱、和谐词等因素的阅读干扰。

音乐

LX Music - 源聚合App

拥有理论上最全的音乐资源，且支持多平台，可作为日常使用的音乐播放器。建议添加六音音源，如何添加在该网页中有完整的步骤。

lucida - 直接下载

包含从流媒体平台（如Tidal、Deezer等）上爬取的无损音源，适合对音质有一定需求的用户。使用时需要指定流媒体平台，建议首选Tidal以获得最佳音质。

游戏

STEAMRIP / GOG Games - 直接下载（文件托管站）

分别提供Steam商店和GOG商店上未加密的游戏下载。只要游戏未经加密，99%能在这两个网站上找到，但可能存在游戏版本非最新的情况。请注意，这两个网站提供的下载链接均为文件托管站，这意味着在下载过程中你会遇到烦人的页面跳转和倒计时等待，这是因为文件托管站需要成本支撑下载带宽。最好使用IDM（详见准备工作），否则下载速度可能会慢十倍以上。

若需要最新版本的知名大作，或想获得经过各大Scene Groups破解的被加密游戏，请参照下一条。

DODI Repacks / FitGirl Repacks - 种子

相比上一条提到的两个网站，这两个网站上的游戏并不多（仅为数千个），这是因为这两个网站实质上是提供了重新打包过后的游戏文件，大幅减小文件体积但也会大幅增加安装用时。建议你在追求最新的游戏版本或被加密的游戏时在这两个网站上寻找。（你甚至能在DODI上找到PS5独占的《漫威蜘蛛侠2》的PC版，很神奇吧）

书籍/文献

请注意：提供盗版书籍的网站是钓鱼网站的重灾区，请小心不要在钓鱼网站上输入账号密码或充值/捐赠。如果你发现下列链接有的已失效，请在Google中输入该网站的名称，找到关于该网站的维基百科，通过维基百科内提供的链接进入。

Anna's Archive - 直接下载

拥有目前全世界最大的数据库（包含Z-Lib和部分读秀），但下载速度较差，且使用体验稍逊于Z-Lib。

Library Genesis - 直接下载

是 Anna's Archive 的数据来源之一，以外文书籍为主。下载时无需登录，对多线程下载限制较弱，建议使用 IDM 进行下载。

Z-Library - 直接下载

在国内知名度最高，且使用体验优于Anna's Archive。数据库比较全面，只要不是太冷门一般都能找到。

受限于本帖的即时性，链接可能随时失效。此时，请前往Z-Library的维基百科页面获取最新链接（位于简介卡片的URL一项）。

PC软件

MASSGRAVE

提供Windows与Microsoft Office套件（包括Office 365）的破解。使用过程简单到不可思议：打开PowerShell，输入irm https://get.activated.win | iex并回车即可。

作为替代，也可以使用HEU_KMS_Activator，该程序有直观的GUI且功能更丰富；缺点是会被Windows Defender报告为病毒并删除，需要手动添加排除。

要获取各种版本的Microsoft Office软件，可以使用Office Tool Plus。该软件可帮助你轻松部署各个版本的Office，并且也内置KMS激活途径。详细使用方法详见该软件的用户指南。

m0nkrus - 种子

专注于分享Adobe全家桶和少量一些其他设计软件（如Autodesk AutoCAD）。每篇文章末尾有指向数个种子站的链接，可任选一个进入并下载。请务必保证阅读这些种子站中作者提供的的FAQ。

由于2024版开始，Adobe加大了对盗版的打击，因此使用2024版及更新的Adobe软件更容易被弹窗。除了阅读FAQ内的解决方案外，还可以在防火墙中阻止Adobe软件联网以预防被弹窗。

Rutracker.org - 种子

论坛式的俄罗斯资源发布社区，知名度很高，资源很丰富。除了热门软件外，也适合寻找没那么热门的软件。

果核剥壳 / 懒得勤快 - 直接/网盘下载

国内知名度较高的破解软件发布站。资源较少，但都是热门软件，且无需通过种子/磁力下载，比较适合小白。

Mac软件

macked

国内破解平台，部分资源从国外搬运，也包含站长自己破解的资源，更新的频率很高，也完全免费。感谢 @我愿做一只翱翔的鹰

安卓软件

ReVanced - Patcher

提供一些安卓软件的补丁版本，以达到解锁会员或去除广告等效果，以破解YouTube Premium（即YouTube的付费功能）而闻名。若你的手机没有ROOT，需要先在APKMirror等网站上下载希望被打补丁软件的原安装包，在ReVanced Manager内选择该安装包并修补后手动安装。

Mobilism - 直接下载（文件托管站）

论坛式的安卓破解软件发布社区，内容较为全面。使用方法为在搜索框内搜索你需要的App名称即可。请注意，该网站提供的下载链接均为文件托管站，这意味着在下载过程中你会遇到烦人的页面跳转和倒计时等待，这是因为文件托管站需要成本支撑下载带宽。

xManager - 直接下载

提供能使用付费功能的Spotify版本。

BT站

请注意：本小节提到的种子站内容均为用户上传，因此虽然种子站本身安全，但无法保证你搜索到的每个内容均安全无毒。请参考前言下的防范病毒和恶意软件部分。

1337x - 种子

（应该是）目前全球规模最大的种子站，受欧美用户欢迎，主打量大管饱，但可能缺少冷门资源。

Rutracker.org - 种子

规模较大的种子站，受俄语用户欢迎。在资源质量方面优于1337x，适合查找游戏和软件资源。

PT站

PT站在与BT站性质相同，但PT社区用户经过筛选，内容质量更高，几乎不会出现内容带毒的情况；相应地，PT社区对成员也有额外的要求，如上传率等。请你仔细阅读PT站内的公告等内容保证自己遵守社区准则，否则可能被社区封号。

交大葡萄 - 种子（PT）

既然我们已经在交大，便不得不提起交大葡萄。交大葡萄作为国内高校PT社区中较为优质的存在，在资源质量、种子存活等方面比公开的BT站存在优势，更易于筛选作为高校学生所需要的资源。加入社区后请阅读社区规范准则，共建良好的社区环境。感谢 @灰色sky

其他

Kemono - 直接下载

提供用户上传的Patreon、Pixiv Fanbox、爱发电等付费平台上需要订阅才可解锁的内容。实测覆盖率较全，但由于资源均为用户上传，根据作者的受欢迎程度，资源可能存在数个月的延迟。

拓展内容

若你觉得以上介绍的网站不能满足你的盗版需求，且你希望花些时间自己寻找心仪的盗版资源网站，可关注以下内容，作为本帖的补充。请注意，下述网站主要关注英语资源。

r/Piracy megathread - 楼主认为目前最全的盗版资源集合。~~（宇宙万法的那个源头）~~
Awesome Piracy - 除盗版资源外，还收集了互联网各个角落的有用资源，如插件、脚本等。
FMHY - 在媒体资源丰富度方面领先。
r/CrackWatch - 如何知道哪些游戏是被加密的呢？该Sub的置顶帖中列出了所有被Denuvo加密的游戏及其被破解情况。

Obsidian插件推荐

Wed, 22 Oct 2025 18:23:34 GMT

obsidian 作为一个强大的双链笔记和知识管理工具，其真正的魅力在于其高度的可扩展性。丰富的插件社区为我们提供了无限的可能性，让我们可以根据自己的需求，将 obsidian 打造成独一无二的称手利器。

:::tip

本篇文章内容有限，如果你对某个插件较感兴趣，请点链接自己去看。

:::

Latex Suite
Smart Composer
Excalidraw
Typewriter Scroll
Editing Toolbar
Easy Typing
Linter
Completr
KaTeX to MathJax
Media Extended

Latex Suite

描述： 方便快速打公式

常用用法示例：

输入 sqx ➔ \sqrt{x}
输入 a/b ➔ \frac{a}{b} (输入 / 触发)
输入 sin @t ➔ \sin \theta (希腊字母快捷方式)
输入 par f x + Tab ➔ \frac{\partial f}{\partial x}

其他常用功能

矩阵快捷键
- 在矩阵环境 (matrix, align 等)中，Tab 插入 &，Enter 插入 \\ 并换行。
隐藏标记
- 隐藏 LaTeX 源码，直接显示美化后的数学符号，光标移入时显示源码。
便捷导航
- 在公式末尾按 Tab 跳出 $ 符号；在括号内按 Tab 跳到下一个右括号。
内联预览
- 光标在内联公式 ( $...$ ) 中时，弹出预览窗口。
括号自动缩放与高亮
- 触发 \sum, \int 等片段时自动添加 \left 和 \right；匹配的括号会同色显示和高亮。

自定义：

插件自带常用片段，用户可以在设置中修改、删除或添加自己的片段。

Smart Composer

描述： 方便问AI，能实现Copilot类似的效果，支持设置embedding模型做RAG，支持MCP

功能举例

引用笔记：
- 在聊天中输入 @文件名 ➔ AI 将引用该文件/文件夹作为上下文。
应用编辑：
- AI 助手提供“应用编辑”建议，可一键采纳修改文档。
多媒体上下文：
- 粘贴 Youtube 链接 ➔ 自动提取字幕作为上下文。
多媒体上下文：
- 拖拽或粘贴图片/网站链接 ➔ AI 将识别内容作为上下文。
Vault搜索 (RAG)：
- 按 Cmd+Shift+Enter ➔ 自动在整个保险库中进行语义搜索，查找最相关的笔记。
模型上下文协议 (MCP)：
- 允许连接到外部 AI 工具和数据源。
提示模板：
- 在聊天视图中输入 / 来创建和重用常用提示。
本地模型支持：
- 通过 Ollama 在本地运行开源 LLM，保护隐私和离线使用。
自定义模型：
- 支持连接 OpenAI, Anthropic, Google (Gemini), Groq, Ollama, Azure 等多种模型。
自定义系统提示：
- 为所有聊天对话定义自己的系统提示。

Excalidraw

描述： 一个足够强大的绘图工具，可画示意图，概念图等等。

核心功能

将功能强大的 Excalidraw 画板集成到 Obsidian 中。在库中创建、存储、编辑 Excalidraw 绘图，并将绘图嵌入到 Markdown 笔记中。

深度集成与链接

Markdown 作为文件
- 绘图文件本身就是 .md 文件，这意味着它们支持 标签 (Tags) 和 YAML Frontmatter，并且会显示在关系图谱中。
内容嵌入 (拖拽支持)
- 支持将 Markdown 笔记、图片、LaTeX 公式 甚至 YouTube 视频拖入画板。
- 嵌入的 Markdown 笔记在画板中会渲染显示。
双向链接与块引用
- 链接： 在绘图内部可使用 [[内部链接]]，链接会自动更新，并显示在文件的“反向链接”中。
- 嵌入： 在绘图内部可使用 ![[嵌入笔记]] 来嵌入其他笔记或图片。
- 图像块引用： 支持链接到绘图中的特定元素或区域，实现对绘图的精准引用。

自动化与高级工具

脚本引擎
- 提供强大的脚本支持，用于执行宏和自动化重复任务（如连接元素、创建图表等）。
OCR 支持
- 集成 Taskbone OCR，可以识别图像中的文本。
SVG 导入
- 支持将 SVG 文件转换为 Excalidraw 元素。
自定义笔刷
- 支持自定义钢笔、荧光笔并固定在侧边栏。

自定义与导出

模板支持
- 可以为新绘图指定模板，用以统一默认样式 (如颜色、字体、笔触、背景等)。
自定义调色板
- 允许用户在设置中或通过模板文件自定义 Excalidraw 的颜色面板。
自动导出
- 由于 Obsidian Publish 不支持 Excalidraw，此插件可自动将绘图导出为 PNG 或 SVG。
- 支持为深色/浅色模式分别导出图像。

Typewriter Scroll

描述： 让打字内容始终处于屏幕中间，无需滚轮调整。方便专注编写。

Editing Toolbar

描述： 加上Word工具栏，方便调整内容。

Easy Typing

描述： 改善写作体验，包括编辑过程中的自动文本格式和符号编辑增强功能。

Linter

描述： 对 Markdown 笔记进行格式化和规范化，确保样式统一。

Completr

描述： 对一些常用的输入提供自动补全，如 latex 公式。

KaTeX to MathJax

描述： 方便粘贴AI生成的公式，粘贴时自动把 KaTeX 转换为 MathJax。

Media Extended

描述： 方便给视频做笔记，支持 YouTube 和 Bilibili 的视频。

:::note

总结

本文介绍了一系列能够显著提升 Obsidian 使用体验和编辑效率的插件。这些插件覆盖了从数学公式输入、AI 辅助、绘图、写作体验到笔记格式规范等多个核心场景。

公式与数学编辑：通过 Latex Suite 和 Completr，用户可以快速、直观地输入复杂的 LaTeX 公式。
AI 智能辅助：Smart Composer 提供了强大的 AI 对话、上下文引用和自动化编辑功能，类似于 Copilot，并能通过 RAG 和 MCP 连接外部知识。
可视化与绘图：Excalidraw 将功能强大的绘图工具深度集成到 Obsidian 中，支持创建示意图、概念图，并能与笔记进行双向链接和内容嵌入。
专注写作体验：Typewriter Scroll 让编辑行始终居中，Easy Typing 优化文本格式和符号编辑，共同营造流畅的写作环境。
编辑便利性：Editing Toolbar 提供了类似 Word 的图形化工具栏，方便进行格式调整。
内容规范化：Linter 可以自动格式化 Markdown 笔记，确保样式统一和整洁。
媒体与内容处理：KaTeX to MathJax 方便粘贴 AI 生成的公式，Media Extended 则增强了视频笔记功能，支持对 YouTube 和 Bilibili 视频做笔记。

总而言之，合理搭配这些插件，可以将 Obsidian 从一个优秀的笔记工具，进一步定制成高度个性化、功能全面且效率倍增的“个人知识管理系统”和“创作中心”。

以上总结是在测试 YOLO 插件的基本能力，从使用上来说，这个插件比Smart Composer 更容易上手，但需要注意的是在 YOLO 插件会和Smart Composer 插件冲突，使用时需要先把Smart Composer 关掉。

基础Markdown与HTML教程

Fri, 17 Oct 2025 15:02:36 GMT

本文主要介绍一些适用于本网站写作常用的基础语法与格式。如果想要系统学习Markdown语法，可以去下列网站学习，一些最基础的用法，这里就不再赘述。

Markdown 教程

描述： Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。

来源： 菜鸟教程

<div class="not-prose w-full my-12 bg-[#0b0c15] border border-gray-800 rounded-lg overflow-hidden relative shadow-2xl group select-none"> <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-600 via-purple-600 to-blue-600 opacity-50"></div> <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-5 mix-blend-overlay pointer-events-none"></div> <div class="flex items-center justify-between px-6 py-3 border-b border-gray-800 bg-[#121420]"> <div class="flex items-center gap-3"> <div class="flex gap-1"><div class="w-1.5 h-1.5 rounded-full bg-red-500"></div><div class="w-1.5 h-1.5 rounded-full bg-yellow-500"></div><div class="w-1.5 h-1.5 rounded-full bg-green-500"></div></div> <span class="text-xs font-mono text-blue-400 tracking-[0.2em] font-bold">NAVIGATION_PROTOCOL</span> </div> <span class="text-[10px] text-gray-600 font-mono">SYS.READY</span> </div> <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-gray-800"> <div class="p-6 hover:bg-white/5 transition-colors duration-300 relative group/col"> <div class="absolute top-0 left-0 w-1 h-0 bg-blue-500 transition-all duration-300 group-hover/col:h-full"></div> <a href="#github-仓库卡片" class="block mb-6 group/link"> <h3 class="text-lg font-bold text-white mb-1 flex items-center gap-2 group-hover/link:text-blue-400 transition-colors"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> GitHub 仓库 </h3> <div class="text-xs text-gray-500">Repository & Source</div> </a> <div class="space-y-3"> <a href="#警告/提示框" class="block text-sm font-bold text-gray-300 hover:text-white mb-2">⚠ 警告/提示框</a> <ul class="space-y-2 border-l border-gray-700 pl-4 ml-1"> <li><a href="#基本语法" class="block text-xs text-gray-500 hover:text-blue-400 hover:translate-x-1 transition-all">基本语法</a></li> <li><a href="#自定义标题" class="block text-xs text-gray-500 hover:text-blue-400 hover:translate-x-1 transition-all">自定义标题</a></li> <li><a href="#github-语法" class="block text-xs text-gray-500 hover:text-blue-400 hover:translate-x-1 transition-all">GitHub 语法</a></li> <li><a href="#隐藏内容" class="block text-xs text-gray-500 hover:text-blue-400 hover:translate-x-1 transition-all">隐藏内容</a></li> </ul> </div> </div> <div class="p-6 hover:bg-white/5 transition-colors duration-300 relative group/col"> <div class="absolute top-0 left-0 w-1 h-0 bg-purple-500 transition-all duration-300 group-hover/col:h-full"></div> <a href="#mermaid-绘图示例" class="block mb-4"> <h3 class="text-lg font-bold text-white mb-1 group-hover/col:text-purple-400 transition-colors">Mermaid 绘图</h3> <div class="text-xs text-gray-500">Diagrams & Charts</div> </a> <div class="grid grid-cols-2 gap-2"> <a href="#流程图示例" class="p-2 bg-[#1a1d2d] rounded border border-gray-700 hover:border-purple-500/50 hover:bg-purple-500/10 transition-all group/item"> <div class="text-xs font-bold text-gray-300 group-hover/item:text-white">流程图</div> <div class="text-[10px] text-gray-600 group-hover/item:text-purple-400">Flowchart</div> </a> <a href="#时序图示例" class="p-2 bg-[#1a1d2d] rounded border border-gray-700 hover:border-purple-500/50 hover:bg-purple-500/10 transition-all group/item"> <div class="text-xs font-bold text-gray-300 group-hover/item:text-white">时序图</div> <div class="text-[10px] text-gray-600 group-hover/item:text-purple-400">Sequence</div> </a> <a href="#甘特图示例" class="p-2 bg-[#1a1d2d] rounded border border-gray-700 hover:border-purple-500/50 hover:bg-purple-500/10 transition-all group/item"> <div class="text-xs font-bold text-gray-300 group-hover/item:text-white">甘特图</div> <div class="text-[10px] text-gray-600 group-hover/item:text-purple-400">Gantt</div> </a> <a href="#类图示例" class="p-2 bg-[#1a1d2d] rounded border border-gray-700 hover:border-purple-500/50 hover:bg-purple-500/10 transition-all group/item"> <div class="text-xs font-bold text-gray-300 group-hover/item:text-white">类图</div> <div class="text-[10px] text-gray-600 group-hover/item:text-purple-400">Class</div> </a> <a href="#状态图示例" class="p-2 bg-[#1a1d2d] rounded border border-gray-700 hover:border-purple-500/50 hover:bg-purple-500/10 transition-all group/item"> <div class="text-xs font-bold text-gray-300 group-hover/item:text-white">状态图</div> <div class="text-[10px] text-gray-600 group-hover/item:text-purple-400">State</div> </a> <a href="#饼图示例" class="p-2 bg-[#1a1d2d] rounded border border-gray-700 hover:border-purple-500/50 hover:bg-purple-500/10 transition-all group/item"> <div class="text-xs font-bold text-gray-300 group-hover/item:text-white">饼图</div> <div class="text-[10px] text-gray-600 group-hover/item:text-purple-400">Pie</div> </a> </div> </div> <div class="p-6 hover:bg-white/5 transition-colors duration-300 relative group/col"> <div class="absolute top-0 left-0 w-1 h-0 bg-green-500 transition-all duration-300 group-hover/col:h-full"></div> <a href="#嵌入视频" class="block mb-4"> <h3 class="text-lg font-bold text-white mb-1 group-hover/col:text-green-400 transition-colors">嵌入视频</h3> <div class="text-xs text-gray-500">Multimedia Integration</div> </a> <ul class="space-y-3"> <li> <a href="#示例代码结构概览" class="flex items-center justify-between group/item"> <span class="text-sm text-gray-400 group-hover/item:text-white transition-colors">代码结构</span> <span class="text-[10px] font-mono text-gray-600 border border-gray-700 px-1 rounded group-hover/item:border-green-500/50 group-hover/item:text-green-500">STRUCT</span> </a> </li> <li> <a href="#youtube-嵌入代码解释" class="flex items-center justify-between group/item"> <span class="text-sm text-gray-400 group-hover/item:text-white transition-colors">YouTube</span> <span class="text-[10px] font-mono text-gray-600 border border-gray-700 px-1 rounded group-hover/item:border-red-500/50 group-hover/item:text-red-500">YT</span> </a> </li> <li> <a href="#bilibili-嵌入代码解释" class="flex items-center justify-between group/item"> <span class="text-sm text-gray-400 group-hover/item:text-white transition-colors">Bilibili</span> <span class="text-[10px] font-mono text-gray-600 border border-gray-700 px-1 rounded group-hover/item:border-pink-500/50 group-hover/item:text-pink-400">BILI</span> </a> </li> </ul> </div> </div> </div>

GitHub 仓库卡片

这里可以添加链接到 GitHub 仓库的动态卡片，在页面加载时，仓库信息会从 GitHub API 中拉取。

::github{repo="AbabCat927/AbabCat927.github.io"}

使用代码 ::github{repo="AbabCat927/AbabCat927.github.io"} 创建一个 GitHub 仓库卡片。

::github{repo="AbabCat927/AbabCat927.github.io"}

警告/提示框

支持以下类型的警告/提示框：note tip important warning caution

:::note

这里可以添加便条信息。

:::

:::tip

这里可以添加提示信息。

:::

:::important

这里可以添加重要信息。

:::

:::warning

这里可以添加警告信息。

:::

:::caution

这里可以添加提醒信息。

:::

基本语法

:::note
这里填写内容。
:::

自定义标题

警告/提示框的标题可以自定义。

:::note[自定义标题]

这是一个带有自定义标题的 note。

:::

:::note[自定义标题]
这是一个带有自定义标题的 note。
:::

GitHub 语法

[!TIP]

这里同样支持 GitHub 语法。

> [!NOTE]
> 这里支持 GitHub 语法。

> [!TIP]
> 这里同样支持 GitHub 语法。

隐藏内容

这里可以向文本中添加隐藏内容。该文本也同样支持 Markdown 语法。

你能看到后面一句吗，:spoiler[被隐藏了 114514]!

Markdown

你能看到后面一句吗，:spoiler[被隐藏了 **114514**]!

Mermaid 绘图示例

要使用 Mermaid，只需在代码块中指定 mermaid 语言，Mermaid 会自动将这些描述转换为精美的可视化图表。

流程图示例

graph TD
    A[开始] --> B{条件检查}
    B -->|是| C[处理步骤 1]
    B -->|否| D[处理步骤 2]
    C --> E[子流程]
    D --> E
    subgraph E [子流程详情]
        E1[子步骤 1] --> E2[子步骤 2]
        E2 --> E3[子步骤 3]
    end
    E --> F{另一个决策}
    F -->|选项 1| G[结果 1]
    F -->|选项 2| H[结果 2]
    F -->|选项 3| I[结果 3]
    G --> J[结束]
    H --> J
    I --> J

时序图示例

时序图显示了对象之间随时间变化的交互。

sequenceDiagram
    participant 用户
    participant Web应用
    participant 服务器
    participant 数据库

    用户->>Web应用: 提交登录请求
    Web应用->>服务器: 发送认证请求
    服务器->>数据库: 查询用户凭证
    数据库-->>服务器: 返回用户数据
    服务器-->>Web应用: 返回认证结果
    
    alt 认证成功
        Web应用->>用户: 显示欢迎页面
        Web应用->>服务器: 请求用户数据
        服务器->>数据库: 获取用户偏好设置
        数据库-->>服务器: 返回偏好设置
        服务器-->>Web应用: 返回用户数据
        Web应用->>用户: 加载个性化界面
    else 认证失败
        Web应用->>用户: 显示错误信息
        Web应用->>用户: 提示重新输入
    end

甘特图示例

甘特图非常适合显示项目日程和时间线。

gantt
    title 网站开发项目时间表
    dateFormat  YYYY-MM-DD
    axisFormat  %m/%d
    
    section 设计阶段
    需求分析          :a1, 2023-10-01, 7d
    UI 设计           :a2, after a1, 10d
    原型创建          :a3, after a2, 5d
    
    section 开发阶段
    前端开发          :b1, 2023-10-20, 15d
    后端开发          :b2, after a2, 18d
    数据库设计        :b3, after a1, 12d
    
    section 测试阶段
    单元测试          :c1, after b1, 8d
    集成测试          :c2, after b2, 10d
    用户验收测试      :c3, after c2, 7d
    
    section 部署阶段
    生产环境部署      :d1, after c3, 3d
    正式上线          :milestone, after d1, 0d

类图示例

类图显示了系统的静态结构，包括类、属性、方法以及它们之间的关系。

classDiagram
    class 用户 {
        +String 用户名
        +String 密码
        +String 邮箱
        +Boolean 是否激活
        +登录()
        +登出()
        +更新个人资料()
    }
    
    class 文章 {
        +String 标题
        +String 内容
        +Date 发布日期
        +Boolean 是否发布
        +发布()
        +编辑()
        +删除()
    }
    
    class 评论 {
        +String 内容
        +Date 评论日期
        +添加评论()
        +删除评论()
    }
    
    class 分类 {
        +String 名称
        +String 描述
        +添加文章()
        +移除文章()
    }
    
    用户 "1" -- "*" 文章 : 撰写
    用户 "1" -- "*" 评论 : 发表
    文章 "1" -- "*" 评论 : 包含
    文章 "*" -- "1" 分类 : 属于

状态图示例

状态图显示了对象在其生命周期中所经历的状态序列。

stateDiagram-v2
    [*] --> 草稿
    
    草稿 --> 审核中 : 提交
    审核中 --> 草稿 : 拒绝
    审核中 --> 已批准 : 批准
    已批准 --> 已发布 : 发布
    已发布 --> 已归档 : 归档
    已发布 --> 草稿 : 撤回
    
    state 已发布 {
        [*] --> 可见
        可见 --> 隐藏 : 暂时隐藏
        隐藏 --> 可见 : 恢复
        可见 --> [*]
        隐藏 --> [*]
    }
    
    已归档 --> [*]

饼图示例

饼图是显示比例和百分比数据的理想选择。

pie title 网站流量来源分析
    "搜索引擎" : 45.6
    "直接访问" : 30.1
    "社交媒体" : 15.3
    "引荐链接" : 6.4
    "其他来源" : 2.6

嵌入视频

<iframe>（Inline Frame，内联框架）是 HTML 中用于在一个网页中嵌入另一个网页的元素。视频平台正是通过这个标签来嵌入他们的播放器。

示例代码结构概览

以下是嵌入代码的基本结构：

<iframe 
    width="宽度设置" 
    height="高度设置" 
    src="视频播放器链接" 
    title="框架标题" 
    frameborder="边框设置" 
    allow="权限设置" 
    allowfullscreen
></iframe>

YouTube 嵌入代码解释

下面是一段典型的 YouTube 嵌入代码及其属性解释：

<iframe 
    width="100%" 
    height="468" 
    src="https://www.youtube.com/embed/C-CYwNz3z8w" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    allowfullscreen
></iframe>

属性	含义
`width="100%"`	播放器宽度占网页容器的 100%，通常用于响应式布局。
`height="468"`	播放器的高度固定为 468 像素。
`src="..."`	嵌入内容的 URL。它是 YouTube 视频播放器的服务链接。
`title="..."`	框架的标题，用于 SEO 和可访问性。
`frameborder="0"`	设置框架边框为 0，即无边框。
`allow="..."`	权限设置，允许播放器使用浏览器的一些功能，如自动播放（`autoplay`）、全屏（`picture-in-picture`）等。
`allowfullscreen`	允许用户将视频切换到全屏模式。

</iframe>

Bilibili 嵌入代码解释

Bilibili 的嵌入代码格式略有不同，但原理相似：

<iframe 
    width="100%" 
    height="468" 
    src="//player.bilibili.com/player.html?bvid=BV1JThqzwEGq&p=1&autoplay=0" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    allowfullscreen="true" 
    &autoplay=0 
></iframe>

属性	含义
`src="..."`	播放器链接，`bvid` 后跟着的是视频 ID，`&autoplay=0` 表示不自动播放。
`scrolling="no"`	禁用框架的滚动条。
`border="0"`, `frameborder="no"`, `framespacing="0"`	兼容性设置，用于确保无边框显示。
`allowfullscreen="true"`	允许全屏播放。

</iframe>