个人博客，高级功能

发表于 | 阅读次数:
字数统计: 8.4k | 阅读时长约 0:08 分钟

前言：

对博客做一些扩展，增加一些交互功能，如搜索、评论、订阅等

教你如何多端同步修改，博客源码托管

站内搜索

LocalSearch

安装

npm install hexo-generator-searchdb --save

站点配置文件：

1
2
3
4
5
search:
 path: search.xml
 field: post
 format: html
 limit: 10000

主题配置文件：

1
2
local_search:
 enable: true

aloglia

流程参考Next主题官网第三方服务

GitHub-algolia

过程官方已经说明，这里补充一些细节

有效期

免费版 从 创建 开始 31天。

添加index

  1. 左侧菜单选中 Indices 进入页面
  2. Indices 页面右上角 New INDEX 按钮

如：personal_blog，此项一定要有，需要添加到站点配置

编辑ApiKey 权限

  1. 左侧菜单选中 API Keys 进入 页面
  2. API Keys 页面 选项卡 选中 ALL API KEYS 选项
  3. 多个API Key时，指定一个进行修改；

  4. 指定API Key 最右侧 Actions ，点击修改

  5. ACL：选中 Search

注意：这里与 algolia-github 有出入，我们需要选中 search

不选中此项，站点搜索输入无结果

当前 api 所有权限：

Indices 选取我们前面添加的 indexName，可选

Update保存

复制id及api key

此处配置时需要注意保密
Search-Only API Key 是我们需要添加到配置中的，也是我们上面编辑过权限的

站点配置

1
2
3
4
5
6
algolia:
 applicationID: **********
 apiKey: a68d6525********** #替换Search-Only API Key
 indexName: personal_blog #替换indexName
 chunkSize: 5000
 adimnApiKey: ********** #可不填，没实际意义

启用Algolia

1
2
3
4
5
6
7
8
algolia_search:
  enable: true
  hits:
    per_page: 10
  labels:
    input_placeholder: 开始你的搜索... #自定义搜索默认
    hits_empty: "没有你要找的：${query} "#无结果提示
    hits_stats: "找到 ${hits}条结果，用时 ${time}毫秒" #结果提示

导入博客到index

博客根目录

  • 安装插件

    npm install --save hexo-algolia

  • 配置环境变量

使用你自己的Search-Only API Key

export HEXO_ALGOLIA_INDEXING_KEY=******************

注意：windows 环境的命令是export 不是set

  • 更新index

hexo algolia

当出现

1
2
3
INFO  [Algolia] Identified xx pages and posts to index.
INFO  [Algolia] Indexing chunk 1 of 1 (xx items each)
INFO  [Algolia] Indexing done.

表明博客导入成功

  • 注意：

1.apikey或applicationid不一致这里会出错。需与algolia官网获取的保持一致

2.博客文章发生变化需要清空原index,重新更新index,否则将出现搜索不到或已删除、变更之前的内容

3.当出现下面的提示时，表明key 发生变化或者不对，需要重新配置apikey变量

验证搜索效果

hexo clean && hexo g && hexo s

上面的两种方式均为在next主题下弹框方式，其他搜索方式待补充

评论系统

评论系统由于多说、网易跟帖已关闭，目前已知有三种方式可选，Disqus，gitment,来必力
下面依次说明启用方式

Disqus

Disqus,需科学上网

由shortname作为唯一标识

获取’shortName’

  • 右侧，Admin 选项

  • 进入创建页面

  • 注册网址，编辑’shortName’,保存

  • 进入Settings/general页面,确认’shortName’

disqus可以创建多个站点，根据需要配置不同类型与’shortName’

启用评论系统

添加到主题配置

1
2
3
4
disqus:
 enable: true #启用
 shortname: ********#替换你自己的shortname
 count: false #自行决定

验证效果,必须科学上网

对用户友好处理

原理：
通过按钮点击加载Disqus，使用主题默认样式

[参考][参考]
layout_third-partycomments\disqus.swig定义方法

1
2
3
4
5
6
7
var disqus = {
load : function disqus(){
 //原disqus核心代码

 $('#load-disqus').remove();
 }
}

themes\next\layout_partials\comments.swig增加代码，添加定义好方法：

1
2
3
<div style="text-align:center;">
<button class="btn" id="load-disqus" onclick="disqus.load();">加载 Disqus 评论</button>
</div>

修改后的 disqus.swig 代码为：

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
{% raw %}

