Real Zhang's Blog

Everything happens for the best

0%

Hello Hexo

发表于 更新于 阅读次数： Valine：

总结一下建站流程以及过程中踩过的坑。

网站基本配置

编辑 _config.yml 文件。
网站配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Site
title: Real Zhang's Blog # 网站主标题
subtitle: Everything happens for the best # 网站副标题
description: A Fish Toucher # 简介
keywords: # 关键词 (搜索用)
author: Real Zhang # 作者名称
language: zh-CN # 语言
timezone: Asia/Shanghai # 时区

# URL
url: https://scxs1388.github.io # 访问的 url

# Writing
highlight: # 代码高亮
  enable: true
  line_number: true
  auto_detect: true

更换 NexT 主题

打开 Console，在 Blog 的根目录执行

1
git clone git@github.com:theme-next/hexo-theme-next.git themes/next

或者到 NexT 主题的 github 仓库下载正式发行的压缩包，解压到 themes/next 目录中。

编辑 _config.yml 文件中的 themes 配置。

1
theme: next

修改 NexT 主题模板

编辑 themes/next/_config.yml 文件中的 scheme 配置。

1
scheme: Gemini

修改亮色/暗色模式

编辑 themes/next/_config.yml 文件中的 darkmode 配置。

1
darkmode: true

网站 Favicon

配置网站的浏览器标签页图标。
编辑 themes/next/_config.yml 文件中的 favicon 配置。可以设置为在线或本地图片，默认本地图片存储目录为 themes/next/source/images。如果选择使用本地图片，在网站部署后的图片存储目录为 images，在编辑配置时需要注意。

Creative Commons

配置网站的CC协议。
编辑 themes/next/_config.yml 文件中的 creative_commons 配置。

1
2
3
4
5
creative_commons:
  license: by-nc-sa ## cc协议
  size: small # 大小
  sidebar: true # 侧边栏显示
  post: true # 文章结尾显示

导航栏/侧边栏 Menu

配置导航栏/侧边栏的栏目和外观。
编辑 themes/next/_config.yml 文件中的 menu 配置。

1
2
3
4
5
6
7
8
9
menu:
  home: / || fa fa-home # 主页
  about: /about/ || fa fa-user # 关于
  tags: /tags/ || fa fa-tags # 文章 tag
  categories: /categories/ || fa fa-th # 文章类别
  archives: /archives/ || fa fa-archive # 文章归档
menu_settings:
  icons: true # 显示icon
  badges: true # 显示相应分类的数量

头像 Avatar

侧边栏添加个人头像。
编辑 themes/next/_config.yml 文件中的 avatar 配置。

1
2
3
4
avatar:
  url: /images/avatar.jpg # 本地图片路径
  rounded: true # 圆形边框
  rotated: false # 光标hover可旋转，不建议

社交账号链接

导航栏/侧边栏添加个人社交账号链接。
编辑 themes/next/_config.yml 文件中的 social 配置。

1
2
3
social:
  GitHub: https://github.com/scxs1388 || fab fa-github
  E-Mail: mailto:scxs1388@gmail.com || fa fa-envelope

Tag icon

为文章底部的每个 Tags 前添加一个 icon。
编辑 themes/next/_config.yml 文件中的 tag_icon 配置。

1
tag_icon: true

Github Banner

设置网站右上角的 Github 标识。

编辑 themes/next/_config.yml 文件中的 github_banner 配置。

1
2
3
4
github_banner:
  enable: false
  permalink: https://github.com/scxs1388
  title: Follow me on GitHub

字体

设置网站的字体。包括文字样式，文字大小，在线字体 host 等。

编辑 themes/next/_config.yml 文件中的 font 配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
font:
  enable: true
  host: https://fonts.font.im
  global: # 全局字体 (指 <body> 内的所有元素)
    external: true # 设为 true 表示启用在线字体 host
    family: Lato
    size: 0.84
  title: # 网站主标题的字体
    external: true
    family: Roboto Slab
    size:
  headings: # 标题字体 (<h1> 到 <h6>)
    external: true
    family: Roboto
    size:
  posts: # 文章字体
    external: true
    family: Roboto
  codes: # 代码块字体
    external: true
    family: Input Mono  # Source Code Pro  # JetBrains Mono

