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.ymlsource\_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 协议 ,转载请注明出处!