Next 8.10 升级日志

发表于 2022-05-13 更新于 2023-10-23 分类于网站配置本文字数： 5.2k 阅读时长 ≈ 19 分钟

2022年5月我将博客主题Next升级到了8.10版本，然后这一年多的时间里一直有些小的改动，索性就把这篇博文作为我自己的更新日志了，目前我的Next主题已经更新到了8.18.2

升级log

Next主题的官网又双叒叕更换了，谷歌搜出来靠前的都是老版本的网站，害得我找了半天。建议挂梯子访问，直接访问巨慢。

Next8.0 官方文档传送门

8.0版本又整合了不少东西进去，比起老版本配置起来更方便了。因为网站源文件前一阵子被我折腾崩了，所以这次又是重新手动配置（😭）。不过文档内容很全，基本上跟着文档走一遍就差不多了。这次更新的内容有：

更换了custom files的格式，从swig更换成了njk，语法没啥变化
代码块主题更换为github-dark与github-dark-dimmed
图片查看工具从mediumzoom切换为fancybox
开启pangu，自动在汉字和单词之间添加空格
开启quicklink预读取，提高加载速度
字体更换为思源宋体与Fira Code
图片全部转移到图床 sm.ms
必应搜索收录
新的看板娘
自定义鼠标样式
移动端渐变背景
自定义滚动条
自定义代码块样式
关于页面增加Github贡献墙
内容不满一屏footer也置底
归档标签目录单独分页控制
文章结束提醒
加密/隐藏文章
~~部分js、css文件通过JSDelivr分发~~
船新的404页面
自定义博文模板
网站崩溃欺骗更新

JSDelivr

得嘞，JSDelivr被墙了，这一段不用看了，GFW你坏事做尽。

原来扔给JSDelivr的文件放到了./source/里面

这次升级把一些自定义的js和css文件放到了JSDelivr来加速，JSDelivr是一个CDN服务商，可以为Github、npm等提供镜像加速，Next主题自身的一些文件也是使用JSDelivr来加速的。

JSDelivr 官网传送门

使用方法

Github配置

在GitHub创建一个仓库，然后clone到本地
把自己要用的文件丢进去，然后push到GitHub
回到仓库，添加release
自定义一个版本号tag，如下图所示
Publish release发布

tag

JSDelivr

引用规则为https://cdn.jsdelivr.net/gh/GitHub用户名/GitHub仓库名@发布的tag/文件路径，例如下面我的文件cursor.css的引用路径就是https://cdn.jsdelivr.net/gh/Siriusq/CDN@6.0/cursor.min.css，其中

Siriusq是我的用户名
CDN是我的仓库名
6.0是我的tag，这里也可以用latest代替，表示使用最新版
cursor.min.css是我的文件路径，其中.min表示请求JSDelivr进行压缩，不想压缩可以去掉

举个栗子🌰

然后把链接粘贴到对应位置即可

字体更换

默认的字体在高分屏上有点糊，就换成了很多博客都在用思源宋体，代码字体也换成了Fira Code与思源宋体。Next现在支持按优先级选用字体，如果排在前面的字体中找不到需要的字符，就会使用下一个字体，如果所有指定字体都没有需要的字符，则会使用默认字体，在Windows下为微软雅黑。更多字体可以去Google Fonts找

Google Fonts 传送门

打开Next主题的配置文件_config.next.yml，定位到# Font Settings，更改下面几个选项，Noto Serif SC即思源宋体

_config.next.yml

font:
  enable: true

  global:
    external: true
    family: Noto Serif SC
    size:

  codes:
    external: true
    family: Fira Code, Noto Serif SC

图床

图床我选用的是sm.ms，免费版有5GB容量，而且它在国内的访问速度和稳定性都不错，足够我的博客使用了。单次上传图片上限是10张，支持jpg、png、gif等常用格式，并且在上传后会自动生成Markdown使用的图片链接。

SM.MS 官网传送门

必应搜索收录

首先前往Bing Webmasters，登录并添加自己的网站。

Bing Webmasters 传送门

添加网站

如果以前已经在谷歌收录的话可以选择直接从Google Search Console导入，但是需要授权，我懒得搞，就还是选择了手动添加hhh。手动添加有三种方式，我选择的是第二种，向网页添加HTML Meta标签，这也是Next官方内置的方法。

验证方式

