这是一个非常详尽的 Hexo Next 主题进阶配置指南。
本文记录了对 Hexo + NexT 博客进行定制和美化的进阶技巧。

作者：多多是只猫 (https://blog.echospace.top)_
原作者：木鸟杂记 （https://www.qtmuniao.com）

🎨 Hexo NexT 主题进阶定制指南

提示： 每次修改配置后，请在本地运行

hexo clean 
hexo generate 
hexo deploy

(http://localhost:4000/) 预览效果。NexT 主题的配置修改建议在站点根目录的 _config.next.yml 中进行。

一、页面与菜单配置

1. 添加 “关于” 页面

通过两步完成“关于”页面的创建和菜单显示。

1. 新建页面：

   hexo new page "about"
   

2. 菜单显示： 在主题配置文件（_config.next.yml）中，取消 menu 下 about 的注释。

   # _config.next.yml
   menu:
     home: /
     archives: /archives || archive
     tags: /tags || tags
     about: /about || user # 去掉注释
   

2. 强制 HTTPS

如果您的博客托管在 GitHub Pages 上，强制 HTTPS 访问非常简单：

• 操作： 登录 GitHub，进入您的博客仓库的 Settings，勾选 Enforce HTTPS 即可。

二、文章管理与布局

1. 草稿布局定制

为避免未完成的文章被发布，使用 draft 布局，并定制其模板以包含日期。

• 新建草稿： hexo new draft "blog title"

• 修改模板： 找到 scaffolds/draft.md，添加 date 字段。
  
  ```Markdown

  title: Hexo Next主题配置指南
  tags:
  categories:
  description:
  date: 1761801696000

2. 广义布局定制

您可以在 scaffolds 文件夹中定制任意多个布局模板（例如 test.md），用于不同类型的文章。

• 示例：

  # 复制 page 模板并重命名为 test.md
  cp scaffolds/page.md scaffolds/test.md 
  
  # 使用新模板创建文章
  hexo new test 'test'
  # 文章会被创建在 source/_posts/ 中，并使用 test 模板
  

3. 文章截断设置

控制首页文章显示长度，避免全文显示。

1. 启用截断功能： 在主题配置文件（_config.next.yml）中设置：

   excerpt_description: true
   

2. 在文章中插入标记： 在 Markdown 文件中您希望截断的位置插入 ``。

   这是文章摘要部分。
   这是文章的剩余部分，只在文章页显示。
   

   （或者，您可以在文章的 Front-matter 中直接使用 description 字段作为摘要。）

三、文章增强功能

1. 相关文章推荐

通过插件实现文章详情页的相关文章推荐。

1. 安装插件：

   npm install hexo-related-popular-posts --save
   

2. 配置 NexT 主题： 在主题配置文件（_config.next.yml）中启用并设置推荐参数：

   related_posts:
     enable: true
     title: 猜你喜欢 # 自定义标题
     display_in_home: false # 不在首页显示
     params:
       maxCount: 5 # 最多推荐5篇
       PPMixingRate: 0.4 # 火热文章与相关文章的推荐比率
   

2. 博客文章搜索 (本地搜索)

安装插件，实现站内文章的本地搜索功能。

1. 安装插件：

   npm install hexo-generator-searchdb --save
   

2. 配置站点文件 (_config.yml)： 在博客根目录的 _config.yml 中添加搜索配置：

   search:
     path: search.xml
     field: post
     format: html
     limit: 10000
   

3. 配置主题文件 (_config.next.yml)： 启用本地搜索功能：

   local_search:
     enable: true
     trigger: manual # 或 auto
     top_n_per_article: 1
     # ...其他配置...
   

3. 专题系列组织

通过创建自定义标签页，并手动组织站内文章链接，实现专题系列。

1. 新建专题页：

   hexo new page series
   

2. 配置菜单： 在主题配置 (_config.next.yml) 和语言文件 (themes/next/languages/zh-CN.yml) 中添加 series: /series/ || reorder 和 series: 专题。

3. 编辑专题内容： 编辑 source/series/index.md，使用 Hexo 语法引用站内文章：

   ## 专题系列目录
   {% post_link post-name 链接标题 %}
   

四、网站优化与美化

1. 站内访客量统计 (不蒜子)

在页脚添加简单的访客数和访问量统计。

• 添加代码： 找到主题的页脚模板文件（通常是 themes/next/layout/_partials/footer.swig 或类似的模板），添加以下代码：

  <div class="powered-by">
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <i class="fa fa-user-md"></i>
    <span id="busuanzi_container_site_uv">
      本站访客数:<span id="busuanzi_value_site_uv"></span>
    </span>
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_pv">
      本站访问量<span id="busuanzi_value_site_pv"></span>
    </span>
  </div>
  

2. 显示浏览进度条

在页面顶部或底部显示阅读进度条。

• 配置主题文件 (_config.next.yml)：

  reading_progress:
    enable: true
    position: top # 或 bottom
    color: "#37c6c0"
    height: 2px
  

3. 站点地图 (SEO 优化)

为搜索引擎提供网站结构图，利于 SEO。

1. 安装插件：

   npm install hexo-generator-sitemap --save
   

2. Hexo 配置 (_config.yml)： 在站点配置文件中添加插件：

   # Extensions
   plugins: hexo-generator-sitemap
   

3. NexT 配置 (_config.next.yml)： 在菜单中添加站点地图链接：

   menu: 
     # ...其他菜单项
     sitemap: /sitemap.xml || sitemap
   

   （生成后，您可以通过 www.yoursite.com/sitemap.xml 访问，并提交给 Google Search Console。）

4. 相册页面

利用 NexT 的 Tag Plugin 创建相册展示页面。

1. 新建相册页：

   hexo new page photos
   

   并在语言文件 (zh-CN.yml) 中配置菜单中文名称 photos: 相册。

2. 编辑图片： 在 source/photos/index.md 中使用 group picture 标签组织图片：

   ## 某某地方玩
   {% gp 6-3 %}
         ![](/images/pic1.png)
         ![](/images/pic2.png)
         ...
       {% endgp %}
   

   （6-3 表示该组有 6 张图片，每行最多排 3 张。）

5. Google AdSense 广告

如果您已通过 Google AdSense 审核：

1. 限制尺寸和位置： 建议只选择展示广告，并限制尺寸（如 280px * 100px），将其放在侧边栏底部。

2. 自定义样式：

   • 在 themes/next/source/css/_my/ 目录下新建 mycss.styl。

   • 在 themes/next/source/css/main.styl 中引用：@import "_my/mycss";

   • 在 mycss.styl 中添加广告的 CSS 样式，例如：

     .sidebar-ads {
       border-top: 1px dotted #ccc;
       width: 100%;
       height: 100px;
       padding-top: 15px;
       margin-bottom: 5px;
     }
     

（多多是只猫：https://blog.echospace.top）。

关于我

全平台同名”汪多多是只猫”，专注分享实用开源工具，让你的数字生活更自由！

关注我，发现更多旧物改造的乐趣与技巧！