Charles的ACG博客
0%

Hexo搭建步骤与问题优化

发表于 更新于 分类于 | 阅读次数：
随缘更新的Hexo博客的一些基本构建操作1。

引言

  • 本人大概是从大四毕业后到研究生入学前的这段时间开始玩 Hexo + Github + Next主题 的博客搭建的。觉得感兴趣了就入坑个四五天，之后连续半年时间不会再看这个破烂博客。但最近由于心血来潮而重拾Hexo博客之后，发现很多东西和原本的不大一样了。Hexo已经更新到了 5.0+ 的版本，Next主题也有了 7.80 之类的最新版。原本自信满满，以为可以一同操作猛如虎的本菜鸡直接遭遇了滑铁卢，当时心情如下：

  • 因此，为了可以与时俱进，不再因为博客版本更新的问题而导致自己丈二和尚摸不着头脑，本菜鸡决定定时更新Hexo博客的搭建教程。

  • 注：此操作仅适用于win10系统，本人的实操经历有且仅有1次，若碰到参考本教程而搞坏自己电脑的大哥大姐们，本菜鸡概不负责。至于尊贵的mac用户或者是linux佬哥们就另请高明吧。


环境部署工作

安装node.js

  • 总的来说，Hexo博客利用的是node.js的环境来进行搭建的，目前不同Hexo版本对应的node.js版本的表格如下：
Hexo 版本 最低兼容 Node.js 版本
5.0+ 10.13.0
4.1-4.2 8.10
4.0 8.6
2.2-3.9 6.9
3.2-3.3 0.12
  • 剩下的低版本我就不一一列举出来了。就个人而言，不同于科研工作的pytorch、tensorflow的工具包需要稳定版本，Hexo博客的版本还是越新越好，不然上传博客容易出现各种报错的问题。

下面是node.js官网的链接，直接下载安装即可。

1
https://nodejs.org/zh-cn/

检查node.js版本

  • 打开你电脑的 cmd 或是 powershell 分别敲下这两行神秘代码并回车，进行 node.js 和 npm 版本的检查。其实主要是检查又没有正常的安装上。
1
2
node -v
npm -v
  • 然后你就会发现电脑给你反馈了点东西：

  • 有的话就没啥问题了。

安装Git

  • 一样的，神秘链接奉上：
1
https://git-scm.com/downloads
  • 当然，如果你已经有了的话，请在 Git Bash 里用以下代码检查一下你的git版本，以防版本过低被提示is deprecated。看不懂这个英文的请自行百度/谷歌以增长词汇量。不要和我一样学英语学得头秃了还是只记得abandon。
1
git update-git-for-windows
  • 如果你不幸输入了 git update，虽然它还是会帮你更新，但它会提示你的指令已经弃用了（提示：这里藏着deprecated的意思，做英语阅读分析的技巧，阅读上下文猜测词义，尽管我高中考英语时从来没有试成功过）。提示如下：
1
2
3
4
5
$ git update
Warning! `git update` has been deprecated;
Please use `git update-git-for-windows` instead.
Git for Windows 2.32.0.windows.2 (64-bit)
Up to date

Github账号注册与仓库搭建

  • 中国著名的思想家、文学家、教育家鲁迅先生曾经说过这么一句话：cs大佬们都有Github账号，我也有Github账号，所以四舍五入一下，我也是码农界的一方霸主（还是码农）。所以，还是趁早建一个Github账号以备不时之需。

  • 做自己的博客网站需要域名和存储服务器，这些要从哪里来？从Github中（嫖）来。注册很简单，你只需要有个自己的邮箱，然后发挥自己的想象给自己搞个酷炫的用户名，比如nmsl，或许 kksk 会更好，总之这将会成为你的Github ID，请谨慎对待。千万不要出现什么过于儒雅随和的名字，不然的话……

  • 紧接着就是建立存储自己静态网页文件的新仓库的时候了，请按图行事（Hexo博客仓库名字的形式是 xxxx.github.io，前缀务必与你的 Github ID 一致）：

1
your_github_id.github.io
  • 建立好仓库后，请务必保存 <>code 里的 SSH 以及你的仓库（repo）的url地址，这些以后都会用到。这两者的形式大概如下（上下分别为SSH以及HTTPS的deploy方式）：