复制content后面的内容，然后打开Next主题的配置文件，找到bing_site_verification，粘贴到后面并保存，然后hexo cl && hexo g -d一键三连，再返回Bing Webmasters点击验证就大功告成了。

自定义鼠标样式

鼠标样式我是按照akilar的文章配置的，特此感谢

在./node_modules/hexo-theme-next/source/css/中新建文件夹cursor
将收集到的鼠标样式文件扔到新建的文件夹中
打开_config.next.yml
定位到到custom_file_path:
取消style: source/_data/styles.styl的注释

打开./source/_data/styles.styl，粘贴并修改下面的代码

styles.styl

/* 鼠标样式 */
body,
html{
  cursor: url('/css/cursor/arrow.cur'),auto !important;
}
/* 悬停图片时的鼠标指针 */
img{
  cursor: url('/css/cursor/btn.cur'),auto !important;
}
/* 选择链接标签时的鼠标指针 */
a:hover{
    cursor: url('/css/cursor/link.cur'),auto;
}
/* 选中输入框时的鼠标指针 */
input:hover{
    cursor: url('/css/cursor/input.cur'),auto;
}
/* 悬停按钮时的鼠标指针 */
button:hover{
    cursor: url('/css/cursor/btn.cur'),auto;
}
/* 悬停列表标签时的鼠标指针 */
i:hover{
    cursor: url('/css/cursor/link.cur'),auto;
}
/* 悬停页脚链接标签（例如页脚徽标）时的鼠标指针 */
#footer-wrap a:hover{
      cursor: url('/css/cursor/hf.cur'),auto;
}
/* 悬停页码时的鼠标指针 */
#pagination .page-number:hover{
      cursor: url('/css/cursor/i.cur'),auto;
}
/* 悬停菜单栏时的鼠标指针 */
#nav .site-page:hover{
      cursor: url('/css/cursor/hf.cur'),auto;
}

目前只支持.cur格式的文件，如果下载的是.ani格式的文件可以用CursorWorkshop修改，有免费试用版，快乐白嫖

移动端渐变背景

背景部分参考了卡尔霍恩的小屋的文章，特此感谢

因为Safari这个笨蛋浏览器不支持background-attachment:fixed和background-size:cover的同时使用，所以用原来的方法设置的背景图片会被竖向拉长到和整个网页一样长。而且考虑到移动端的加载速度比较慢，背景图片对加载速度影响很大，所以干脆把图片改成了CSS渐变背景。

同鼠标样式一样，背景也是在./source/_data/styles.styl中配置的，代码如下

styles.styl

