🎨上次(2019 年 6 月初)因为重装 Windows 系统的缘故,需要重新部署本地的环境并与 Github 的仓库进行连接,因为当时正处于期末复习阶段,于是为了省事直接选择备份博客文章后全部重新部署本地环境,而且更换了 Hexo 主题的版本,第一次(2019 年 4 月底)安装 Hexo 的时候使用的貌似是 5.X 的版本,
2020.11 新增
修改行高
source\css\_variables\base.styl
修改宽度
themes\next\source\css\_variabes\pisces.styl
在当时魔改的过程中发现该版本无法完美添加代码复制的按钮,于是在第二次部署的时候特意更换了 7.1.1 版本的,测试代码复制按钮通过以后就开始魔改其他的配置了。直到前不久… 我刚刚发现… 一个问题… 对于强迫症患者来说是一个致命的问题 —— 分类页面的格式变成了这样子😑

于是我百方求助,有人建议我修改 CSS 样式,但是因为对 CSS 不够熟悉,也是无从下手……😵
在尝试了一个上午的时间不更换版本修复这个 bug 无果,下午我果断调整方向,直接选择更换主题版本。令人惊喜的是,更换版本到 6.6.0 以后竟然完美解决了这个问题。😎果然还是那句话,重装解决 99% 的问题。
以下记录这次更换版本后的各种魔改操作,以便日后复查
[x] 1.HEXO 版本更换成最新的,避免各种功能不兼容问题(代码复制按钮等)。
添加代码复制按钮
在主题配置文件中启用 copy_button
即可
1 | copy_button: |
修改文章内超链接样式
定位到 themes/next/source/css/_custom/custom.styl
添加以下代码
1 | .post-body p a { |
修改阅读全文按钮样式
定位到 themes/next/source/css/_custom/custom.styl
添加以下代码
1 | .post-button { |
修改主题页面布局为圆角
在 /themes/next/source/css/_variables
处找到 custom.styl
添加如下代码(以 Gemini
风格为例):
1 | // Variables of Gemini scheme |
引用块样式修改
定位到 themes\next\source\css\ _custom\ _custom.styl
添加如下代码:
1 | //引用块样式 |
引用块设置换行
定位到 themes\next\source\css\_common\scaffolding\base.styl
,找到 blockquote
样式,进行如下修改:
1 | blockquote { |
设置头像边框为圆形框 & 鼠标悬停头像旋转
定位到 themes\next\source\css\_common\components\sidebar\sidebar-author.styl
,作如下修改
1 | .site-author-image { |
首页添加 Github 标签
定位到 themes\next\layout\layout.swig
,在 <div class="headband"></div>
下方添加对应颜色的代码
黑色:
1 | <a href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style> |
绿色:
1 | <a href="https://your-url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style> |
文章永久链接
使用如下命令安装 hexo-abbrlink
插件:
1 | sudo npm install hexo-abbrlink --save |
在站点配置文件下进行如下修改:
1 | url: https://pwner.cn |
文章内页二级分类样式逻辑优化
定位到 themes\next\layout\_macro\post.swig
,文件里有
1 | {% if post.categories and post.categories.length and theme.post_meta.categories %} |
这一段就是相应的代码
可以看出来
1 | <span class="post-meta-item-icon"> |
这一部分是分类的小图标
1 | <span itemprop="about" itemscope itemtype="http://schema.org/Thing"> |
这一部分是生成链接
1 | {% if cat_length > 1 and loop.index !== cat_length %} |
这一部分就是产生分隔符号 (如果多余一个分类并且当前循环不是最后一个)
1 | __('symbol.comma') |
这个就是 “,” 把它修改成即可
1 | {{ ">" }} |
即可。
使用使用压缩博文页面,优化访问速度
在站点根目录下安装 hexo-neat
1 | npm install hexo-neat --save |
为站点配置文件添加相关配置,添加如下内容到站点配置文件_config.yml
的末尾就可以。
1 | # hexo-neat |
此处因为笔者的不问博文开启了加密,所以为了避免出现 bug,就选择不压缩 JS 文件,当然如果你想压缩 JS 文件,也可以通过配置参数将其开启。
压缩前的页面代码包含很多空行
压缩后的网页代码

文章添加置顶和加精功能
笔者是通过安装第三方插件来实现文章的置顶功能的,当然也可以通过修改文件配置来实现(参考:解决 Hexo 博客文章置顶问题),但是会比直接使用插件略显繁琐。
执行以下命令安装插件
1 | $ npm uninstall hexo-generator-index --save |
在需要置顶的文章的 Front-matter
中加上 top: true
或者 top: 任意数字
,例如:
1 | title: 漫步者TWS1蓝牙耳机开箱 |
其中,top
的值越大,文章排序越靠前。
到这里,已经实现了文章排序显示的问题。当然,为了更直观地表达该文章是置顶的,还需要给文章添加 “置顶” 的标签。
打开 /themes/next/layout/_macro/
目录下的 post.swig
文件,在 <div class="post-meta">
的第一个 <span>
标签下,插入如下代码:
1 | {% if post.top %} |
同理,可以设置精华文章标签的添加:
1、在 /themes/next/layout/_macro/
路径,找到 post.swig
,在前文置顶
功能后边,加上如下代码:
1 | {% if post.essential%} |
2、在 themes/next/source/css/_custom/custom.styl
中,增加如下样式:
1 | .jingping{ |
3、在需要设置精华的文章 Front-matter
中,加入如下代码
1 |
到此就完成了精华文章的设置。
添加最近文章列表
首先在主题配置文件添加以下关键字
1 | recent_posts: |
侧栏
在 next/layout/_macro/sidebar.swig
中的 if theme.links
对应的 endif
后面。
1 | {% if theme.recent_posts.enable and theme.recent_posts.sidebar %} |
搜索结果处添加
找到路径 H:\hexo\themes\hexo-theme-next\layout\_partials\search
下 localsearch.swig
文件
把 `` 修改成以下内容(这里显示 15 篇)
1 | <div id="local-search-result"> |
文章尾部添加
把代码加在 H:\hexo\themes\hexo-theme-next\layout\_macro\post.swig
里的相应位置(我加在 tags 后)
1 | {% if not is_index and theme.recent_posts.enable and theme.recent_posts.post %} |
其他
可尝试将 -date
改为 -update
常见的音乐的两种语法
使用 HTML 直接添加网易云音乐
1 | <div id="music163player"> |
Hexo 专用写法
1 | {% aplayer "送别" "李叔同" "https://resource.pwner.cn/music/songbie.mp3" "https://s2.ax1x.com/2019/09/13/nrrMUU.png" "autoplay" %} |
PDF 插入的语法
1 | {% pdf https://www.pwner.cn/123.pdf %} |
侧边栏目录设置成自动全部展开
themes/next/source/css/_common/components/sidebar/sidebar-toc.styl
,修改
1 | .post-toc .nav .nav-child { display: none; } |
为
1 | .post-toc .nav .nav-child { display: block; } |
其他修改记录:
[x] 添加友链页面
[x] 添加本地搜索插件
[x] 侧边栏头像设置成圆形(6.7.0 默认为圆形头像)并开启光标悬停转动
[x] 侧边栏添加 Github/E-mail 按钮
[x] 添加站点地图和 RSS
[x] 底部文字修改,添加建站计时,添加站点统计
[x] 文章地址切换成永久链接,以利于搜索引擎抓取
[x] 页面压缩优化,改善访问体验
[x] 单击图片放大功能 Fancybox 插件(2.0)
[x] 显示浏览进度并显示在左侧边栏
[x] 添加打赏二维码
[x] SEO 优化(包括站点 Notfollow 设置)
[x] 添加 Valine 评论系统
[x] 优化了 SEO 设置:①主题配置文件添加了 baidu_site_verification
②开启主题配置文件中的 disable_baidu_tranformation
③主题配置文件开启 index_with_subtitle
④主题配置文件开启 exturl
(会导致自定义的超链文字样式失效)
[x] 开启了数学公式渲染:①主题配置文件中启用:math: enable: true
②根据提示,默认配置是需要在文章的 Front Matter
中启用设置才能正常渲染的。为了尽可能确保设置的可靠性,建议不开启全局。③如果图方便,建议在 post 模板中的 Front Matter
添加 mathjax: true
设置项,防止今后使用其渲染公式时忘记设置。
[x] 添加了通知功能,可以在主题配置文件中进行通知内容的配置
[x] 将文章侧边目录设置成自动全部展开