1
2
3
4
SSH:
git@github.com:your_github_id/your_github_id.github.io.git
repo:
https://github.com/your_github_id/your_github_id.github.io.git
  • 接下来点击右侧设置Settings。向下找到Gihub Pages,点击 Launch automatic page generator ，Github将会自动替你创建出一个pages的页面。 如果配置没有问题，大约几分钟之后，your_github_id.github.io 这个网址就可以正常访问了。顺带，推荐强制开启https，可以更好地保护你的博客网站。

Hexo安装

  • 找一个没有小电影的合适位置，比如 E:/hexo/，安装 hexo-cli，鼠标右键在指定目录下怼开Git Bash进行输入（懒得找新建文件夹目录的建议cd）：
1
2
cd /e/hexo/
npm install hexo-cli -g
  • 再安装Hexo本体：
1
npm install hexo-cli -g
  • 安装完成后进行检查：
1
hexo -v

  • 接着，初始化博客：
1
2
3
hexo init blog
cd /e/hexo/blog/
npm install
  • 生成静态文件
1
2
hexo clean
hexo g
  • 将静态网页文件部署在远程网页中
1
hexo d
  • 临时展示（localhost:4000）
1
hexo s

Github推送

  • 配置个人信息（依旧是在Git Bash里操作），注意 name 和 email 两者要与 github id 和 注册邮箱 一致：
1
2
git config --global user.name "XXXX"
git config --global user.email "XXXXXXXXX@XXX.XXX"
  • 生成SSH密钥：
1
ssh-keygen -t rsa -C "XXXXXXXXX@XXX.XXX"

  • 生成密钥的时候可以一路回车，但是请记得两件事一个是你自己设定的SSH密钥的密码，另一个则是密钥的位置，通常就在这里：
1
C:\Users\你的计算机用户名\.ssh\id_rsa.pub
  • 到了这一步提供两个方法来复制你的SSH密钥全部内容，一个是装逼版的，请在bash控制台输入：
1
cat ~/.ssh/id_rsa.pub
  • 另一个则是直接打开 id_rsa.pub 文件进行复制，之后贴到你的github网址中个人设置的 SSH and GPG keys 这一栏新建的SSH密钥框里，title 随便取，叫 I can suck my own dick 来展现你惊人的柔韧性也无所谓。

  • 配置 SSH key 的原因：很多人在用github管理项目的时候，都是直接使用 https url 克隆到本地，当然也有有些人使用 SSH url 克隆到本地。使用 SSH url 克隆却需要在克隆之前先配置和添加好 SSH key 。如果你以后用 SSH url来克隆就需要用到，所以提前配置好没有任何问题。第一次上传的时候可能就会需要登陆你的Github账号，并输入你的SSH传输的password。

blog根目录下的_config.yml配置

  • 修改hexo根目录下的文件_config.yml中的deploy，添加之前保存的ssh或者仓库名：
1
2
3
4
5
6
7
8
9
10
11
12
deploy:
  type: git
  repository: 
	github: git@github.com:your_github_id/your_github_id.github.io.git # SSH URL
  branch: master

或者

deploy:
  type: git
  repo: https://github.com/your_github_id/your_github_id.github.io.git # Https URL
  branch: master
  • site的信息配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Site
title: 随便写
subtitle: ''
description: ''
keywords:
author: your_github_id # your_github_id
language: zh-CN
timezone: '' # 所谓''就是default默认值。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://your_github_id.github.io/  # 这里写你自己的博客站点url
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

Hexo博客编写基础

下载Next最新主题框架

1
2
3
4
https://theme-next.iissnan.com/getting-started.html

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 或者更简单粗暴些，直接从github网站上下载最新版，解压到themes文件夹中并用next重命名解压出来文件夹。这里是网址：Next主题v7.8.0。
  • 在blog根目录下的_config.yml里设置主题
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

初始化博客

1
hexo init blog

生成新博客网页

1
$ hexo new page "The name of your new page"
  • 通常跟着主题默认的设置走，有about，archives，categories，tags等。在生成完毕后，根目录下的source文件夹里会生成相应的文件夹，里面还会自动生成index.md文件。

撰写新博客文章（Markdown + HTML）


  • 先生成新文章：
1
$ hexo new post "The name of your new post"
  • 基本的文章信息：
1
2
3
4
5
6
7
---
title: 儒雅随和nmsl #文章页面上的显示名称
date: 2021-08-10 11:11:11 #文章生成时间，一般不改，当然也可以任意修改
categories: 随便写 #分类
tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意冒号:后面有个空格
description: 摘要，随便写点。
---
  • 文章内容标题
