blog-debug

博客的图片又坏了，我的博客是hexo + github pages，经常出现一个问题就是访问http://192.168.126.128:40080/2026/01/25/30058.html#Space-Bridge 。我的博客图片又坏了，选中图片右键，在新标签页中打开，就直接下载了一个文件，文件名为五位数字，没有后缀名。

并且有多张图片的情况下，博客只会重复显示某一张图片。

这种现象通常不是因为图片文件本身“坏了”，而是由于 Hexo 的资源路由冲突或 Nginx/Web 服务器的 MIME 类型解析错误导致的。

由于你提到的 URL 包含 192.168... 这种局域网 IP 和非标准端口 40080，这说明你可能在本地环境或私有服务器上进行测试。

以下是针对你描述的两个核心症状（下载无后缀文件、图片重复显示）的排查方案：

1. 为什么会“自动下载无后缀文件”？

当你右键新标签打开图片却触发下载，且文件名变成数字（如 30058）且无后缀时，通常是因为 URL 路径解析错误，浏览器把文章的 HTML 路径误当成了图片资源。

  • 路径冲突 (Asset Folder)： 检查你的 _config.yml 中是否开启了 post_asset_folder: true。

  • 如果开启了，你的图片应该放在与文章同名的文件夹内。

  • 如果你引用的路径是 ![描述](30058/image.jpg)，但在生成时出现了层级混乱，浏览器可能会直接请求 .../30058 这个路径。由于 Web 服务器不知道这是一个文件夹还是文件，且没有正确的 Content-Type 响应头，浏览器会默认将其作为二进制流下载。

  • MIME 类型缺失： 如果你使用了 Nginx 转发（看端口号很像），请确保 Nginx 配置中包含 include mime.types;。如果服务器不知道 .webp 或 .png 是图片，它就会强制浏览器下载。

2. 为什么多张图片会“重复显示同一张”？

这通常是 Hexo 插件冲突 或 Lazyload（懒加载）脚本挂了 导致的：

  • 懒加载插件（最常见原因）： 很多 Hexo 主题自带图片懒加载。如果脚本执行出错，或者你安装了类似 hexo-lazyload-image 的插件，它会将所有图片的 src 替换为占位图（比如一张透明图或 Loading 图）。

  • 排查： 查看网页源代码（Ctrl+U），看 <img> 标签的 src 属性是否真的指向不同的路径。如果 src 都一样，而真实的路径在 data-src 里，说明懒加载脚本没生效。

  • Hexo 渲染缓存：

  • 尝试执行：hexo clean && hexo g。

  • 有时候 public 文件夹里的旧资源没有刷新，会导致索引错乱。

3. 针对性解决方案

方案 A：规范图片引用方式

建议安装 hexo-asset-image 并在文章中使用相对路径，避免 Hexo 在处理子目录（如 /2026/01/25/）时找不到图。

注意： 鉴于你在打磨关于 whale3070 的剧本和自传，图片的稳定性非常重要。如果后续要上 Arweave（永存），建议现在就开始使用 图床 或 绝对路径。

方案 B：检查 Nginx 配置（针对 40080 端口）

如果你是通过 Nginx 托管 public 目录，检查配置文件：

1
2
3
4
5
6
7
8
9
10
11
server {
    listen 40080;
    server_name localhost;
    location / {
        root /your/hexo/public;
        index index.html;
        # 确保尝试寻找文件本身，而不是直接抛出下载
        try_files $uri $uri/ =404;
    }
}

方案 C：检查你的“金库协议”相关插件

既然你在开发 金库协议 1.0（一书一码、NFT 领取），请检查你的 JS 脚本是否对页面上的所有 <img> 标签做了全局劫持。如果脚本逻辑有误（例如在获取 Arweave 数据时覆盖了 DOM），会导致所有图片显示异常。