body {
    background:url(https://s2.loli.net/2022/05/05/rfhuq7tG9jbB1wc.jpg);//图片路径
    background-repeat: no-repeat;//是否重复平铺
    background-attachment: fixed;//是否随着网页上下滚动而滚动，fixed为固定
    background-position: 50% 50%;//图片位置
    background-size: cover;//图片展示大小
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    opacity: 0.95;//透明度
    footer > div > div {
        color:#727272;//底部文字颜色
    }
}

@media only screen and (max-width: 990px) {
  body {
    background-image: linear-gradient(to bottom, #1F1C2C 0%, #928DAB 50%, #D7DDE8 100%);//图片路径
    background-repeat: no-repeat;//是否重复平铺
    background-attachment: fixed;
    background-position: 50% 50%;//图片位置
    background-size: cover;//图片展示大小
    -webkit-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    opacity: 0.90;
    footer > div > div {
        color:#727272;//底部文字颜色
    }
  }
}

上半段是原来使用的桌面端配置，下面的是移动端配置，使用@media规则。

@media规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。媒体查询可用于检查许多事情，诸如：
视口的宽度和高度
设备的宽度和高度
方向（手机或平板电脑处于横屏还是竖屏模式？）
分辨率
引自 “CSS @media 规则,” Com.cn. [Online]. Available: https://www.w3school.com.cn/cssref/pr_mediaquery.asp. [Accessed: 21-May-2022].

其中max-width:表示当浏览器窗口小于990px时，将背景调整为线性渐变样式linear-gradient，to bottom表示渐变方向为从上到下，颜色后面的%表示颜色的中止位置，如果只有两种颜色的话可以忽略掉。关于渐变样式的详细配置请参考使用 CSS 渐变。另外渐变样式可以参考uiGradients和oulu两个网站

自定义滚动条

滚动条是按照星空下的YZY 的文章配置的，特此感谢

同上，打开./source/_data/styles.styl，代码如下

styles.styl

/* 滚动条 */
::-webkit-scrollbar-thumb {
  background-color: #7d7d7d;
  border-radius: 3em;
}

::-webkit-scrollbar-track {
  background-color: #333333;
  border-radius: 3em;
}

::-webkit-scrollbar {
  width: 8px;
  height: 15px;
}

你可以使用以下伪元素选择器去修改基于 webkit 的浏览器的滚动条样式：
::-webkit-scrollbar —— 整个滚动条
::-webkit-scrollbar-button —— 滚动条上的按钮（上下箭头）
::-webkit-scrollbar-thumb —— 滚动条上的滚动滑块
::-webkit-scrollbar-track —— 滚动条轨道
::-webkit-scrollbar-track-piece —— 滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner —— 当同时有垂直滚动条和水平滚动条时交汇的部分,通常是浏览器窗口的右下角
::-webkit-resizer —— 出现在某些元素底角的可拖动调整大小的滑块。
引自 :“-webkit-scrollbar,” Mozilla.org. [Online]. Available: https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar. [Accessed: 21-May-2022].

自定义代码块样式

同上，打开./source/_data/styles.styl，代码如下

styles.styl

code {
    color: #ff7f50;
    background: rgba(0, 0, 0, 0.05);
    margin: 2px;
}

figure.highlight {
  .gutter {
    pre {
      background: var(--highlight-background);
    }
  }
  figcaption {
  background: var(--highlight-background);
  color: #c7ecee;
  font-family: Fira Code, Noto Serif SC;
  padding: .1rem;
  margin-left: 5rem;
  margin-right: 1.8rem;
  margin-top: -1.53rem;
  }
}

其中code控制的是单行的代码块样式，figure.highlight控制的是多行代码块的样式，多行代码块调整了行号与标题的背景颜色（调整成了和代码一样的背景）、标题的文字颜色以及位置（移动到了最顶部）。

GitHub贡献墙

GitHub贡献墙使用的是 Github Chart API ，特此感谢

使用方法非常简单，插入下面的代码就完事了

1	<img src="https://ghchart.rshah.org/你的GitHub用户名" alt="Github chart" />

如果想要修改色块颜色的话可以修改为，把6c5ce7替换为想使用的HEX基准色，其他颜色会自动生成，不需要加#

1	<img src="https://ghchart.rshah.org/6c5ce7/你的GitHub用户名" alt="Github chart" />

FancyBox隐藏caption

FancyBox的caption不太美观，所以要消灭它！（其实是隐藏了）
打开./source/_data/styles.styl，代码如下

styles.styl

// 隐藏图片名
.fancybox .image-caption {
	display: none;
}

参考了 smilv 的文章，特此感谢

在标签页和目录页中，当页面的内容不满一屏时，footer会很突兀的跑到页面中间，下面的样式可以让footer始终在底部。
打开./source/_data/styles.styl，代码如下

styles.styl

// footer置底
body,
html {
    height: 100%;
}
.wrapper {
    height: 100%;
}
.main {
    min-height: 100%;
    /* 与.footer的高度对应 */
    padding-bottom: 112px;
    box-sizing: border-box;
}
.footer {
    height: 112px;
    /* 与.footer的高度对应 */
    margin-top: -112px;
}

归档标签目录单独分页控制

打开./config.yml，找到# Pagination，在下面添加下面的代码

./config.yml

# Archive Pagination
archive_generator:
  per_page: 50

# Tag Pagination
tag_generator:
  per_page: 50

# Category Pagination
category_generator:
  per_page: 50

404页面

原来的404页面移动端适配做的不好，就换了个新的

首先打开_config.yml，注意不是next主题的
定位到relative_link:并设置为false
在根目录执行hexo new page 404创建./source/404文件夹
打开生成的index.md文件，在title下面加上这些：
404/index.md
1
2
3
4
type: "404"
permalink: /404
layout: false
comments: false
然后找个顺眼的模板套上就行了，注意缩进不要超过4个空格，会不识别

下面是我的代码

404/index.md

<!DOCTYPE html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
 <title>Sirius - 404 Not Found</title>
 <link rel="stylesheet" href="/css/404font/404fonts.css">
 <link rel="stylesheet" href="/css/404cat.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="text-wrapper">
 <div class="title" data-content="404">
  404
 </div>
 <div class="subtitle">
  诶？页面走丢了喵~
 </div>
 <div class="buttons">
  <a class="button" href="/">回主页看看吧~</a>
 </div>
</div>
<!-- partial -->
  
</body>
</html>

然后是两个css文件

404cat.css 404fonts.css

看板娘

看板娘的配置参考了akilar的文章，特此感谢

前排提醒，看板娘对网站加载速度影响很大喔，但是吧，没有看板娘的网站莫得灵魂🐶

原来使用的看板娘插件是hexo-helper-live2d，但是已经几年没有更新过了，npm安装的时候报了8项风险，于是更换成了张书樵大佬的live2d-widget。

live2d-widget

然后模型调用的API使用了fghrsh大佬的live2d_api。

live2d_api

配置方法

live2d_api配置

把live2d_api项目的压缩包下载到本地，移动到./source/目录下
live2d_api下载
解压后把文件夹重命名为live2d_api
模型文件都在model文件夹中
- 注意每一个模型文件夹内都有index.json文件，用来确定模型信息。从别处下载的模型文件里一般不是这种命名，可能叫做模型名.json或者模型名.model.json，记得修改，不然读取不到模型信息的
- 采用单模型多组皮肤目录结构的模型会出现无法换装的问题，解决方案是调整为同分组多个模型的目录结构。目录结构细节详见README.md
- 调整完目录结构记得修改model_list.json
- model_list.json中的message用于控制模型出场时说的话，与上面模型的顺序一一对应

把live2d-widget项目的压缩包下载到本地，移动到./source/目录下
live2d-widget下载
解压后把文件夹重命名为live2d-widget
打开./source/live2d-widget/autoload.js，修改下列参数
- const live2d_path = "xxxx";，将xxxx修改为/live2d-widget/
- 将initWidget中的cdnPath修改为/live2d_api/
- if (screen.width >= 768)里面可以调整显示看板娘的最小屏幕横向分辨率，这里表示在分辨率小于768的设备上看板娘不会显示
打开waifu.css，修改看板娘配置
- #waifu中的参数可以调整看板娘位置。其中left: 0;表示看板娘显示在屏幕左边，修改为right: 0;则会显示在右侧
- #waifu-tool中的参数可以调整看板娘旁边工具栏样式
- #waifu-tips中的参数可以调整看板娘对话框样式，添加color可以调整字体颜色

引入js

打开source/_data/head.njk，粘贴下面的代码

head.njk

1	<script src="/live2d-widget/autoload.js"></script>

然后hexo s就能去浏览器里调戏自己的看板娘啦~

文章结束提醒

打开_config.next.yml
定位到到custom_file_path:
取消postBodyEnd: source/_data/post-body-end.njk的注释

新建./source/_data/post-body-end.njk，粘贴下面的代码

head.njk

<div>
  {% if not is_index %}
      <div style="text-align:center;color: #ccc;font-size:14px;">
          ---------- 我是有底线哒 <i class="fa fa-dice-d20"></i> 感谢您的阅读 ----------
   </div>
  {% endif %}
</div>

隐藏文章

hexo-hide-posts插件可以实现在博客中隐藏指定的文章，并使它们仅可通过链接访问。当一篇文章被设置为「隐藏」时，它不会出现在任何列表中（包括首页、存档、分类页面、标签页面、Feed、站点地图等），也不会被搜索引擎索引（前提是搜索引擎遵守 noindex 标签）。只有知道文章链接的人才可以访问被隐藏的文章。

hexo-hide-posts

安装

1	npm install hexo-hide-posts --save

使用

在文章的front-matter中添加hidden: true即可隐藏文章，例如

---
title: '我是标题'
hidden: true
---

虽然首页上被隐藏了，但你仍然可以通过https://hexo.test/我是标题/链接访问它，当然这个链接只有你自己知道咯。

使用下面的命令可以列出所有已经隐藏的文章

1	hexo hidden:list

配置

在Hexo的配置文件_config.yml中添加如下配置

_config.yml

# hexo-hide-posts
hide_posts:
  enable: true
  # 可以改成其他你喜欢的名字
  filter: hidden
  # 指定你想要传递隐藏文章的 generator，比如让所有隐藏文章在存档页面可见
  # 常见的 generators 有：index, tag, category, archive, sitemap, feed, etc.
  public_generators: []
  # 为隐藏的文章添加 noindex meta 标签，阻止搜索引擎收录
  noindex: true

加密文章

虽然前面隐藏了文章，但还是不够安全，毕竟有被猜到文章标题的可能，然后就是大型社死现场了~

加密文章可以通过hexo-blog-encrypt插件实现

hexo-blog-encrypt

安装

1	npm install --save hexo-blog-encrypt

使用

在文章的front-matter中添加password: 你的密码即可隐藏文章，password后面的都是选填内容。

---
title: Hello World
tags:
date: 2016-03-30 21:12:21
password: mikemessi
abstract: 有东西被加密了诶.
message: 请输入密码吧.
wrong_pass_message: 错咯错咯，不给看哟.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

全局配置

在Hexo的配置文件_config.yml中添加如下配置，这里是全局配置，就不需要每个加密的文章都设置一遍了。另外插件预设了8款主题，可以在这里设置，预览请到GitHub看

_config.yml

encrypt: # hexo-blog-encrypt
  abstract: 有东西被加密了诶.
  message: 请输入密码吧.
  theme: blink
  wrong_pass_message: 错咯错咯，不给看哟.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

目录bug

插件没有支持next的目录，默认情况下不会显示目录。我试了好久也没能成功，摆烂了。感兴趣的可以参考下面的issue。

How to encrypt TOC under NexT theme

而且据说文章加密后，目录还是能够从html中看到，依旧有泄密风险。如果对加密实在是刚需的话，建议更换原生支持加密的主题，如blinkfox

自定义博文模板

每次执行hexo new命令创建新博文时，总会有一些固定的内容（如lang: zh-CN）需要手动粘贴进去，为了偷懒，我这次直接把这些内容添加到了博文的模板中，这样每次创建新博文时都会自带这些内容。

博文的模板文件是博客根目录下的./scaffolds/post.md，修改完成后是这个样子：

---
title: {{ title }}
date: {{ date }}
lang: zh-cn
tags: []
categories: 
---

<blockquote class="blockquote-center"> </blockquote>

<!-- more -->

{% note warning %}
样式
{% endnote %}

{% grouppicture 6-3 %}
图片组
{% endgrouppicture %}

{% linkgrid %}
名称 | https://siriusq.top | 简介 | /images/link/link.webp
{% endlinkgrid %}

新版崩溃欺骗

提醒：新方法仅支持8.18.0及以后的版本

原来的崩溃欺骗功能需要用到jQuery，而 Next 8.18.0 更新了fancybox 5，彻底移除了对jQuery的依赖，继续使用老版本就需要手动添加jQuery的引用。再加上jQuery对网页加载速度的影响比较大，于是我就借此机会让ChatGPT帮我转换了原来的代码，也移除了对jQuery的依赖。此外，我还添加了根据浏览器主题是亮色或暗色来使用不同的崩溃图标的功能。

同老方法一样，在./source/js中新建crash_cheat.js，向文件中粘贴下面的代码：

crash_cheat.js

var OriginTitle = document.title;
var titleTime;
var crashedIcon;

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    crashedIcon = "/images/crashed-dark.png";
} else {
    crashedIcon = "/images/crashed.png";
}

document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        var icons = document.querySelectorAll("link[rel='icon']");
        for (var i = 0; i < icons.length; i++) {
            icons[i].href = crashedIcon;
        }
        document.title = '╭(°A°`)╮ 页面崩溃啦~';
        clearTimeout(titleTime);
    } else {
        var icons = document.querySelectorAll("link[rel='icon']");
        for (var i = 0; i < icons.length; i++) {
            icons[i].href = "/images/favicon.png";
        }
        document.title = '(ฅ>ω<*ฅ) 诶嘿，又好了~ ' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});

然后在./source/_data/body-end.swig中添加下面的代码：

1 2	<!--崩溃欺骗--> <script type="text/javascript" src="/js/crash_cheat.js"></script>

图标文件需要放在./source/images路径下，可以直接用我做好的图标：

完结撒花~

升级log

JSDelivr

使用方法

Github配置

JSDelivr

字体更换

图床

必应搜索收录

自定义鼠标样式

移动端渐变背景

自定义滚动条

自定义代码块样式

GitHub贡献墙

FancyBox隐藏caption

footer置底

归档标签目录单独分页控制

404页面

看板娘

配置方法

live2d_api配置

live2d-widget配置

引入js

文章结束提醒

隐藏文章

安装

使用

配置

加密文章

安装

使用

全局配置

目录bug

自定义博文模板

新版崩溃欺骗