从零开始的Hexo博客搭建（三）—— 博客进阶设置、在其他电脑发布博客

本文最后更新于：5 个月前

添加其他样式

主要添加自定义样式。首先编辑主题配置文件，然后在站点根目录的source文件夹内新建你配置的文件夹和文件：

1
2
3
custom_js:   # 指定自定义 js 文件路径，路径是相对 source 目录，如 /js/custom.js 对应存放目录 source/js/custom.js，支持列表
custom_css:  /css/custom.css # 指定自定义 css 文件路径，路径是相对 source 目录，如 /css/custom.css 同上，支持列表
custom_html: ''  # 自定义底部 HTML 内容（位于 footer 上方），也可用于外部引入 js css 这些操作，注意不要和 post.custom 配置冲突

修改鼠标样式

在前面新建的CSS文件中添加如下代码：

1
2
3
4
5
6
7
/*鼠标样式 */
  body {
    cursor: url("/img/huaji.cur"),auto !important
  }
  a:hover {
      cursor: url("/img/laji.png"),auto !important
  }

上面代码中url的地址是在source目录下的文件，也可以写其他的图片地址。

修改网页背景

还是在前面新建的CSS文件中修改，添加如下代码：

1
2
3
4
5
6
7
body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

还可以配置动态背景：

添加其他功能

本篇主要添加一些主题中没有提供的功能。

添加网页看板娘（Live2D）

首先安装Live2D插件，在站点根目录下运行以下命令：

1
npm install --save hexo-helper-live2d

然后选择自己喜欢的模型，复制名字。

Epsilon2.1

img

Gantzert_Felixander

img

haru

img

miku

img

ni-j

img

nico

img

nietzche

img

nipsilon

img

nito

img

shizuku

img

tsumiki

img

wanko

img

z16

img

hibiki

img

koharu

img

haruto

img

Unitychan

img

tororo

img

hijiki

img

将下面的代码添加到站点配置文件_config.yml中，修改<模型名字>（有教程说放在主题配置文件中，但是实际测试放在主题文件中并不好用，不管使用哪个模型网页中都不生效，都显示默认的shizuku这个模型，但是把代码放在站点配置文件中就好用了，不知道是什么原因）

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
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  # enable: true
  enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-<模型名字> # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 250
    height: 500
    position: right
    hOffset: 0
    vOffset: -20
  mobile:
    show: false
    scale: 0.5
  react:
    opacity: 0.7
  dialog: 
    enable: true
    hitokoto: true

安装你选择的模型，在命令行运行下面的命令：

1
npm install --save live2d-widget-model-<你选择的模型名字>

然后在命令行运行以下命令，在浏览器里访问localhost:4000查看效果

1
hexo clean && hexo g && hexo s

文章加密

当想要写一些不想让人随便看到的博客时，可以通过密码验证的方式阻挡别人的浏览，之前有一款文章加密的插件，但是好像效果不是很好，因为密码就被写在了网页源码里，只要打开网页源码就能看到。现在又找到另外一个（也可能是原来的升级了？主要不记得原来的插件名字了）加密插件，似乎并不会将密码泄露到网页中，可以尝试使用这款插件。

安装方式：

1
npm install --save hexo-blog-encrypt

或

1
yarn add hexo-blog-encrypt (需要Yarn)

最简单的使用方式就是将 “password” 字段添加到文章的信息头上：

1
2
3
4
5
---
title: Hello World
date: 2020-01-03 15:43:38
password: 123456
---

高级设置：

两种设置方式：

  • 在文章信息头添加加密信息：
1
2
3
4
5
6
7
8
9
10
11
---
title: Hello World
tags:
- 作为日记加密
date: 2020-01-03 15:43:38
password: 123456
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---
  • 在站点文件_config.yml内配置加密信息：
1
2
3
4
5
6
7
8
9
10
# Security
encrypt: # hexo-blog-encrypt
  abstract: 有东西被加密了, 请输入密码查看.
  message: 您好, 这里需要密码.
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

注意！！！在站点配置文件配置上述内容时，如果把tags下面的内容都注释掉的话编译生成的时候会报错，要改成这样才行：

1
2
3
tags: [] #在后面加一对方括号，表示是个数组，不然报错 Cannot read property 'forEach' of null
  # - {name: tagName, password: 密码A}
  # - {name: tagName, password: 密码B}

以后有类似的配置遇到问题也可以尝试这样解决。

加密优先级是 文章信息头 > 按标签加密。

配置优先级是 文章信息头 > _config.yml (站点根目录下的) > 默认配置。

其他问题

