0x00 前言
之前的博客主题H2O界面不太美观，可扩展性较差（主要是因为笔者不懂前端），遂有了这次更换博客主题的“探索”。将过程记录于此。
0x01 本地环境搭建
笔者使用的是Ubuntu 16.04，nodejs和Git版本如下，如没有这两个工具，请另行安装：
nodejs：4.2.6
Git：2.7.4
0x01.1 安装npm并更换npm源
安装npm：
sudo apt-get install npm
查看npm源：
npm config get registry
修改npm源：
npm config set registry https://registry.npm.taobao.org
0x01.2 安装Hexo
新建一个文件夹用来存放博客相关文件，笔者新建的文件夹是Blog，执行下列命令：
cd ~/Blog #~/Blog需修改为你自己的目录位置
sudo npm install -g hexo-cli
sudo hexo init
由于这篇文章与当时笔者搭建环境间隔了一段时间，有些遇到的问题没有记录下来。如果出现访问文件夹受限的问题，修改Blog的group与username即可：
sudo chown group_name:username ~/Blog
安装完成后，笔者的目录结构如下：
├── _config.yml
├── node_modules
├── package.json
├── package-lock.json
├── scaffolds
├── source
│ └── _posts
└── themes
└── landscape
正常情况应该没有node_modules目录与package-lock.json文件，与具体环境有关。
执行下列命令之后，会生成public目录与db.json文件，public目录相当于网站的根目录。
在浏览器中访问http://localhost:4000，可以看到默认的landscape主题样式：
image
0x01.3 使用NexT主题
-
执行
git clone https://github.com/iissnan/hexo-theme-next themes/next将NexT主题添加到themes目录下； -
使用
vim _config.yml修改Blog目录下的_config.yml配置文件，进入vim编辑器后使用/theme:找到theme项并修改为next，:wq保存退出； -
执行
hexo s后在浏览器中访问http://localhost:4000，可以看到NexT主题生效。
0x02 NexT主题个性化
0x02.1 主题设定
作者提供的NexT使用文档已经描述得很详细了，不再另行赘述。
可以打开两个终端，一个运行hexo server，另一个运行vim编辑器修改配置文件。
0x02.2 添加菜单
添加菜单项后，还需创建该菜单的页面才能生效，否则访问会出现错误（e.g.Cannot GET /categories/）。
执行命令：
hexo new page categories
执行完毕后，source目录下会出现一个categories目录，其中有
修改index.md文件如下：
---
title: 分类
date: 2019-08-11 22:28:27 #该字段不用修改，由创建时自动填入
type: "categories"
comments: false
---
其他菜单项的创建及设置方法同上。
0x02.3 添加社交图标及链接
修改主题配置文件中下列内容：
social:
GitHub: https://github.com/erfze || github
E-Mail: mailto:erfze1999@gmail.com || envelope
#Google: https://plus.google.com/yourname || google
Twitter: https://twitter.com/erfze || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype
启用你想加入的社交平台即可，笔者只启用了Github、E-Mail、Twitter。
0x02.4 添加搜索服务
笔者使用的是Algolia，这篇文章比NexT使用文档要详细，可以参考一下。
不过其中有些内容已经“过时”：
image
在设置ACL时，已经不再是复选框样式。
按部就班地完成后，会在菜单栏出现“搜索”：
image
搜索时出现的提示，可以根据自己喜好修改，笔者改为了如下内容：
# Algolia Search
algolia_search:
enable: true
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "抱歉，未找到任何与 ${query} 相符的内容"
hits_stats: "找到 ${hits} 条内容，耗时 ${time} ms"
image
image
部署到Github上之后出现了一个问题，无法搜索后期提交的文章，这时在本地执行hexo algolia即可。
0x02.5 设置评论系统及分享功能
评论使用的DISQUS，需科学上网后方可使用，具体设置参考NexT使用文档/Hexo添加Disqus评论 。
分享功能配置文件中指出Baidu Share和jiathis都不支持HTTPS：
# Baidu Share
# Available value:
# button | slide
# Warning: Baidu Share does not support https.
#baidushare:
## type: button
# Share
# This plugin is more useful in China, make sure you known how to use it.
# And you can find the use guide at official webiste: http://www.jiathis.com/.
# Warning: JiaThis does not support https.
#jiathis:
于是使用了needmoreshare2分享。修改主题配置文件：
needmoreshare2:
enable: true
postbottom:
enable: false #笔者没有开启文章下方的分享按钮
options:
iconStyle: default
boxForm: horizontal
position: middleRight
networks: Weibo,Wechat,QQZone,Twitter,Facebook
float:
enable: true #开启侧边浮动分享按钮
options:
iconStyle: default #box样式过于丑陋，所以使用default
boxForm: vertical
position: middleRight
networks: Weibo,Wechat,QQZone,Twitter,Facebook
0x02.6 公益404
执行hexo new page 404，之后修改index.md文件：
---
title: 404 Not Found
date: 2019-08-12 12:38:17
comments: false
permalink: /404
---
<body>
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="回到我的主页">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
0x02.7 文章末尾添加版权声明
修改主题配置文件：
post_copyright:
enable: true
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
许可协议的选取可以参考creativecommons ，笔者选取的是CC BY-NC-SA 4.0。
0x02.9 设置首页显示预览而非全文
修改主题配置文件：
auto_excerpt:
enable: true
length: 150
之后就可以看到首页的每篇文章只显示预览内容和阅读全文按钮了。
0x03 绑定域名并推送至Github
具体操作这篇文章已经描述得很详细了，笔者只提醒一点：执行hexo g之前，在source目录下新建一个CNAME的文件，里面写入你的域名。否则每次hexo deploy之后都要去修改Custom domain。
0x04 更新博客
-
执行
hexo new "tile_name"，进入source\_posts\，可以看到生成的titile_name.md，直接编辑即可。 -
编辑完成后，
hexo deploy(如果目录结构发生变化，在hexo deploy之前还要执行hexo g)hexo d -g。
0x05 SEO
SEO的话可以参考hexo的SEO方法与Hexo博客Next主题SEO优化方法这两篇文章，其中已经描述得很详尽。
上述文章中只有一处需要纠正，就是首页title优化部分：其中的{{ theme.keywords }}应该是{{ config.keywords }}，这样你在站点配置文件中设置的Keywords才会生效。
网友评论