Hello Hexo

发表于 | 更新于 | 分类于 | 评论数：
本文字数： 11k | 阅读时长 ≈ 10 分钟

写在前面

经过几天的折腾，终于又搭建起了自己的个人博客，经历过种种的波折，从最早的wordpress到Jekyll，再到Octopress，然后是现在的Hexo，目前看使用Next主题，不管性能上还是排版上都还看得过去，所以应该能撑一段时间了。

优化配置

菜单栏新增页面

以新建关于页面为例，新建分类、新建标签等页面与之相似，具体的操作如下：

新建关于页面
1
2
cd /your/site/path
hexo new page "about"

1、在主题配置文件themes/next/_config.yml中搜索menu ，新增： about: /about/ || user

2、如果想让该页面显示中文，则修改themes/next/languages目录里的zh_Hans.yml文件，新增 about: 关于

3、点击关于页面后，我们是希望该页面没有评论框的，所以要修改source/about/目录下的index.md文件，在其头部加入comments: false，同时添加type: about

首页文章数

首先要安装插件，在博客的根目录下输入以下命令

1
2
3
npm install  hexo-generator-index --save
npm install  hexo-generator-archive  --save
npm install  hexo-generator-tag --save

安装完插件后，在站点的配置文件_config.yml中添加如下代码

1
2
3
4
5
6
7
8
9
10
index_generator:
  per_page: 5

archive_generator:
  per_page: 10
  yearly: true	// 这里可不写
  monthly: true	// 这里可不写

tag_generator:
  per_page: 10

打赏功能

随着知识付费的时代到来，越来越多的平台支持打赏功能，而Hexo的各个主题也大多集成了这个功能，所以如果要开启这个功能，只需要在主题配置文件themes/next/_config.yml里做些修改，并添加自己的微信或支付宝收款二维码即可，例如：

1
2
3
reward_comment: 请作者喝杯奶茶！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

禁用打赏文字的抖动

如果你打开了赞赏，并贴上了自己的二维码，然后怀着欣喜的心情尝试着打开自己的博文，并点开赞赏按钮，你会发现当你的鼠标停留在二维码上时，下方的文字会鬼畜般的左右抖动旋转，而一般人的选择就是禁掉它。

所以你需要做的就是注释或者删掉以下代码：

themes/next/source/css/_common/components/post/post-reward.styl
1
2
3
4
5
#QR:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}

生成站点地图

要使用站点地图，需要安装插件：

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

接下来修改站点配置文件

1
2
3
4
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

SEO推送

博客搭建完后，如果希望搜索引擎能够快速地收录我们的博客，那么我们可以利用百度或者Google的站长工具主动推送自己的博客，这里以百度为例，可以开启主题配置文件中的baidu_push配置，使用Next主题自带的SEO优化功能：

1
baidu_push: true

接下来，在themes/next/source/js/src下新建js文件 :sitemap.js，内容为：

1
2
3
4
5
6
7
8
9
10
11
12
// SEO自动推送
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();

保存完成后，还需要在页面中引入该文件，因此在themes/next/layout/_custom/目录的head.swig文件中引入：

themes/next/layout/_custom/head.swig
1
<script src="/js/src/sitemap.js"></script>

文章加密

首先安装 hexo 加密插件：

1
npm install --save hexo-blog-encrypt

然后在站点文件_config.yml中启用：

1
2
encrypt:
    enable: true

之后在你的文章头部添加相应的字段，如password，abstract，message

1
2
3
4
5
6
7
8
9
10
11
12
---
title: Hexo 文章加密
date: 2019-01-04 22:20:13
category: 教程
tags:
  - 博客
  - Hexo
keywords: 博客文章密码
password: hexo-encry-test
abstract: 密码：TloveY
message:  输入密码，查看文章
---

password: 是该博客加密使用的密码 abstract: 是该博客的摘要，会显示在博客的列表页 message: 这个是博客查看时，密码输入框上面的描述性文字

也可以在配置文件中添加默认信息：

1
2
3
4
encrypt:
  enable: true
  default_abstract: 本文为加密文章，内容可能是情感宣泄或收费技术。如果您希望浏览，请进入文章评论区留言或与我联系。
  default_message: 输入密码，查看文章，索取密码请与我联系或赞赏作者！

这样对于每一篇需要加密的文章就不必都在头部添加abstrct和message字段了，只有当你希望对某一篇特定的文章做特殊处理时，在对应文章的头部修改即可。

赞赏是最好的支持与鼓励!