1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

  • 正文内容，请在写好标题后回车空一行再写，直接打字即可。

  • 粗体和斜体：

1
2
3
4
5
*斜体*
**粗体**
***又粗又斜***
~~删除线~~
`阴影`
  • 效果如下：
  • 斜体
  • 粗体
  • 又粗又斜
  • 删除线
  • 阴影

  • 表格写法：
1
2
3
| title1 | title2 | title3 |
| ------ | ------ | ------ |
| 123456 | 123456 | 123456 |
  • 效果如下：
title1 title2 title3
123456 123456 123456
  • 你的文章名.md 文件内常用指令，用来加载想要展示的图片和音乐，是我通过 html 自己琢磨出来的。记得在 blog 的 source 文件夹下新建一个 resources 文件夹来存放要加载的图片和音乐。
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--这玩意儿供你插入图片，歌名和与文章相应的循环播放的歌曲用的。-->
<!--在搞这个之前记得把hexo的config文件中的post_asset_folder的布尔值改为true。-->
<!--这样以后，source/_post/路径下会在你新建post的时候生成一个供你存放音源图源的文件夹。-->

<div align="middle">
	<img src="/resources/xxxx唱片图片.jpg" width="50%" height="50%" title="xxxx歌名" alt=""/>
	<audio src="/resources/xxxx.mp3" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" autoplay="autoplay" loop="loop" preload="meta">
	</audio>
</div>

<！--简单的空行指令-->

<br>
  • 另一种图片加载方式：
1
![](你图片的url，通常是/resources/xxx.jpg)

语言设定（单独强调）

  • blog_config.yml下language设定：
1
language: zh-CN

网页分页内容目录

1
2
3
4
5
6
7
8
9
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

Next主题

  • 主体修改/themes/next/下的_config.yml主题配置文件即可。少量需要修改.styl和.js文件。Next 7.80版本里css文件基本看不到，css文件夹下的基本都是.styl文件，让你改css文件的都要去面壁（我没说他一定是抄的）。

Next主题基本设定

主题风格选取

  • 主题风格首推Gemini，永远的神，最好看的Next主题，具体原因下面会细说（不是胡说）。

1
2
3
4
5
6
7
8
9
10
11
12
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

# Dark Mode
darkmode: true
  • 博客菜单优化。menu下面第一列是你设定的menu栏目名称，第二列是对应的文件夹或者文件名，第三列则是icon的名称：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
  首页: / || home
  关于: /about/ || user
  标签: /tags/ || tags
  分类: /categories/ || th
  归档: /archives/ || archive
  # 日程: /schedule/ || calendar
  站点地图: /sitemap.xml || sitemap
  # commonweal: /404/ || heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false

自定义主页

  • 主页通常为博客文章的摘要页，摘要页的设定分别为blog根目录下的hexo博客的_config.yml文件以及主题hexo文件夹下的主题设定的_config.yml文件两者的设定。
1
2
3
4
5
6
7
8
9
10
11
# ---------------------------------------------------------------
# Post Settings
# See: https://theme-next.org/docs/theme-settings/posts
# ---------------------------------------------------------------

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true
# 下面的可加可不加，应该失效了，但是挂着的时候不影响。
auto_excerpt:
  enable: true
  length: 150
  • 如果想要自定义主页，要改两个地方：
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
# \blog\_config.yml下

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: /default-index/ # 这里改成这样，想改回去随时换成''
  per_page: 10 # 首页显示的文章数
  order_by: -date # 按照最新日期排序

# \blog\themes\next\_config.yml下
menu:
  首页: / || fa fa-home # 这里改一下
  关于: /about/ || user
  标签: /tags/ || tags
  分类: /categories/ || th
  归档: /archives/ || archive
  # 日程: /schedule/ || calendar
  站点地图: /sitemap.xml || sitemap
  # commonweal: /404/ || heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false
  • 之后，在blog/source/的目录下建立一个 index.md 文件。
1
2
3
4
5
6
---
title: Charles的ACG博客
date: 2021-08-11 14:21:16
description: 立志成为一个会玩一点代码的肥宅PhD菜鸡博主
type: "home"
---

返回顶部（Back to top）设定

  • 在Next 7.80 主题的主题设定文件_config.yml里找到 Back2top，修改一下设定即可。
1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false # 不建议开这个，会有意想不到的bug，比如侧边栏空白背景闪现。
  # Scroll percent label in b2t button.
  scrollpercent: true

