本文章将记录基于Hexo以及Next主题搭建github博客并进行相应优化的全过程。过程中参考了很多他人的文章，详见参考资料。同时，在他人的基础上进行整合或有所修改的，将标记*表示自己进行了相应的修改。

另外，由于本文属于回忆，因此可能有些步骤忘记。同时会记录一些搭建过程中暂时没能解决的问题。

修改文章目录中，子标题太长无法显示全面的问题

在themes\next_config.yml中，搜索关键字toc，修改wrap为true即可

修改日期：2020/12/20

文章代码过长不会自动转行显示的问题

*修改主页中文章的摘要内容字数（unsolved）

他人的设置步骤：

打开themes\next\_config.yml，搜索关键字auto_excerpt，修改length即可修改阅读全文前的字数

1
2
3

auto_excerpt:
	enable: true
	length: 150

但是经过我的测试，没有在_config.yml中找到相应的属性，只找到了

1

excerpt_description: true

目前还不清楚应该怎么修改摘要字数的问题，主页中文章摘要过长了。

修改日期：2020/12/20

*更改页面的字体（含更改google字体库）

打开themes\next\_config.yml，搜索关键字font，并将enable设置为true

修改host:为fonts.useso.com（这是因为如果使用默认的google的字体库，加载起来可能特别慢）

并将global:中的family:设置为自己想要的字体，如：Times New Roman

同时设置字号size:为1

修改日期：2020/12/20

*修改文章底部的#号的标签，改为图标

修改模板themes\next\layout_macro\post.swig

*搜索rel=”tag”> ,在其后添加

1

<i class="fa fa-tag">< /i>

并删除

1

{{ tag_indicate }} 

因此，该行代码变为

1

<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i>{{ tag.name }}</a>

效果图：

修改日期：2020/12/20

*文章加密功能（含直接对tag进行加密）

需要安装插件

1

npm install --save hexo-blog-encrypt

1、对单篇文章进行加密

对文章头添加: password、abstract、message、wrong_pass_message、wrong_hash_message

例如：

2、对某个标签下的文章进行加密

对博客根目录站点配置文件_config.yml文件添加以下字段：

1
2
3
4
5
6
7
8
9

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: 密码正确

注1：配置优先级：文章信息头 > 按标签加密

因此当被加密的tag下某一篇文章希望不要加密时，可在该文章设置password为””，就可取消该文章的加密.

注2：我在测试的过程中发现，在输入了加密网页的密码以后，再重新刷新也不再需要输入密码。同时，如果从单篇文章加密改为对相应的tag加密，利用”hexo s”进行测试时，发现进入文章不需要输入密码，可能是因为之前已经输入过密码了。因此需要换一台设备进行测试。

除此之外，由于Next主题会对文章自动生成TOC目录，因此在使用该插件对文章进行加密后，即使解密也不能正确显示文章的TOC目录，该问题待解决。我尝试使用方法3对**themes\next\layout_macro\sidebar.swig中的toc相关代码进行修改，由于没学过该种编程语言，因此以失败告终。有请大佬提供相关解决方案（请将解决方法发送至我的邮箱（网页左侧个人信息下的E-mail图标即可通过邮箱联系我），感谢感谢！）

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

3、对TOC文章进行加密

参考资料中以landscape主题为例，未找到在Next主题中的修改方法，因此待解决。

方法1-3的参考资料：https://zhuanlan.zhihu.com/p/113235573 & https://github.com/D0n9X1n/hexo-blog-encrypt/blob/master/ReadMe.zh.md & https://xsin.gitee.io/2019/01/11/hexo-blog-encrypt/

4、其他人提及的方法（在本地预览生效，但部署到github上后失效，原因未明）

打开themes\next\layout_partials\head\head.swig文件，并在以下位置：

1

<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

的下一行插入以下代码：

1
2
3
4
5
6
7
8
9
10

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

但是我在实际修改的过程中给，并没有找到他人文中提及的插入代码的位置，因此在head.swig文件的最后部分（{ { next_config()}}的前面）插入了上述代码。在利用hexo s在本地进行预览时，可以生效，但是部署到github上后失效，原因未明。

修改日期：2020/12/20

代码设置高亮

在themes\next\_config.yml中搜索highlight并将enable设置为true。

修改日期：2020/12/20

隐藏网页底部的powered By Hexo / 强力驱动

打开themes\next\_config.yml，并找到powered，设置其为false。

修改日期：2020/12/20

文章置顶功能

先重装一下相关插件：

1
2

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的文章头添加top: true

如：

同时，还需要设置“置顶”字样：

打开themes\next\layout\_macro\post.swig并搜索/

1
2
3
4
5

{% if post.top %}
    <i class="fa fa-thumb-tack"></i>
    <font color=7D26CD>置顶</font>
    <span class="post-meta-divider">|</span>
{% endif %}

如图所示：

注：如果有多篇置顶，需要调整指定的顺序时，可将top设置为一个数值，数值越大越靠前。

效果图：

修改日期: 2020/12/20

Win 10 mail 应用更新邮箱

