Hexo Next7主题优化

Words 4246Read Time≈ 11 min
2026-2-11
cover
type
Post
status
Published
date
Jul 1, 2019 09:00
slug
summary
Hexo NexT7 主题从零到美的完整优化指南。涵盖基础配置、四种 Scheme 布局切换、导航菜单与侧边栏定制、标签/分类/关于页面创建、进度条与打赏功能、Mac 风格代码块美化、超链接样式调整、本地搜索集成、六大评论系统（Disqus/Gitalk/livere/Valine/畅言）对比与配置、图片懒加载优化、Live2D 看板娘（基础版+升级版）部署，以及文章隐藏技巧。一篇搞定博客颜值升级。
tags
Hexo
category
Development
icon
password
wordCount
2007

前言

如果你刚装好 Hexo + NexT 主题，打开浏览器一看——白底黑字，朴素得像一份期末论文。别慌，这篇文章就是你的"美颜滤镜"。我们将从基础配置出发，一路杀到评论系统、Live2D 看板娘，把你的博客从"能看"升级到"好看"。
📋
本文覆盖内容：Hexo 基本配置 → NexT 模式与导航 → 侧边栏与社交 → 标签/分类/关于页面 → 进度条 → 打赏 → Logo → 样式美化 → 本地搜索 → 评论系统对比 → 图片懒加载 → Live2D 看板娘 → 隐藏文章

实验环境

  • Windows10
  • nodejs@12.15.0
  • npm@6.134
  • Git~
  • NexT@7.7.2

Hexo基本配置

Hexo 的世界里有两份 _config.yml，一份住在站点根目录（我们叫它 Hexo 配置文件），另一份藏在主题目录 theme/ 下（我们叫它 主题配置文件）。前者管 Hexo 本身，后者管主题长相。后面我们会频繁提到这两位，请牢记它们的名字。
⚠️
新手必读：YAML 配置项的冒号后面必须跟一个空格，比如 theme: next。漏掉这个空格，Hexo 会直接报错给你看，毫不留情。
修改Hexo配置文件

NexT模式

NexT 提供了四种布局方案，就像给博客换衣服一样简单——改一个字段就行：
Scheme
风格
适合场景
Muse
黑白主调，大量留白
极简主义者
Mist
Muse 的紧凑版，整洁单栏
内容密集型博客
Pisces
双栏，清新小巧
喜欢侧边栏的同学
Gemini
双栏，类似 Pisces
Pisces 的"双胞胎"

导航菜单

NexT 默认只给你留了 Home 和 Archives 两个菜单——就像新租的房子只有客厅和卧室，其他房间得自己开门。
打开主题配置文件，找到 menu 字段，把你需要的菜单取消注释即可。格式解读（以 archives: /archives/ || archive 为例）：
  • || 左边：路径，对应 themes/next/languages/zh-Hans.yml 中的标题
  • || 右边：图标名，来自 Font Awesome，NexT 的所有图标都由它提供
notion image

侧边栏

侧边栏是博客的"万能口袋"——头像、社交链接、RSS、目录全塞这里。打开主题配置文件，找到 sidebar 字段：

社交图标

让读者知道在哪里能找到你。打开主题配置文件，找到 social 字段。格式和菜单一样，|| 左边是链接，右边是 Font Awesome 图标名：

RSS设置