Next主题优化

  • 就我个人而言，next主题还算是很好用的。不只是样式简约又不失漂亮，与其配套的插件包也是层出不穷。接下来我就先介绍一下Next主题的动态背景。

动态背景Three/Canvas Ribbon

  • 我选取过 three 中的 three_waves 进行过尝试。废话不多说，先上个图感受一下。

  • 和我的设计有点冲突，但如果单纯放在无背景的白底上还是蛮漂亮的。里面的猫则是live 2D，我以后会进一步介绍。这个动态背景的设定很简单，因为 Next 7.80 主题的主题设定文件_config.yml里已经有与之对应的框架了，只要再从 github 上下载一下它的包就可以直接使用。那么，就先从下载开始。首先在Blog根目录下打开 Git Bash，随后键入：
1
2
cd themes/next
ls
  • 做这个的目的是检查一下你 发育 目录正不正常啊。

  • 然后就是正常安装（安装目录为source/lib/）：
1
git clone https://github.com/theme-next/theme-next-three source/lib/three
  • 之后在 Next 主题的_config.yml里找到如下文本并对照修改：
1
2
3
4
5
6
7
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: true
  three_waves: true
  canvas_lines: false
  canvas_sphere: false
  • 或者你要优化一下访客的访问速度，在 Next 主题的_config.yml用上 CDN图床。CDN你直接理解为降低内容负载，增加访问速度的东西即可：
1
2
3
4
5
6
vendors:
  ...
  three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
  three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/three-waves.min.js
  canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/canvas_lines.min.js
  canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/canvas_sphere.min.js
  • Canvas Ribbon的启用也比较类似（竟然是静态的，F@ck），我就不多做介绍了：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
一样分三步走。

第一步（在Git Bash里）：
cd themes/next
ls

第二步（在Git Bash里）：
git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

第三步（在 Next 主题的_config.yml里）：
# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: true
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

代码块高亮、复制、变色

  • 说起来，作为一个渴望成为码农挣高薪的菜鸡传统工科PhD而言，博客的代码块一定是要好好搞一下的。看到别人的博客代码块是Mac panel风格觉得很酷炫，自己也想弄一个。然后就去找了一下教程看别人怎么搞。然而，别人的实现方式都是基于js和css，试了一下并不work，有限的前端水平也没有找到原因。

  • 最强的例子大概就是这一位了：

1
https://zhuanlan.zhihu.com/p/124888459

先是五个 .js 文件，再是改 matery.css 和 post.ejs。唬得我一愣一愣的，关键是这俩文件在 Blog 的目录中也不存在，所以我纠结了半天，在 Next 主题的配置文件里发现了这个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
if (hexo-config('codeblock.copy_button.style') == 'mac') {
  .highlight-wrap {
    background: #21252b;
    border-radius: 5px;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
    padding-top: 30px;

    &::before {
      background: #fc625d;
      border-radius: 50%;
      box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
      content: ' ';
      height: 12px;
      left: 12px;
      margin-top: -20px;
      position: absolute;
      width: 12px;
    }
  }
}

好家伙，原来这玩意儿一开始就有。那么在 Next 7.80 主题的主题设定文件_config.yml里一定存在着与之对应的控制开关，我一搜，果不其然：

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties # 改背景色的
  # Add copy button on codeblock
  copy_button:
    enable: true # 可以复制代码
    # Show text copy result.
    show_result: true # 提示你代码复制成功与否
    # Available values: default | flat | mac
    style: mac # 改代码块样式的
  • 所以，小丑竟是我自己，除了不能够进行代码块收缩以外，其余都差不离，凑活着用好了。

博客板块半透明 + 背景设计

  • 每个男人都有一个梦想，那就是拥有一个 可以看穿一切的透 ，哦不，是可以显示背景中二次元老婆们的半透明博客板块。

  • 什么？你不想要？那你就看着吧。

  • 关于博客板块半透明 + 背景设计，我们主要改动两处地方，Next 7.80 主题的主题设定文件_config.yml以及一个自己在 （/blog/source/_data/）自建的 styles.styl 文件，目录没有就自己新建文件夹。一开始我也觉得有点奇怪，为啥不是放在/next/source/里的，后来想想确实可以改目录，但是还是默认的好，不用产生多余的隐藏bug。

  • 先来搞一下 styles.styl 文件。根据之前叙述的目录建立该文件，之后在其中添加如下语句（图你自己从P站下：https://www.pixiv.net/）：

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
// 这是改背景的
body {
  background :url(/resources/background.jpg);
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-position: 50% 50%;
}

