Hexo+Next博客不完全指南

按：现在是2020年6月，接触Next主题也有一段时间了。如今折腾主题还是得依靠官方DOC文档和主要贡献者的博客，因为他们才是对项目最清楚的人。

例如今天准备开启代码块的Mac视图效果（如下面的代码块所示）,百度出来的结果很多都是引入JS包，殊不知至少从我使用的Next7.8开始，主题的配置文件里直接可以设置效果：

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: normal
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

为此当我遇到主题问题，会访问米米的博客 、Documentation | NexT ，遇到博客问题会查看Hexo标签插件等官方文档。当然我前期看不懂的时候，也从许多个人博客中了解到很多知识。其中很多人比较注重博客内容的更新，这个需要注意。

懒人搭建

本博客搭建于coding.net，与GitHub一样提交代码，不过在coding.net中静态网站可以运行基于node.js的Hexo博客框架。原理在于平台在用户提交代码后自动执行hexo generate以生成静态文件并部署，而使用GitHub的话则需要使用hexo g在本地生成好的静态文件（位于public文件夹中）再推送至仓库中。

这意味着coding.net平台已经准备好了博客运行环境，个人需要做的仅是推送修改好的代码。此外，使用GitHub账户登录 .com也可以实现网站的自动部署，具体请参考百度。以coding.net为例你可以：

  1. 克隆我的博客源代码，将配置文件替换为自己的即可：
1
2
#克隆最新版本的代码，提高速度
git clone --depth 1 https://github.com/achenger/achenger.github.io.git
  1. 按自己需求修改配置文件_config.yml 与 source\_data\next.yml
  2. 推送到自己的仓库

前期准备

git bash窗口

初始化hexo网站

按照官网步骤来便好了。在窗口初始化hexo网站：

1
2
3
4
5
zhangc@DESKTOP-DOAPQKF MINGW64 /d/workstations/blog.youdef.com (master)
$ hexo init blog #在当前目录下创建名为blog的目录，并初始化

$ cd blog/
$ npm install #或者自己配置的cnpm

hexo主题

https://hexo.io/plugins/ 提供有丰富的主题，或者在GitHub中检索hexo theme第一页基本是最流行的。

下面以Next主题为例

hexo插件

分别运行以下命令，安装RSS、搜索和PV功能的依赖，结果将体现在根目录下package.json中：

1
2
3
4
5
npm hexo-generator-feed --save

npm install hexo-generator-searchdb --save

npm install hexo-related-popular-posts --save

曾经在调试时多次出现报错，都是跟主题要求的插件没有安装有关！**

如某次CSS样式文件未加载：

package-lock.json 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。

文件中上标号^是定义了向后（新）兼容依赖。

在本地尝试更新文件成功，恢复本地预览网站：npm install

环境依赖包升级

1
2
3
4
5
6
7
8
#npm-check检查更新
npm install -g npm-check
npm-check

#npm-upgrade更新
#一路回车确认即可
npm install -g npm-upgrade
npm-upgrade

安装主题

在theme目录下创建next目录，并克隆主题：

1
2
3
git clone --depth=1 https://github.com/theme-next/hexo-theme-next themes/next
#https://github.com/ppoffice/hexo-theme-icarus.git 
#该主题也不错

注：由于大陆网速较慢，且clone 默认会下载完整的历史版本，这里设置只克隆最新版本的代码，即depth为1。实测代码体积大幅减少。（浅克隆）

安装完毕后，需要在根目录下打开_config.yml，指定hexo网站的主题：

1
2
# Extensions
theme: next #next 为theme目录下主题对应的目录

本地预览网站

1
2
3
4
5
6
7
# 在git窗口下键入hexo命令
hexo server

#或者hexo server --debug
#其他hexo命令
hexo clean
hexo new post article-name

本地预览地址 http://localhost:4000/

git常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
git init
git config --global user.name '你的名字'
git config --global user.email '登录邮箱'

git remote add origin https://xxxx.git #这里origin是源的意思，在push时加上，表示指定push到该源的仓库上


git add 指定的file #.表示全部
git commit -m "文字说明"
git push -u origin master #推送到远端仓库

git status
git log
git reset --hard xxxxxx #
git push -u origin HEAD --force