快速排查步骤建议：

  1. F12 检查： 按下 F12 看 Console 是否有大量的 404 或者 Broken Pipe 报错。
  2. 禁用懒加载： 在主题配置文件 _config.yml 中暂时关闭 lazyload。
  3. 检查后缀： 确认你的图片文件名是否有特殊字符或空格，这在 GitHub Pages 环境下经常导致解析失败。

你要不要把 _config.yml 里关于 URL 和 Assets 的配置发给我看看？我也许能一眼看出那个“五位数字”是怎么被误认成下载链接的。

查看_config.yml

从你的 _config.yml 来看，病根已经找到了。这不仅仅是图片路径的问题，而是由于你使用了 abbrlink（生成五位数字链接）、post_asset_folder 以及 hexo-blog-encrypt（加密插件） 三者结合在一起产生的“化学反应”。

核心诊断

  1. 五位数字下载的真相：
    你配置了 permalink: :year/:month/:day/:abbrlink.html。当你访问 .../30058.html 时，Hexo 认为这是一个页面。
    由于你开启了 post_asset_folder: true，Hexo 会为每篇文章创建一个同名文件夹。但因为你用了 abbrlink，文章的 URL 变成了数字，而存放图片的文件夹名可能还是原来的中文标题或日期标题。路径不匹配导致浏览器在请求图片时，由于路由解析模糊，误将文章的“无后缀”索引文件当作资源下载了。
  2. 重复显示同一张图：
    你在 _config.yml 中配置了：
1
2
3
4
marked:
  prependRoot: true
  postAsset: true

配合 fluid 主题的懒加载功能，如果路径解析稍微偏离（比如相对路径多了一层 /），渲染引擎会因为找不到具体文件而 fallback 到第一张图，或者因为脚本冲突（尤其是加密插件 blog_encrypt）导致 DOM 替换错误。

解决方案建议

第一步：修正永久链接与资源文件夹的逻辑

既然你追求“一书一码”和“预判时代底牌”的严谨性，建议将资源引用方式固定。

  • 修改配置： 确保 relative_link 保持为 false（你已经这样做了，这很对）。
  • 安装适配插件： abbrlink 和 post_asset_folder 同时使用时，必须确保图片引用的路径在生成后依然指向 public/2026/01/25/30058/xxx.jpg。
  • 建议在文章中引用图片时，不要带文件夹前缀。
  • 错误写法： ![](文章名/image.png)
  • 正确写法： ![](image.png)（Hexo 会自动去同名 asset 文件夹找）。

第二步：处理 hexo-blog-encrypt 的冲突

你配置了 vendor_base: /，这解决了 CDN 访问问题，但加密插件会劫持文章内容。

  • 如果你的图片在加密区域内，加密插件会将图片地址转化为 Base64 或加密字符串。如果插件版本与 fluid 主题的懒加载冲突，就会出现“全站同一张图”的幻觉。
  • 尝试： 在主题配置 themes/fluid/_config.yml 中，搜索 lazyload 并将其 关闭 (enable: false) 看看图片是否恢复正常。

第三步：Nginx 端的“暴力”修复

既然你在用 40080 端口，这说明你有服务器控制权。浏览器下载无后缀文件是因为 Content-Type 不对。
在你的 Nginx server 块中加入这个逻辑，强制让浏览器识别 Hexo 的资源：

1
2
3
4
5
6
7
8
location ~* \.(jpg|jpeg|png|gif|webp|ico|svg)$ {
    root /your/public/path;
    expires 30d;
    add_header Cache-Control "public";
    # 强制尝试寻找文件，防止被 abbrlink 的路由误导
    try_files $uri =404;
}

针对你的“终焉大盘系统”与书稿

你提到正在写关于“预判”的书，且排除了所有错误选项。目前你的 Hexo 配置中，“错误选项”是 URL 结构与物理路径的脱节。