// 这是设定透明度的
// 文章内容的透明度设置
.content-wrap {
  opacity: 0.9;
}

// 侧边栏的透明度设置
.sidebar {
  opacity: 0.9;
}

// 菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.9);
}

// 搜索框（local-search）的透明度设置
.popup {
  opacity: 0.9;
}

// 评论区的透明度设置
.comments {
  background: rgba(255,255,255,0.9) none repeat scroll !important;
}
  • 然后再去 Next 7.80 主题的主题设定文件_config.yml里找到相应的 custom_file_path，去掉 #。
1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

  • 之后，你通过 hexo clean/g/d 三步走以后发现更新的博客文章太透明了，所以要给文章模块加一个阴影。这时候有两种选择，一个是直接在 \blog\themes\next\source\css_common\components\post\post.styl 这个目录下的 post.styl 文件里进行修改，另一个是直接加在 styles.styl 文件里（我是直接改post.styl的）。

  • 因为是 Next 7.80 版本，如果有人大言不惭地让你去改什么不存在的 themes/next/source/css/_custom/custom.styl 文件，你大可以告诉他不要随便抄别人以前的博客，这样是要负责任的。

  • 如果直接改 post.styl，那就找到 .use motion ，之后用如下代码进行替换，替换位置在 .use motion 和 @import 之间：
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
.use-motion {
  if (hexo-config('motion.transition.post_block')) {
    .post-block {
      opacity: 0;
      margin-top: 60px;
      margin-bottom: 60px;
      padding: 25px;
      background:rgba(255,255,255,0.9) none repeat scroll !important;
      -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
      -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);

    }
    .pagination, .comments{
      opacity: 0;
    }
  }

  if (hexo-config('motion.transition.post_body')) {
    .post-body {
      opacity: 0;
    }
  }

  if (hexo-config('motion.transition.coll_header')) {
    .collection-header {
      opacity: 0;
    }
  }
}
  • 如果继续把代码加在 styles.styl 文件里，则是添加如下代码（此效果不知，我没试过）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.main-inner { 
   // margin-top: 60px;
   // padding: 60px 60px 60px 60px;
    opacity: 0.9;
	.post-block {
		background: rgba(255,255,255,0.7) none repeat scroll !important;
	}
}