在部分博客中, 解密后部分元素可能无法正常显示或者表现, 这属于已知问题. 目前的解决办法是通过自行查阅自己的博客中的代码, 了解到在 onload 事件发生时调用了哪些函数, 并将这些函数挑选后写入到博客内容中. 如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: Callback Test
date: 2019-12-21 11:54:07
tags:
    - Encrypted
---

This is a blog to test Callback functions. You just need to add code at the last of your post like following:

It will be called after the blog decrypted.

<script>
    // 添加一个 script tag 与代码在文章末尾.
    alert("Hello World");
</script>

对 TOC 进行加密

如果你有一篇文章使用了 TOC，你需要修改模板的部分代码。这里用 landscape 作为例子：

  • 你可以在 hexo/themes/landscape/layout/_partial/article.ejs 找到 article.ejs。
  • 然后找到 <% post.content %> 这段代码，通常在30行左右。
  • 使用如下的代码来替代它:
1
2
3
4
5
6
7
8
9
10
11
<% if(post.toc == true){ %>
  <div id="toc-div" class="toc-article" <% if (post.encrypt == true) { %>style="display:none" <% } %>>
    <strong class="toc-title">Index</strong>
      <% if (post.encrypt == true) { %>
        <%- toc(post.origin, {list_number: true}) %>
      <% } else { %>
        <%- toc(post.content, {list_number: true}) %>
      <% } %>
  </div>
<% } %>
<%- post.content %>

利用GitHub备份博客源文件并且在不同电脑操作

在你换电脑或者重装系统的时候万一不小心把博客的站点文件夹删了或者弄丢了那就什么都没了，所以为了防止发生这样的情况，就可以用GitHub来保存博客的源文件。

用命令行操作

具体操作是在你的GitHub中新建一个仓库或者在你的博客仓库内新建一个分支，个人推荐新建一个仓库，和博客的静态文件分开管理比较好，然后在本地找一个空文件夹，运行下面的命令：

1
git clone git@github.com:你的git账户名/你的博客仓库名

就是如下图所示这个链接：

复制粘帖到git clone后面即可。

更新：我在过了不知道多久之后回来整理吃灰博客的时候碰到的两个问题

一是用于太久没用ssh，github自动把ssh删掉了，然后在我克隆仓库的时候就出现了git@github.com:Permission denied (publickey). fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists.这个错误。这个时候首先使用ls ~/.ssh/这个命令检查你电脑上的之前创建的ssh文件是否还在，如果存在的话把之前创建的公钥再复制到github里就行，如果没有ssh就要重新创建ssh密钥然后再添加到github上。

二是如果你电脑上有设置了多个Git帐号的话，上面的代码就要修改一下了。

根据你ssh文件夹下的config文件，把git@github.com:这部分中@和：之间的github.com改成config文件中host对应的名称，否则拉取仓库的时候也会报上面的错。

把仓库克隆到本地，然后把你的博客源文件全部复制过来，除了.deploy_git，注意复制过来的文件里面应该有一个叫.gitignore的文件，用来忽略一些不要提交到Git的文件，如果没有可以自己新建一个，在里面加上下面的内容：

1
2
3
4
5
6
7
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

如果还有其他自己不想提交的文件也可以加到这个文件中。

然后再在命令行中执行以下命令：

1
2
3
git add .
git commit –m "commit message"
git push

可以在网页中查看是否上传成功。

当你换了电脑或者重装系统后想把博客下回来怎么操作？

首先前面的都一样，下载安装node，Git，然后设置git全局邮箱和用户名，设置SHH，安装hexo，然后在任意一个文件夹内，执行git clone git@你的博客源文件仓库地址，进入克隆下来的文件夹，运行下面的命令：

1
2
npm install
npm install hexo-deployer-git --save

然后就可以继续写博客了，写完之后运行hexo g && hexo d，就可以部署到GitHub Pages上了。而且现在可以每次写完博客都把源文件备份一下了：

1
2
3
git add .
git commit –m "commit message"
git push

用GitHub Desktop操作

下载安装GitHub Desktop然后登陆GitHub，把对应的作为保存博客源文件的仓库克隆到本地，然后把除了.deploy_git以外的博客源文件复制进来，注意有没有.gitignore这个文件，没有按上面方法加上，然后再写上备注信息，，提交推送到Git上就行了。

参考链接：

【持续更新】最全Hexo博客搭建+主题优化+插件配置+常用操作+错误分析

hexo史上最全搭建教程

如何使用 Hexo 和 GitHub Pages 搭建这个博客

Hexo中文文档