#省略
{% if page.comments %}
    <script type="text/javascript">
	  var disqus = {
	  load : function disqus(){

		var disqus_config = function () {
		  this.page.url = '{{ page.permalink }}';
		  this.page.identifier = '{{ page.path }}';
		  this.page.title = '{{ page.title| addslashes }}';
		};
		var d = document, s = d.createElement('script');
		s.src = 'https://{{theme.disqus.shortname}}.disqus.com/embed.js';
		s.setAttribute('data-timestamp', '' + +new Date());
		(d.head || d.body).appendChild(s);

		$('#load-disqus').remove();
		}

	}
   </script>
{% endif %}
#省略

{% endraw %}

来必力

获取data-uid

首次登录时 chrome 反应比较慢，建议换其他浏览器，注意发送到注册邮箱的验证码

选择安装版本，选择个人版，获取data-uid

启用

主题配置，打开livere_uid，填写uid

注意：
此时需要关闭主题配置启用的其他评论系统，原代码逻辑采用的是只开启一种评论系统

验证

增加开关控制

  • 主题配置
1
2
3
livere:#新增
    enable: true#新增，控制评论显示
    livere_uid: xxxxxxx
  • livere.swig 模板修改

增加theme.livere.enable引用

1
2
3
4
5
6
{% raw %}

{% if page.comments and theme.livere.enable and theme.livere.livere_uid  %}
{% endif %}

{% endraw %}
  • comments.swig 模板

原theme.livere_uid
变更为：theme.livere.livere_uid

注意：
上述评论系统代码在主题更新到6.0之后会有变化

双评论系统实现原理不变，具体方案有变化

gitment

RSS

安装插件

npm install hexo-generator-feed --save

主题修改

rss: /atom.xml

效果:

chrome浏览器没做解析，所以不用关心显示问题，正常现象

firefox ，ie浏览器显示正常，效果不太一样。可自行验证

seo 相关

文章尽量为英文名称，短路径，修改站点配置，permalink如下：

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite
root: /
permalink: :title.html
permalink_defaults:

多端同步Hexo源文件

各网站需添加访问公钥，这里演示三个比较流行的代码托管网站，github ，gitee ,coding

多仓库操作

删除本地已关联的origin仓库

git remote rm origin

关联远程仓库

  • coding 需新建仓库，使用此仓库名称与本地关联

  • gitee 与coding 由于可以将仓库设置为私有，因此可以将源码上传，

  • 发布地址上述3个网站需要有选择性添加

    ​

下面演示三个都关联,gitee、coding 新建仓库，注意仓库名称与用户名称保持一致

1
2
3
4
5
6
7
8
9
10
11
$ git remote add github git@github.com:username/repo.git
$ git remote add gitee git@gitee.com:username/repo.git
$ git remote add coding git@git.coding.net:username/repo.git

$ git remote -v
coding  git@git.coding.net:username/repo.git (fetch)
coding  git@git.coding.net:username/repo.git (push)
gitee   git@gitee.com:username/repo.git (fetch)
gitee   git@gitee.com:username/repo.git (push)
github  git@github.com:username/repo.git (fetch)
github  git@github.com:username/repo.git (push)

多个仓库部署发布

参考hexo同时部署到coding(gitcafe)和github

若同时发布

  • 站点配置：
1
2
3
4
5
6
7
repository:
  #发布到github
  github: git@github.com:username/repo.git
  #发布到gitee
  gitee: git@gitee.com:username/repo.git
  #发布到coding
  coding:git@git.coding.net:username/repo.git

注意： 由于coding有广告，免广告需单独修改主题配置，站点发布仓库需区分处理
若单仓库发布

站点配置不变

repository: git@github.com:username/repo.git

  • GitHub

    优点：仓库数量不限，

    缺点：仓库公开，任何人都可以随意fork，国内访问速度慢，容量限制

    新建仓库，推送本地代码

  • coding

    优点： 据说访问速度快

    缺点： 无法直接导入仓库，仓库数量限制，256m容量限制，想更高需软妹币

    新建仓库，推送本地代码

    注意：Hosted by Coding Pages 免广告页面申请需单独配置，最简单的只需修改主题配置custom_text即可

    文字形式：

    主题配置

1
2
3
custom_text:
             #发布到coding需打开，发布到除coding之外的其他托管网站，可以注释掉
             Hosted by <a href="https://pages.coding.me">Coding Pages</a>