MathJax

启用 MathJax 编写公式。
编辑 themes/next/_config.yml 文件中的 math 配置。

1
2
3
4
5
math:
  mathjax:
    enable: true # 一般用 mathjax 足够了
  katex:
    enable: true # 可以设成 false

Fancybox

查看文章图片时使用 FancyBox 插件。
编辑 themes/next/_config.yml 文件中的 fancybox 配置。

1
fancybox: true

Valine

添加 Valine 评论系统。Valine 是基于 LeanCloud 云服务的前端评论系统，要启用 Valine 需要事先在 LeanCloud 注册并创建一个应用获取 Appid 和 AppKey。
上述步骤完成之后，编辑 themes/next/_config.yml 文件中的 valine 配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
valine:
  enable: true
  appid:  # Your leancloud application appid
  appkey: # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: zh-cn # Language, available values: en, zh-cn
  visitor: true # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP

站内搜索

启用站内搜索需要安装hexo-generator-searchdb 插件。
打开 Console，在 Blog 的根目录执行

1
npm install hexo-generator-searchdb --save

之后编辑 themes/next/_config.yml 文件中的 local_search 配置。

1
2
local_search:
  enable: true

页面加载进度条

启用页面加载时的进度条显示。
编辑 themes/next/_config.yml 文件中的 pace 配置。

1
2
3
pace:
  enable: true
  theme: minimal

注意，有时会出现 pace.min.css 和 pace.min.js 文件缺失的情况。此时需要手动添加这两个文件到 themes/next/source/lib/pace 目录中。

阅读进度条和进度显示

启用阅读进度条和进度显示。
编辑 themes/next/_config.yml 文件中的 back2top 和 reading_progress 配置。

1
2
3
4
5
6
7
8
9
10
back2top:
  enable: true
  sidebar: false
  scrollpercent: true

reading_progress:
  enable: true
  position: top
  color: "#37c6c0"
  height: 3px

更换背景图片

更换网站的背景图片。
编辑 themes/next/source/css/main.styl 文件。添加如下代码：

1
2
3
4
5
6
7
// Customized Background
body {
  background-image: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.85)), url("https://i.loli.net/2021/12/03/AJ3LkghvnEHwzU8.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: right;
}

更改页面元素透明度

为了使得背景图片不被侧边栏和文章页面遮挡，需要修改页面元素透明度。
编辑 themes/next/source/css/main.styl 文件。添加如下代码：

1
2
3
4
5
6
7
.main-inner{
	opacity: 0.75;
}
.header-inner{
	opacity: 0.75;
	z-index: 10;
}

更改内联代码块样式

某些情况下，inline 代码块样式不会随 NexT 主题的亮色/暗色模式的更改而发生变化。此时需要手动调整 inline 代码块 <code> 的样式，这里只调整暗色模式下的代码块样式。

编辑 themes/next/source/css/main.styl 文件。添加如下代码：

1
2
3
4
code {
  background: #2d2d2d;
  color: #ffc5c5;
}

更换滚动条样式

更换右侧滚动条样式。
编辑 themes/next/source/css/main.styl 文件。添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Customized Scrollbar
::-webkit-scrollbar {
  width: 6px;
  height: 9px;
  background-color: #454545;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #454545;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #858585;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #9e9e9e;
}

添加网站建立时间

在页面底部 footer 添加网站建立时间计时器。
编辑 themes/next/layout/_partials/footer.swig 文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{%- if theme.footer.powered %}
  <div class="powered-by">
    {%- set next_site = 'https://theme-next.org' %}
    {%- if theme.scheme !== 'Gemini' %}
      {%- set next_site = 'https://' + theme.scheme | lower + '.theme-next.org' %}
    {%- endif %}
    {{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'}) + ' & ' + next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'})) }}
    <!-- 从这里开始添加代码 -->
    <span class="post-meta-divider">|</span>
    <span id="sitetime" class="post-meta-item"></span>
    <script>
        function siteTime(){
        window.setTimeout("siteTime()", 1000);
        var seconds = 1000;
        var minutes = seconds * 60;
        var hours = minutes * 60;
        var days = hours * 24;
        var years = days * 365;
        var today = new Date();
        var todayYear = today.getFullYear();
        var todayMonth = today.getMonth()+1;
        var todayDate = today.getDate();
        var todayHour = today.getHours();
        var todayMinute = today.getMinutes();
        var todaySecond = today.getSeconds();
        var t1 = Date.UTC(2021,09,01,00,00,00); // 网站建立时间
        var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
        var diff = t2 - t1;
        var diffYears = Math.floor(diff/years);
        var diffDays = Math.floor((diff/days)-diffYears*365);
        var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
        var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
        var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
        document.getElementById("sitetime").innerHTML=" Operated for "+diffYears+" years "+diffDays+" days "+diffHours+" hours "+diffMinutes+" mins "+diffSeconds+" secs";
        }
        siteTime();
    </script>
  </div>
{%- endif %}

