Hongjing's Blog

Hello, world

0%

基于Hexo搭建gitblog心得

置顶 | 发表于 更新于 阅读次数：
本文字数： 2.2k 阅读时长 ≈ 2 分钟

本文章将记录基于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

------ The ending ------