// 主页文章添加阴影效果
.post {
   margin-top: 60px;
   padding: 20px;
   margin-bottom: 60px;
   -webkit-box-shadow: 0 0 5px rgba(120, 128, 114, 1.5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

博客文章边框圆角效果

  • 一样的，改两处地方。分别是Next 7.80 主题的主题设定文件_config.yml以及一个自己在 （/blog/source/_data/）自建的 variables.styl 文件。

  • 自己创建 variables.styl 文件，在其中添加：

1
2
$border-radius-inner     = 20px 20px 20px 20px;
$border-radius           = 20px;
  • 然后再于 Next 7.80 主题的主题设定文件_config.yml里找到相应的 custom_file_path，去掉 #。
1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl
  • 然后你会发现侧边栏有一处竟然存在背景色，也就是圆角下还有方角，那有点强迫症的我自然要回到 styles.styl 重新改一下 .sidebar 的设置：
1
2
3
4
.sidebar {
  opacity: 0.9;
  background-color: transparent; // 加了一句background设定
}

  • 然后再 hexo clean/g/d 三件套，之后再校验的时候就OK了。

  • 顺带的，在这里我要提一嘴为何我之前选择 Next主题 里的 Gemini 风格。其实 Muse 风格的样式还是蛮不错的，它错就错在改圆角无法生效。（好了我不说了，再说的话一些头铁的就要来打我了。）

Live 2D（你也要做Vtuber么？）

  • 先来一波直男式科普：Live2D的工作原理是通过将一系列的2D图像进行平移、旋转和变形等操作，生成一个具有自然动画效果的可动人物模型。由于Live2D只需一系列2D原图即可生成具有类似于3D动画效果的模型，比3D建模耗费的时间和成本更少，因此受到很多游戏制作者，特别是小成本AVG和手游作者的喜爱。另外，Live2D生成的模型相对于真正的3D模型，可以更好地还原手绘风格。

  • Live2D生成的模型并不是真正的3D模型，因此具有一些局限性，比如无法进行大幅度的转身动作。（妈的阿库娅）

  • 然后我们开始安装和配置的教程。要永远记住一件事，所有的 Git Bash 安装操作都需要在你 Blog 的根目录下进行。

  • 安装：

1
npm install --save hexo-helper-live2d
  • 如果不想要了，也可以完全卸载：
1
npm uninstall hexo-helper-live2d
  • 安装完成之后，就会在博客的根目录 package.json 文件中存在依赖，大概长这样（json文件是不支持注释的，而且这个自动就给加上了，不需要改，就不要直接把我这段错误的注释给贴上去了）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"dependencies": {
  "gitalk": "^1.7.2",
  "hexo": "^5.0.0",
  "hexo-deployer-git": "^3.0.0",
  "hexo-generator-archive": "^1.0.0",
  "hexo-generator-category": "^1.0.0",
  "hexo-generator-index": "^2.0.0",
  "hexo-generator-search": "^2.4.3",
  "hexo-generator-sitemap": "^2.1.0",
  "hexo-generator-tag": "^1.0.0",
  "hexo-helper-live2d": "^3.1.1",  -> 这个就是你装的 live2d 包
  "hexo-renderer-ejs": "^1.0.0",
  "hexo-renderer-marked": "^4.0.0",
  "hexo-renderer-stylus": "^2.0.0",
  "hexo-server": "^2.0.0",
  "hexo-theme-landscape": "^0.0.3",
  "live2d-widget-model-tororo": "^1.0.5" -> 这个是你装的 live2d 资源
}

  • 关于 Live 2D model 的资源包，可以参考这个网站：Github_Live2D_资源站。

  • 与 model 资源包对应的动画效果请参考这个网站：Live_2D效果。

  • 资源包安装：

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
Install seperated models
use npm install {packagename} The package name is the folder name in packages/ We have:

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
  }

  • 本人用的是 tororo，也就是我网页上的那只白猫。

  • 全部安装完毕后，打开博客根目录的配置文件 _config.yml ，添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Live2D
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  model:
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
    use: live2d-widget-model-tororo # 下载的动画模型名称
  display:
    superSample: 2
    width: 150  # 可以通过 width 和 height 来调整其大小
    height: 250
    position: right # 模型在网页显示位置
    hOffset: 20
    vOffset: 50
  mobile:
    show: true  # 移动设备是否显示
    scale: 0.5
  react:
    opacityDefault: 0.4
    opacityOnHover: 0.2

  • 最后请记得用 hexo clean/g/d 三件套将更新好的博客部署到网页上。

  • 如果要自己制作和发布Live 2D的话，请参考如下步骤：

  • 制作比较难，请参考某乎，GAMECORES和B站教程。不出意外基本都是送进收藏夹吃灰的节奏。

  • 单纯的发布就很简单：

    • 新建一个目录, 用Node环境执行 npm init, 包名推荐格式如：live2d-widget-model-xxx。
    • 在刚刚创建的目录下创建 assets 子目录, 把你的模型文件放进去。
    • 执行 npm publish 命令来发布。
    • 此时就使用 npm install --save live2d-widget-model-xxx 来安装自定义的模型包了。
    • 安装完成后就可以在配置文件 _config.yml 中 model:use: 修改包名来使用了。
1
2
3
4
5
6
live2d:
  model:
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
    use: live2d-widget-model-tororo # 下载的动画模型名称（或者用你自己发布的）

关于 Next 7.80 版本的部分问题的处理方法

关于主页不完全显示文章的方法

1
2
3
4
5
6
7
8
在index.md里加上 description:

例子：
---
title: Hexo常用博客更新代码
date: 2020-05-21 23:12:46
description: 随缘更新的Hexo博客的一些基本构建操作。
---

关于Next主题7.80版本中文标题的链接无法跳转的问题

  • 先上图：

  • 要改的就是图片里框出来的两句话：
1
2
3
4
5
6
7
8
将 \blog\themes\next\source\js\utils.js 文件目录下的
var target = document.getElementById(event.currentTarget.getAttribute('href').replace('#', ''));
改为：
var target = document.getElementById(decodeURI(event.currentTarget.getAttribute('href').replace('#', '')));

return 的部分如法炮制，问题主要出现在文字转码问题，要给加上 decodeURI()。

参考网站为：https://github.com/theme-next/hexo-theme-next/issues/1543