RSS 比较特别——它不是一个配置项，而是一个需要事先生成的文件。 1. 安装rss插件
  1. 在Hexo配置文件下修改:
    1. 修改 主题配置文件 的添加social图标
        2. 在 social: 下添加以上代码。在 Next v7.7.2 中将 RSS 设置在了 follow_me: 下，这个是在文章的结尾处显示 RSS，而且占地比较大，所以我不太喜欢这个位置，还是喜欢以前的 social: 这个位置，这样会显示在侧边栏里，而且占地很小。
    1. 重新编译代码 hexo g会在博客目录下生成一个public文件夹

      设置头像

      1. 把头像图片放入themes/next/source/images下
      1. 修改主题配置文件的avatar

      添加页面

      标签页、分类页、关于页面

      光开了菜单还不够——你只是挂了门牌号，房间还没建。如果此时点击菜单，你会收到一个冷冰冰的回应：
      notion image
      1. 打开命令行，运行下面命令
       
      以上三个命令会在博客根目录下的source文件夹下生成about，tags，categories文件夹
       
      1. 修改上述文件夹下的index.md
          2. about:
          tags:
          categories:
      1. 重新运行服务器就可以看见效果了
          2. notion image
          标签配置可以修改主题配置文件

      进度条

      页面加载时顶部跑一条进度条，虽然不会让网站变快，但至少让等待变得优雅。
      1. 安装插件，进入到 NexT 主题文件夹
        1. 修改主题配置文件的pace
            2. 可以更换theme来看不同的效果
            notion image

        打赏功能

        写博客不求回报？那是不可能的（开个玩笑）。NexT 内置了打赏功能，只需要两张收款二维码就能开启。
        notion image
        1. 生成付款二维码 - 微信：打开微信-点击右上角加号-收付款-QR Code收款-储存收款码 - 阿里：打开支付宝-首页-收钱-存储图片 2. 将二维码图片放进yoursite，微信二维码图片改名为wechatpay.png，阿里二维码图片改名为/images/alipay.png 3. 修改主题配置文件，看看你需要哪个打赏就把哪个注释打开就行了

          修改站点logo

          1. 将logo图片放进yoursite
          1. 修改主题配置文件 修改 small和medium

            修改超链接样式

            修改blog_variables.style

            修改代码块样式

            作为技术博客，代码块的颜值直接决定读者的"停留时长"。NexT 集成了 tomorrow-theme 样式，但我们可以更进一步——换成 Mac 风格，左上角三个彩色圆点，瞬间高级感拉满。
            • 默认代码块
            notion image
            • Mac风格代码块
            notion image
            修改主题配置文件

            开启本地搜索

            文章多了以后，没有搜索功能的博客就像没有目录的图书馆。NexT 支持本地搜索，数据存在本地，不依赖第三方服务，速度飞快。
            notion image
            1. 安装插件，进入博客根目录下
              1. 主题配置文件 找到Local Search

                添加评论系统

                一个没有评论区的博客，就像一场没有观众的脱口秀。NexT 7 支持多种评论系统，各有千秋——先看一张对比表帮你做决策：
                评论系统
                免费
                所在国家
                界面评分(满分5)
                速度
                Disqus
                是
                美国
                4
                很慢
                Disqusjs
                是
                美国
                3
                很慢
                Gitalk
                是
                中国/美国
                4
                快
                livere
                是
                韩国
                5
                一般
                valine
                是
                中国
                3
                很快
                畅言
                是
                中国
                5
                很快

                Disqus & Disqusjs

                Disqus是一家第三方社会化评论系统，主要为网站主提供评论托管服务。 - 支持多种国外社交账号 - 轻量 - 支持点赞 - 支持分享
                Disqus在国内被墙了，不建议选择这个 - 界面效果: 1. Disqus
                notion image
                1. Disqusjs
                    2. notion image
                • 配置教程:

                Gitalk#

                gitalk是github提供的评论插件，数据存放在GitHub Application里，使用前需要注册一个GitHub Application app - 快速 - 支持MarkDown - 支持分享功能
                界面效果:
                notion image

                livere

                livere(来必力)是一个韩国的评论服务网站，使用社交网站账户登录，免去注册过程 - 支持十多种社交账号 - 支持图片表情 - 点赞功能 - 速度较慢
                • 界面效果:
                    • notion image
                • 配置过程
                    1. 首先注册一个来比力的账号
                        2. notion image
                    1. 注册邮箱收到一条验证邮件，填入里面的验证代码，点确定
                        2. notion image
                    1. 然后登录，登录后会自动回到首页
                    1. 点击安装
                        2. notion image
                    1. 博主安装的是免费版的，点击现在安装
                        2. notion image
                    1. 填入博客地址与博客名，选择个人网站(企业网站需要收费)
                        2. notion image
                    1. 来比力就会生成一段代码，我们只要里面的uuid
                        2. notion image
                    1. 修改主题配置文件 把comments的active改成livere
                        2. livere_uid改成你的uuid
                    1. 保存后重启博客，就可以看见评论了
                        2. notion image
                  优化 即使netx使用了的来比力脚本来自cdn，但是加载经常抽风，将脚本修改成本地加载能提高速度
                  1. 复制来比力脚本到yourblog，文件命名为embed.dist.js
                  1. 修改yourblog_third-party.swig
                    1. 将cdn地址换成/js/embed.dist.js
                      1. 清理缓存重启服务器

                        valine

                         
                        Valine 诞生于2017年8月7日，是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。数据存放在LeanCloud下，使用前需要注册LeanCloud app - 快速 - Emoji 😉 - 支持MarkDown - 轻量易用(~15kb gzipped) - 文章阅读量统计 v1.2.0+
                        界面效果:
                        notion image
                        • 配置过程
                            1. 先注册一个leancloud账号
                                2. notion image
                            1. 然后进行实名认证
                                2. notion image
                                notion image
                            1. 进行邮箱认证
                                2. notion image
                            1. 认证完成后，点击开发者信息，点击创建应用
                                2. notion image
                                notion image
                            1. 创建好应用后，点击应用设置按钮
                                2. notion image
                            1. 点击应用key，拿到appid和appkey
                                2. notion image
                            1. 修改主题配置文件 把comments的active改成livere
                                2. 修改valine配置，把appid和appkey填入
                            1. 保存后重启博客，就可以看见评论了
                                2. notion image

                        畅言

                        畅言云评(原搜狐畅言)是一个简单而强大的社会化评论及聚合平台。用户可以直接用自己的社会化网络账户在第三方网站发表评论,并且一键评论同步至社交网络。 - 快速 - 多彩皮肤 - 单点登录 - 支持图片表情 - 评分功能 - 需要备案！
                        界面效果:
                        notion image

                        图片懒加载

                        图片多的文章，一次性全加载等于让读者的浏览器跑马拉松。懒加载让图片"按需出场"——滚到哪加载到哪，体验丝滑。 1. 修改主题配置文件
                        1. 清除缓存与重启服务器
                          ⚠️
                          注意：懒加载只针对文章内的图片。文章封面图请使用 URL 链接，相对路径会导致显示失败。

                          Live2D

                          技术博客太冷冰冰？给它养一只虚拟宠物吧。Live2D 看板娘可以让你的博客瞬间从"严肃技术文档"变成"有温度的个人空间"。

                          基础版

                          1. 首先安装插件，命令行运行
                          1. 安装你想要的模型 比如我想要一只猫，找到这只猫的插件名字live2d-widget-model-tororo
                              2. notion image
                          1. 修改主题配置文件或者Hexo配置文件 加入下面代码
                            1. 重启服务后猫猫就会出现在博客里

                              升级版

                              live2d升级版，能玩游戏，换衣服，对话，更换人物
                              notion image
                              1. 下载 Live2D Widget
                                  2. 解压到本地博客目录的 themes/next/source 下，修改文件夹名为 live2d-widget，修改项目中的 autoload.js 文件，如下：
                                  改为
                              1. 在/themes/next/layout/_layout.swig的header中,新增如下内容
                                1. 修改主题配置文件或者Hexo配置文件
                                  1. 想修改看板娘大小、位置、格式、文本内容等，可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。

                                  隐藏指定文章

                                  有些文章写了一半不想发？或者只想给特定人看？hexo-hide-posts 插件让你可以隐藏指定文章，在首页、归档、标签页统统不显示，但直接访问链接仍然可达。
                                  1. 安装插件
                                    1. 修改next主题配置文件 主题配置文件添加下面代码
                                      1. 文章添加hidden属性

                                        写在最后

                                        到这里，你的 Hexo + NexT 博客应该已经从"期末论文"进化成了一个像模像样的个人站点。我们回顾一下这趟旅程：
                                        ✅
                                        全文回顾
                                        • ✅ 基础配置：两份 _config.yml 分工明确，YAML 空格不能忘
                                        • ✅ 外观定制：四种 Scheme 布局 + 导航菜单 + 侧边栏社交信息
                                        • ✅ 功能增强：进度条、打赏、本地搜索、图片懒加载
                                        • ✅ 样式美化：Mac 风格代码块 + 超链接配色 + 站点 Logo
                                        • ✅ 互动体验：六大评论系统对比与配置
                                        • ✅ 趣味彩蛋：Live2D 看板娘 + 隐藏文章
                                        NexT 主题的可配置项远不止这些，官方文档里还有大量宝藏等你去挖。记住，折腾博客的过程本身就是乐趣——每一次 hexo clean && hexo g && hexo s 都是一次小惊喜。
                                        Happy Hacking! 🚀

                                        参考资料

                                        Loading...