建议动作：

  1. 清理缓存： 每次修改 _config.yml 后，必须执行 hexo clean && hexo g。
  2. 检查 public 目录： 打开你本地的 public/2026/01/25/30058/ 文件夹，看看图片文件是否真的在这个文件夹里。如果文件夹名字不是 30058 而是原来的文章名，说明 abbrlink 没能同步修改资源文件夹名。

主题配置 themes/fluid/_config.yml

根据你提供的 themes/fluid/_config.yml 文件，结合你描述的 “右键下载无后缀五位数字文件” 和 “多图显示重复” 的症状，可以确定问题出在插件冲突与资源路径解析上。

以下是精准修复方案：

1. 彻底关闭图片懒加载（解决“图片重复”核心）

在你的配置文件第 237-241 行：

1
2
3
4
lazyload:
  enable: false # 你这里已经设为 false 了
  onlypost: false

深度排查： 虽然你配置了 false，但 Hexo 缓存可能依然保留了旧的渲染逻辑。

  • 动作： 执行 hexo clean 然后重新生成。
  • 原因： 如果懒加载脚本在 hexo-blog-encrypt（加密插件）之后执行，它可能无法正确获取加密块内的真实图片地址，导致所有 <img> 标签的 src 被指向了同一个占位符（Placeholder），从而显示重复。

2. 关闭图片点击放大功能（解决“下载文件”冲突）

在配置文件第 394-395 行：

1
2
3
image_zoom:
  enable: false # 你这里也是 false

关键点： 既然你已经关闭了 image_zoom，按理说点击图片不应有特殊行为。但因为你使用了 abbrlink 生成了类似 30058.html 的五位数字路径，浏览器可能混淆了“资源文件夹”和“静态页面”。

3. 排查“下载五位数字文件”的根源

你提到的“选中图片右键新标签页打开，直接下载了一个五位数字文件”，这是典型的 MIME Type 丢失 或 路径重定向错误。

  • 场景还原： 你的文章链接是 .../2026/01/25/30058.html。如果你在文章里引用的图片路径是 30058/my-pic.png，而由于某种配置错误，浏览器请求了 .../2026/01/25/30058（去掉了 .html），服务器找不到这个文件，可能返回了文章的二进制流，浏览器识别不出格式，就直接以文件名 30058 下载了。
  • 解决方案： 1. 检查你的 Hexo 主站点 _config.yml（不是主题里的），确认 post_asset_folder: true。
  1. 确保你没有手动创建一个叫 30058 的文件夹。
  2. 禁用加密插件测试： 暂时关闭 hexo-blog-encrypt。这个插件会改变 HTML 结构，经常导致资源路径在相对路径和绝对路径之间跳变。

4. 针对你“金库协议”与“终焉大盘”系统的建议

既然你的系统涉及 NFT 领取 和 Arweave 资料，图片的展示稳定性是“信任感”的来源。

  • 建议使用绝对路径： 在 Fluid 主题中，建议将图片放在 source/img/ 下，引用时使用 /img/xxx.png。
  • 修正 static_prefix： 你的配置最后一部分（718行起）使用了大量的 cdn.staticfile.org。如果你的局域网（192.168.x.x）环境无法流畅访问这些 CDN，会导致主题 JS 加载失败，进而导致图片渲染逻辑崩溃。

建议操作步骤：

  1. 清理并强制更新：
1
2
3
hexo clean
hexo g

  1. 检查加密状态： 如果你的文章是加密的，尝试去掉加密，看图片是否恢复。如果恢复了，说明是 hexo-blog-encrypt 与 Fluid 的 postAsset 渲染逻辑冲突。
  2. 检查 Nginx 响应头： 既然你在用 40080 端口，请确保 Nginx 没有把 .html 后缀强制去掉，否则会和图片文件夹路径产生毁灭性的冲突。

下一步：
你的图片现在是在加密块里面吗？如果是，我可以帮你调一下加密插件的 silent 模式配置，避免它污染图片路径。