#有时需要生成密钥，配置完毕后在GitHub或coding.net上添加
#生成文件为C:\Users\xxx你电脑名\.ssh目录下的id-rsa.pub文件
ssh-keygen -t rsa -C '登录邮箱'

高级：使用本地代理以提高git clone速度

1
2
3
4
5
6
# 代理设置
git config --global http.proxy 'socks5://127.0.0.1:1080'
git config --global https.proxy 'socks5://127.0.0.1:1080'
# 取消代理
git config --global --unset https.proxy 'socks5://127.0.0.1:1080'
git config --global --unset http.proxy 'socks5://127.0.0.1:1080'

Next7.x主题美化

自定义CSS样式

先得在next.yml配置文件中中开启修改，去掉前面的#注释即可：

1
2
custom_file_path:
 style: source/_data/styles.styl

然后再对应目录下创建文件，并写入样式：

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(https://mingshan.fun/images/background_25.png);
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position:50% 50%;
}
<!--样式2：-->
.headband, .site-brand-container {
    background: #fc6423 !important;
}
:root {
    --body-bg-color: #eee;
    --content-bg-color: #fff;
    --card-bg-color: #f5f5f5;
    --text-color: #555;
    --blockquote-color: #666;
    --link-color: #555;
    --link-hover-color: #0684bd;
    --brand-color: #fff;
    --brand-hover-color: #fff;
    --table-row-odd-bg-color: #f9f9f9;
    --table-row-hover-bg-color: #f5f5f5;
    --menu-item-bg-color: #f5f5f5;
    --btn-default-bg: #fff;
    --btn-default-color: #555;
    --btn-default-border-color: #555;
    --btn-default-hover-bg: #222;
    --btn-default-hover-color: #fff;
    --btn-default-hover-border-color: #222;
    --highlight-background: #f0f0f0;
    --highlight-foreground: #444;
    --highlight-gutter-background: #dedede;
    --highlight-gutter-foreground: #555;
}

该样式参考自米米的博客，body{}部分参考自明月逐人归 两者不可兼得。

页脚附加其他

Next新版取消了页脚添加其他说明文字的功能，有时我们需要加上CDN技术支持文字或脚本，为此做出修改：

  1. 在Next主题文件themes\next\layout\_partials中的footer.swig的偏下位置添加：
1
2
3
4
5
{%- if theme.footer.custom_text %}
	<div class="powered-by">
		{{- theme.footer.custom_text }}
	</div>
{%- endif %}
  1. 主题文件的配置文件中footer：下添加custom_text：
1
2
3
4
footer:
	#footer下面还有beian，powered等关键字，搜索一下就能定位
# Any custom text can be defined here.
  custom_text: By <a href="https://www.upyun.com" class="theme-link" rel="noopener" target="_blank">Coding.me & 又拍云</a>

这样的好处是，以后有其他修改的话，只需要在主题配置文件中修改即可，我还认为此处的custom_text可以加一些js文件的。

边框添加圆弧角

在\themes\next\source\css\_variables\Gemini.styl修改：

1
2
3
// 修改主题页面布局为圆角
$border-radius-inner = 15px 15px 15px 15px;
$border-radius = 15px;

插件：

生成短连接

npm install hexo-abbrlink --save
自动生成短链例如 abbrlink: 123

RSS订阅

npm install hexo-generator-feed --save

安装后即可，无需配置yml文件。

文章置顶

先 npm uninstall hexo-generator-index --save
再 npm install hexo-generator-index-pin-top --save
在 Front-matter 插入 top:100，数字越大文章在首页的位置越靠前。

文章加密

npm install --save hexo-blog-encrypt
在文章信息头插入
password: mikemessi abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
解密后部分元素可能无法正常显示或者表现，见详细配置

文章隐藏

npm install hexo-hide-posts --save
默认 hidden: true 用于隐藏，hidden 可自定义为自己喜欢的名字。

生成feed订阅（RSS）

npm install hexo-generator-feed --save
默认只获取文章摘要或者前140个字符

站点地图 sitemap

自动生成 sitemap.xml ，可提交给搜索引擎（百度拉胯，谷歌和雅虎收录极快，Bing也还行）。搜索 site:loafing.cn 查看被收录情况。

更多插件介绍：https://loafing.cn/posts/hexo-tags.html

致谢

最后，这次记录主要为备忘，结合本人也踩过多次坑，也似乎缺点什么。希望给予读者启示。

教程与推荐

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！