使用 SSH 进行部署

Hexo 默认的 git 使用 HTTPS 协议。由于 GitHub 的 HTTPS 443 端口由于网络连接原因经常出现连接超时的情况，因此建议为 GitHub 配置 SSH keys 方便今后部署到 GitHub Pages。
这里省略生成 SSH key、本地配置 SSH config 文件、在 GitHub 配置 SSH key 等步骤，只介绍 Hexo 配置 SSH 的步骤。
启用 SSH 需要安装hexo-deployer-git 插件。打开 Console，在 Blog 的根目录执行

1
npm install hexo-deployer-git --save

之后编辑 _config.yml 文件。

1
2
3
4
deploy:
  type: git # 使用 git 协议
  repo: git@github.com:scxs1388/scxs1388.github.io.git
  branch: page # 默认 main，如不是需要修改

文章隐藏

启用文章隐藏功能可以通过修改文章生成的源代码来实现，为了方便可以安装hexo-hide-posts 插件。
打开 Console，在 Blog 的根目录执行

1
npm install hexo-hide-posts --save

之后编辑 _config.yml 文件，添加：

1
2
3
4
5
6
7
8
9
10
# hexo-hide-posts
hide_posts:
  enable: true
  # Change the filter name to fit your need
  filter: hidden
  # Generators which you want to expose all posts (include hidden ones) to.
  # Common generators: index, tag, category, archive, sitemap, feed, etc.
  public_generators: []
  # Add "noindex" meta tag to prevent hidden posts from being indexed by search engines
  noindex: true

在写文章时，如果想要隐藏文章，在 front-matter 添加 hidden: true 即可。

Live2D

hexo-helper-live2d

打开 Console，在 Blog 的根目录执行

1
npm install hexo-helper-live2d --save

编辑 _config.yml 文件，加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
## Live2d
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: model # 模型名称
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 150
    height: 300
    position: right
    hOffset: 15
    vOffset: -20
  mobile:
    show: true
    scale: 0.5
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.2

hexo-helper-live2d 自带部分公开的 Live2D 模型可供使用，具体可以在 https://github.com/xiazeyu/live2d-widget-models 查看和下载。
hexo-helper-live2d 也支持自定义模型文件。自定义的模型文件需要存放在 Blog 根目录的 live2d_models 目录中，并且也需要修改 _config.yml 配置中相应的模型名称，在生成静态文件时会根据配置进行读取。

  • 优点：安装简单，可在 _config.yml 中直接调整配置
  • 缺点：仅可显示模型，无其它功能

live2d-widget

参考项目：在网页中添加Live2D看板娘
打开 Console，在 Blog 的根目录执行

1
git clone git@github.com:stevenjoezhang/live2d-widget.git themes/next/source/live2d-widget

编辑 themes/next/source/live2d-widget/autoload.js 文件，修改 live2d_path 为部署后静态文件的相对路径：

1
const live2d_path = "/live2d-widget/";

编辑 themes/next/layout/_layout.swig 文件，在 <header> 和 <body> 之间添加如下代码：

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

编辑 themes/next/_config.yml 文件，添加 live2d 配置。

1
2
live2d:
  enable: true
  • 优点：加入了交互文本显示以及随机换装等按钮，使功能更加丰富。
  • 缺点：不支持 moc3、model3、physics3 等高版本的 Live2D 模型文件。

live2d-widget + pixi-live2d-display