图片形式：可参考coding官网

  • Gitee

    优点：仓库可以为私有，安全 ,企业用户

    缺点：仓库超400m，限制svn访问

    可直接从github 导入仓库，或上述方法

  • 注意
  1. gitee分支属性需设置为常规分支，否则其他端无法读写代码
  2. coding 分支属性设置之后无法变更，谨慎操作
  3. 经验证发现coding、gitee仓库名需与用户名一致，否则css失效
  4. gitee 与coding发布站点需启用pages

上传源码

将本地当前所在分支上传到远程指定分支

  • 源码上传到gitee

分支为hexo

git push gitee hexo

  • 源码上传到coding

git push coding hexo

注意敏感信息配置文件不要上传，当然仓库为私有的话，就无所谓了

由于github只能公开仓库，因此源码不再上传到github

备份流程

参考cherry

自行修改备份源文件仓库地址，github、gitee 、coding

备份源文件流程

配置原.gitignore文件，添加需要忽略的文件

如：关键信息、文章源文件、配置等

我的配置：

1
2
3
4
5
6
7
8
9
10
11
12
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
/.deploy_git
/_config.yml
next.yml  
package.json
package-lock.json

忽略原则可自行配置

站点目录下删除自带.git文件夹

1
2
3
git init` #创建仓库

git checkout -b hexo #创建并切换到hexo分支

注：此分支用于存储需要同步的源文件，此分支是否为默认分支大何影响，非默认分支时我们在push时指定该分支，远程master分支属于站点分支，不能存储源文件，当我们本地编译发布时会自动更新，无需操心

1
2
3
4
5
6
7
8
9
10
11
12
13
14
git add .
git commit -m "添加源文件"

#关联到gitee
git remote add gitee git@gitee.com:<username>/<repo>.git

#关联到coding
git remote add coding git@git.coding.net:<username>/<repo>.git

#推送代码
git push --set-upstream gitee hexo
或`git push gitee hexo` :push到远端

git push coding hexo

备份主题文件

  • 如果定制程度不高，仅修改了配置文件，可以采用DataFile
    的方式备份

即：将主题配置修改过的信息单独存放于\source_data\next.yml文件，原主题配置文件改为override： true

  • 如果主题定制程度比较高的话，建议使用下面的方法进行备份，注意，不要泄露主题配置文件内的敏感信息

参考

主题需先fork 到自己的github仓库，删除git 及.gitignore文件，可直接push 到博客源仓库，不删除这俩文件，可push到自己的fork 仓库

按上述方法push效果如下图：

注意：
经试验证实，搭建博客时clone 的主题文件属于Next 官网，我们在上传本地源文件时即使删除了.git等文件也无法成功上传 ，此时我们自己修改后的主题文件需要备份，再使用上面提到的方法，覆盖修改过的文件后再上传

关于主题更新的问题

待研究出可行方案再补充
目前的一个思路是：fork后clone 的本地仓库保留，next官网更新主题后可直接远程拉取最新提交，再与本地比对合并，有机会可以验证一下

其他端后续操作

  • 本地无仓库代码时

git clone ,
无需 init，因为已经包含了原git仓库

  • 本地已存在仓库时

    git pull 时，指定远程仓库分支

如：

coding ：git putll coding hexo

gitee : git pull gitee hexo

github: git pull github hexo

  • 推送代码

coding:

git push coding hexo

gitee:

git push gitee hexo

github:

git push github hexo

插件总结

自动部署Git 插件

npm install hexo-deployer-git --save

分页

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

文章字数统计阅读时长

npm install hexo-wordcount --save

搜索

localSearch

npm install hexo-generator-searchdb --save

algolia

npm install --save hexo-algolia

至此，Hexo 搭建博客相关内容告一段落，剩下的就是看到好玩的东西会临时加一下到博客，同步更新实现方案

博客文章添加代码且高亮方法

md文件引入代码

代码高亮

站点配置：

1
2
3
4
5
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

站点加速

关闭默认字体

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
font:
  enable: false

  global:
    external: false
    family: Lato
    size:


  headings:
    external: false
    family:
    size:


  posts:
    external: false
    family:


  logo:
    external: false
    family:
    size:

  codes:
    external: false
    family:
    size:

浏览器自动部署

使用hexo的hexo-browersync插件
安装插件：npm install hexo-browersync --save
hexo s

吃水不忘挖井人 ，感谢以下大神

南尘 | Zippera | diygreen | cherry | 知乎| ehlxr | chalkit

完结撒花