Hexo-Matery导航栏Logo不显示修复教程

目录

• 问题现象
• 原因分析
• 修复步骤
  • 第一步：修改导航栏 Logo 模板
  • 第二步：修改移动端侧边栏 Logo 模板
  • 第三步：修改主题配置中的 Logo 路径
  • 第四步：把图片复制到站点目录
• 验证效果
• 注意事项

问题现象

运行 hexo server 后访问 http://localhost:4000/，导航栏左侧 class="waves-effect waves-light" 里的 Logo 图片不显示，浏览器控制台看到图片请求 404 或一直加载失败。

F12 查看元素会发现 Logo 的 img 标签长这样：

<img src="https://cdn.jsdelivr.net/gh/你的用户名/你的仓库@1.34/medias/images/xxx.jpg" class="logo-img" alt="LOGO">

图片地址指向了 jsDelivr 的 GitHub CDN，而不是本地文件。

原因分析

Matery 主题的 Logo 模板在渲染时，会在 theme.logo 路径前面拼接 theme.jsDelivr.url 前缀：

<% if (theme.logo !== undefined && theme.logo.length > 0) { %>
<img src="<%- theme.jsDelivr.url %><%- url_for(theme.logo) %>" class="logo-img" alt="LOGO">
<% } %>

这样只要 themes/hexo-theme-matery/_config.yml 里配置了 jsDelivr.url，Logo 就会走 CDN。一旦出现以下任一情况，Logo 就会 404 不显示：

1. jsDelivr 在国内被墙或节点失效（本次实测请求直接超时）；
2. 远端 GitHub 仓库对应的 tag 版本里没有这张图片；
3. 仓库版本号（如 @1.34）与实际部署内容不一致。

而图片本体其实一直躺在本地 themes/hexo-theme-matery/source/medias/ 目录里，根本没有必要走 CDN。

修复步骤

第一步：修改导航栏 Logo 模板

编辑 themes/hexo-theme-matery/layout/_partial/header.ejs，找到第 8 行左右，去掉 theme.jsDelivr.url 前缀：

修改前：

<img src="<%- theme.jsDelivr.url %><%- url_for(theme.logo) %>" class="logo-img" alt="LOGO">

修改后：

<img src="<%- url_for(theme.logo) %>" class="logo-img" alt="LOGO">

第二步：修改移动端侧边栏 Logo 模板

编辑 themes/hexo-theme-matery/layout/_partial/mobile-nav.ejs，找到第 9 行左右，做同样的修改：

修改前：

<img src="<%- theme.jsDelivr.url %><%- url_for(theme.logo) %>" class="logo-img circle responsive-img">

修改后：

<img src="<%- url_for(theme.logo) %>" class="logo-img circle responsive-img">

第三步：修改主题配置中的 Logo 路径

编辑 themes/hexo-theme-matery/_config.yml，找到约第 179 行的 logo 配置项，改成你想要的图片路径（相对 source 目录的站点绝对路径）：

# Configure website favicon and LOGO
# 配置网站favicon和网站LOGO
favicon: /medias/banner/zhan.jpg #网址logo显示
logo: /medias/banner/tai.png #博客logo手机页面

这里我把 Logo 换成了 themes/hexo-theme-matery/source/medias/banner/tai.png，对应站点路径就是 /medias/banner/tai.png。

第四步：把图片复制到站点目录

因为站点根目录下已经生成了 medias/ 文件夹，为了保证不重新生成也能直接访问到图片，把主题里的图片复制过去：

cp themes/hexo-theme-matery/source/medias/banner/tai.png medias/banner/tai.png

提示：Hexo 生成时会自动把主题 source 下的静态文件合并进站点，所以执行 hexo clean && hexo g 后这步是自动完成的；手动复制只是让当前已生成的静态页面立即可用。

验证效果

重启 Hexo 服务：

hexo clean && hexo server

刷新 http://localhost:4000/，导航栏左上角应能正常显示 Logo。F12 检查 img 标签，src 应该变成了本地路径：

<img src="/medias/banner/tai.png" class="logo-img" alt="LOGO">

注意事项

1. jsDelivr 前缀在主题里被大量使用：导航 Logo、轮播图、头像等多处模板都拼接了 theme.jsDelivr.url。如果线上还有其他图片/资源加载不出来，多半是同一个原因，可以按需逐个去掉前缀，或把 jsDelivr.url 换成国内可访问的 CDN（如 https://fastly.jsdelivr.net/gh/...）。
2. Logo 图片不要太大：这次使用的 tai.png 有 1.9MB，导航栏 Logo 显示区域一般只有 40px 高，建议用 TinyPNG 等工具压缩到 100KB 以内，否则会明显拖慢首屏加载。
3. favicon 和 Logo 是两个配置：favicon 是浏览器标签页小图标，logo 是导航栏显示的图片，按需分别修改。