参考： GitHub Pull Request
PixiJS 是一个基于 WebGL 的快速、轻量级的 2D 动画渲染引擎。pixi-live2d-display 是为 PixiJS 提供的 Live2D 插件，其支持所有版本的 Live2D 模型。

为了引入 pixi-live2d-display，需要编辑 themes/next/layout/_layout.swig 添加相关文件的 CDN 地址，注意需要添加在 autoload.js 之前：

1
2
3
4
5
6
7
8
<!-- PixiJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.10/pixi.min.js"></script>
<!-- Live2D v2.1 -->
<script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
<!-- Live2D v3 -->
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<!-- pixi-live2d-display -->
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>

参考 Pull Request 对 themes/next/source/live2d-widget/waifu-tips.js 中的相关代码进行修改。

主要的改动有三处：

  1. 添加异步模型加载函数 loadlive2dPixi：
1
2
3
4
5
6
7
8
9
10
11
12
async function loadlive2dPixi(jsonPath) {
	const model = await PIXI.live2d.Live2DModel.from(jsonPath);
	pixiApp.stage.addChild(model);
	const parentWidth = pixiApp.renderer.width;
	const parentHeight = pixiApp.renderer.height;
	// Scale to fit the stage
	const ratio = Math.min(parentWidth / model.width, parentHeight / model.height);
	model.scale.set(ratio, ratio);
	// Align bottom and center horizontally
	model.x = (parentWidth - model.width) / 2;
	model.y = parentHeight - model.height;
}
  1. 修改 Live2D <canvas> 元素相关代码，由 live2d 对象改为 PIXI.Application 对象：
1
2
3
4
5
6
7
// Create PIXI application
const live2dCanvas = document.getElementById('live2d');
pixiApp = new PIXI.Application({
    view: live2dCanvas,
    resizeTo: live2dCanvas,
    transparent: true,
});
  1. 将所有 loadlive2d 函数调用改为 loadlive2dPixi 函数调用。

live2d-widget 默认使用在线的随机 Live2D 模型。如果要使用本地模型，需要修改 themes/next/source/live2d-widget/waifu-tips.js 中的 loadModel 函数：

1
2
3
4
5
6
7
async function loadModel(modelId, modelTexturesId, message) {
    localStorage.setItem("modelId", modelId);
    localStorage.setItem("modelTexturesId", modelTexturesId);
    showMessage(message, 4000, 10);
    loadlive2dPixi(`/live2d-widget/assets/hutaoyao-live2d/hutao.model3.json`); 
    // loadlive2dPixi 函数输入是模型的 model.json / model3.json 路径
    // /live2d-widget/assets 目录可以用来存储模型文件

使用 live2d-widget + pixi-live2d-display 可能会存在隐藏 Live2D canvas 再显示时图像消失的问题。这个问题可以通过修改 themes/next/source/live2d-widget/waifu-tips.js 中的监听事件函数解决。

1
2
3
4
5
6
7
8
9
10
document.querySelector("#waifu-tool .fa-times").addEventListener("click", () => {
    localStorage.setItem("waifu-display", Date.now());
    showMessage("愿你有一天能与重要的人重逢。", 2000, 11);
    document.getElementById("waifu").style.bottom = "-500px";
    setTimeout(() => {
        // ↓为此行添加注释↓
        // document.getElementById("waifu").style.display = "none";
        document.getElementById("waifu-toggle").classList.add("waifu-toggle-active");
    }, 3000);
});

使用 live2d-widget + pixi-live2d-display 存在鼠标移动到 Live2D <canvas> 上显示 mouseover 文本的问题。这个问题可以通过修改文本文件 waifu-tips.json，删除掉 mouseover 中 selector 为 #live2d 的文本来解决。或者通过修改 themes/next/source/live2d-widget/waifu-tips.js 中的监听事件函数解决。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
fetch(waifuPath)
    .then(response => response.json())
    .then(result => {
        window.addEventListener("mouseover", event => {
            for (let { selector, text } of result.mouseover) {
                if (!event.target.matches(selector)) continue;
                // ↓添加此行代码↓
                if (event.target.matches("#live2d")) continue;
                text = randomSelection(text);
                text = text.replace("{text}", event.target.innerText);
                showMessage(text, 4000, 8);
                return;
            }
        });

附上 Live2D 模型相关资源的链接：