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

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

* 此贴仅进行主题的教学需要了解怎么部署点[[Hexo 博客完整部署与 Git 管理指南]]

🎨 Hexo NexT 主题进阶定制指南#

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

1
hexo clean
2
hexo generate
3
hexo deploy

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

页面与菜单配置#

添加 “关于” 页面#

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

1. 新建页面：

   PRTCL // BASH

   1
   hexo new page "about"

   COPY

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

   PRTCL // YAML

   1
   menu:
   2
     home: /
   3
     archives: /archives || archive
   4
     tags: /tags || tags
   5
     about: /about || user # 去掉注释

   COPY

强制 HTTPS#

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

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

文章管理与布局#

草稿布局定制#

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

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

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

  PRTCL // MARKDOWN

  1
  ---
  2
  title: {{ title }}
  3
  tags:
  4
  categories:
  5
  description:
  6
  date: {{ date }}
  7
  ---

  COPY

广义布局定制#

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

• 示例：

  PRTCL // BASH

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

  COPY

文章截断设置#

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

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

   PRTCL // YAML

   1
   excerpt_description: true

   COPY

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

   PRTCL // MARKDOWN

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

   COPY

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

文章增强功能#

相关文章推荐#

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

1. 安装插件：

   PRTCL // BASH

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

   COPY

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

   PRTCL // YAML

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

   COPY

博客文章搜索 ( 本地搜索 )#

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

1. 安装插件：

   PRTCL // BASH

   1
   npm install hexo-generator-searchdb --save

   COPY

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

   PRTCL // YAML

   1
   search:
   2
     path: search.xml
   3
     field: post
   4
     format: html
   5
     limit: 10000

   COPY

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

   PRTCL // YAML

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

   COPY

专题系列组织#

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

1. 新建专题页：

   PRTCL // BASH

   1
   hexo new page series

   COPY

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

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

   PRTCL // MARKDOWN

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

   COPY

网站优化与美化#

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

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

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

  PRTCL // HTML

  1
  <div class="powered-by">
  2
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  3
    <i class="fa fa-user-md"></i>
  4
    <span id="busuanzi_container_site_uv">
  5
      本站访客数:<span id="busuanzi_value_site_uv"></span>
  6
    </span>
  7
    <span class="post-meta-divider">|</span>
  8
    <span id="busuanzi_container_site_pv">
  9
      本站访问量 <span id="busuanzi_value_site_pv"></span>
  10
    </span>
  11
  </div>

  COPY

显示浏览进度条#

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

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

  PRTCL // YAML

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

  COPY

站点地图 (SEO 优化 )#

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

1. 安装插件：

   PRTCL // BASH

   1
   npm install hexo-generator-sitemap --save

   COPY

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

   PRTCL // YAML

   1
   # Extensions
   2
   plugins: hexo-generator-sitemap

   COPY

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

   PRTCL // YAML

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

   COPY

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

相册页面#

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

1. 新建相册页：

   PRTCL // BASH

   1
   hexo new page photos

   COPY

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

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

   PRTCL // MARKDOWN

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

   COPY

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

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 样式，例如：

     PRTCL // CSS

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

     COPY

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

作者：EchoWang

小红书：汪多多是只猫

B 站：汪多多是只猫

公众号：汪多多是只猫

博客：https://blog.echospace.top