因为邮箱比较多，有点懒得每次都打开对应的邮箱网页输入密码，希望通过一个客户端管理多个邮箱，因此今天尝试使用win10自带的mail应用。但竟然小小地踩雷了：

明明输入了新的邮箱账户，提示添加成功却没有成功添加上，不停地提示我添加新的账户，没有别的选项。搜索百度好像也没有什么答案，以下记录解决问题的过程。

重装mail应用

首先打开微软应用商店，搜索mail，将原有的mail卸载掉，并重新下载安装

添加邮箱账户

我主要添加了qq邮箱，163邮箱和腾讯企业邮箱。

添加qq邮箱

首先添加qq邮箱：比较简单，点击账户-添加账户，输入邮箱地址和密码即可。

重点需要说明的是163邮箱和腾讯企业邮箱。

添加163邮箱

首先需要确认163邮箱的IMAP/SMTP服务已经开启。

在网页上登录自己的163邮箱，然后选择邮箱设置-POP3/SMTP/IMAP，然后在开启服务：IMAP/SMTP服务中选择“开启”。

按照提示，邮箱将会需要你用手机扫描二维码，发送一条短信到指定的地方。发送短信成功后，将会发放一个授权密码（这个授权密码只会显示一次，因此请妥善保管），复制这个授权密码，回到自己的win10 mail应用，点击账户-添加账户-其他账户POP, IMAP，然后输入自己163邮箱的邮箱地址，然后在密码栏输入这个授权码，点击登录就可以成功添加账户。

添加腾讯企业邮箱

首先同样需要在网页上登录自己的腾讯企业邮箱，进入邮箱设置-客户端设置，将会在设置方法处看到“接收服务器”和“发送服务器”。它们分别是imap.exmail.qq.com和smtp.exmail.qq.com，它们的后面还会跟着括号（使用SSL，端口号XXX）。

此时回到win10 mail应用，点击账户-添加账户-其他账户POP,IMAP，输入自己的企业邮箱地址和密码，然后点击登录，此时还不能正常收发邮件。还需要在管理账户里面，点选一下刚才添加的这个企业邮箱，然后点击更改邮箱同步设置（用于同步内容的选项）-高级邮箱设置（传入和传出邮件服务器信息），此时将会多出“传入电子邮件服务器”和“传出（SMTP）电子邮件服务器”。将刚才找到的接收服务器和发送服务器的网址分别填入（不包括括号及括号内的内容），点击完成-保存就可以连接成功，正常收发邮件了。

typora主题更改以及编辑器字体更改

如何修改一下typora编辑器的主题，还有字体？

准备工作：安装字体

首先需要安装想用的字体，具体过程请直接百度（例如我所使用的是思源宋体）。

更换主题

打开typora编辑器的偏好设置-外观-获取主题，这将直接打开typora官网上已经有的主题。选择一款自己喜欢的进行下载并解压，将里面的.css文件复制，然后在typora编辑器的偏好设置-外观-打开主题文件夹，将复制的.css文件粘贴进去，然后重启typora，就可以在偏好设置-外观-主题那里选择自己想用的主题了。（注：我所使用的是autumus主题，我发现需要将同一个风格的几个.css文件都复制进去，如Autumnus.css Autumnus-dark.css Autumnus-fluence.css，才能选择antumus主题，不知道是不是我操作错误）

更换主题的字体

注：这不等于更换markdown文件所使用的字体，只是更改了编辑器显示的时候用的字体而已。要修改markdown的字体，请自行百度。

用记事本（或写字板、其他代码编辑器等）打开自己目前正在使用的主题对应的.css文件，然后查找“font-family”，将自己想要使用的字体的名字添加到最前面去。例如在night.css文件中，查找font-family，则会找到：

此时这个主题将会首先尝试使用Helvetica Neue字体，如果系统中没有这个字体，就会尝试使用Helvetica字体，以此类推。

想要使用思源宋体，则在最前面添加“思源宋体 CN Medium”, 需要注意的是双引号和逗号都需要使用英文格式的。

而我自己所使用的autumns主题的css文件略有不同，它是先定义了—base-font等的变量，再在之后调用的。

因此添加的字体就需要在这里进行添加，而不是font-family，同样是添加到最前面。

效果图展示（以思源宋体为例）

在学习markdown语法过程中同时练习

使用的Markdown编辑器为：Typora

标题语法：

Markdown语法：#

的个数代表多少级标题

例如## 二级标题

*可选语法：同时，还可以通过使用在文本下方添加任意数量的====号来标识一级标题，通过添加—-号表示二级标题（经测试，Typora并不支持这一语法）

不同的Markdown编辑器在处理#与标题之间的空格方式不同。经测试，Typora在#和标题内容之间需要有空格（但是似乎只是影响在Typora中的渲染，#和内容之间没有空格在提交md文件时依然被渲染为标题）

无空格

同时，经过测试发现，只有在句首的#才被认定为是标题

问：能否设置在句首的#不设定为标题？

答：目前发现的方案是可以在句首加入一个空格。是否存在不加入空格的方案？