2019-05-08 | 理论 & 教程 | UNLOCK

Hexo基础教程(四):功能添加与优化

在参考本文时,你应该已经完成了博客的搭建,部署和基本配置。个人网站已经能够正常工作。

本文主要包括Hexo中一些实用的功能,模块插件等,意在优化博客使用,文中主要涉及两个_config.yml配置文件:站点配置文件(根目录下)和主题配置文件(主题文件夹下),没有特殊说明主题均以Theme-AD为例。

添加RSS

RSS,简易信息聚合,是一种基于XML的描述和同步网站内容的格式。它允许你订阅感兴趣的博客,通过RSS阅读器聚合信息,实时推送内容更新,以有组织的方式快速查看。

安装RSS插件

1
npm install hexo-generator-feed

在站点配置文件_config.yml中找到Extensions,添加:

1
2
3
4
5
6
7
8
9
10
11
# Extensions
## Plugins: https://hexo.io/plugins/
#RSS订阅
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit:
content_limit_delim: ' '

参数的含义:

type:RSS的类型

path:文件路径,默认/atom.xml

limit:展示文章的数量,0或者false代表全部

hub:

content:在RSS中是否包含文章正文内容,true/false,默认为false

content-limit:指定内容的长度作为摘要,仅在content为false和没有自定义的描述出现时生效

content-limit-delim:上面截取描述的分隔符,截取内容是以指定的这个分隔符作为截取结束的标志。在达到规定的内容长度之前最后出现的这个分隔符之前的内容,防止从中间截断

此时,你网站的RSS链接为 域名/atom.xml。

修改主题配置文件,开启RSS页面功能:

1
2
3
4
nav:
-
name: "订阅RSS"
path: "/atom.xml"

代码压缩

不少人使用gulp对博客进行压缩,这里使用插件hexo-all-minifier。这个插件集成了对html,css,js,image的优化,合并重复代码,去除多余空格,用算法压缩图片。压缩后的博客,在加载速度上会有较大的提升。

安装插件

1
npm install hexo-all-minifier --save

在站点配置文件_config.yml中找到Extensions,添加:

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
#文件压缩
html_minifier:
enable: true
ignore_error: false
exclude:

css_minifier:
enable: true
exclude:
- '*.min.css'

js_minifier:
enable: true
mangle: true
output:
compress:
exclude:
- '*.min.js'

image_minifier:
enable: true
interlaced: false
multipass: false
optimizationLevel: 2
pngquant: false
progressive: false

文章链接唯一化

默认情况下,Hexo生成的超链接都是绝对链接。更改文章标题,变更文章所属分类,发布时间等都可能导致文章链接改变,不利于搜索引擎收录,也不利于分享。唯一的永久链接显然是更好的选择。

安装插件

1
npm install hexo-abbrlink --save

在站点配置文件_config.yml中找到permalink,修改为:

1
permalink: articles/:abbrlink/

其中articles/可自行替换。

搜索引擎认为对于一般的中小型站点,3层足够承受所有的内容了,所以蜘蛛经常抓取的内容是前3层,而超过3层的内容蜘蛛认为那些内容并不重要,所以不经常爬取。出于这个原因permalink的配置中最好不要超过2个斜杠。

在站点配置文件中添加:

1
2
3
4
# abbrlink config
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: dec # 进制:dec(default) and hex

Github分支进行多终端工作

我们通过hexo d上传部署到github的是Hexo编译后的文件,也就是本地目录中自动生成的.deploy_git文件夹中的内容,用来生成网页,源文件没有包含在内。

这种情况下,如果我们的电脑坏了,或者换用其他的电脑,没有博客的源文件,就无法进行更新。所以我们可以利用Github的分支系统,将源文件上传至项目仓库的另一个分支。这样,更换电脑时,只需要进行简单配置并同步Github文件,就可以继续使用。

创建分支

在博客项目所在仓库yourname.github.io创建新分支hexo(分支名可自定义),用于存放源文件,我们只需更新hexo分支上的内容即可,master分支在执行hexo d部署时会自动更新。

在该仓库的settings中,可以设置hexo分支为默认分支。这样之后更新hexo分支内容时可以不用每次都指定分支。

初始化仓库

在本地创建文件夹,建议和博客项目放在同一父目录下,方便管理。进入文件夹,打开Git Bash,输入:

1
git clone git@github.com:gzhanuo/gzhanuo.github.io.git .

克隆代码到本地,因为默认分支已设为hexo,所以执行clone操作时只clone了hexo分支的内容。如果hexo不为默认分支,可输入:

1
git clone -b hexo git@github.com:gzhanuo/gzhanuo.github.io.git .

在克隆到本地的代码中,删除除.git文件夹外的所有文件。将之前博客项目中除.deploy_git外的所有源文件拷贝过来。

拷贝过来的源文件中有一个.gitignore文件,用于声明不被git记录的文件。如果没有可以自行创建,添加如下内容:

1
2
3
4
5
6
7
8
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
_config.yml

_config.yml文件中可能包含加密等相关隐私信息,所以不建议上传配置文件。

如果之前通过clone操作下载过主题文件,应删除主题文件夹下的.git文件夹,电脑设置显示隐藏文件,检查是否有该文件夹。因为git不能嵌套上传,可能导致主题文件上传出错。

上传源文件至hexo分支

依次执行以下命令:

1
2
3
git add .
git commit -m "add branch"
git push origin hexo #如果设置hexo为默认分支可执行git push

查看Github对应仓库,博客源文件已上传至hexo分支。

更换电脑操作

更换电脑后,操作流程和之前环境搭建类似。这里仅列出步骤,具体指令代码可参考Hexo基础教程(一):博客搭建与部署

  1. 安装Git
  2. 安装Node.js
  3. 配置SSH
  4. 安装Hexo

Hexo安装后不需要初始化,直接在任意文件夹下,执行:

1
git clone -b hexo git@github.com:gzhanuo/gzhanuo.github.io.git .

在该文件夹中,执行:

1
2
npm install
npm install hexo-deployer-git --save

生成文件,部署到Github:

1
2
hexo g
hexo d

然后就可以开始继续写新的博客。

添加Google Analytics

使用Google分析可以在后台看到你网站的访问数,访问时间,用户分布等信息,可以帮助你更有效地掌握网站情况,更好地进行网站管理。

访问Google Analytics,按照提示填写相关信息,获取跟踪ID。

在主题配置文件中找到analytics:,修改关于google的配置:

1
2
3
4
analytics:
google:
enable: true #开启对Google的自动推送
id: #填写上一步获取的跟踪ID

执行hexo d重新部署网站,在Google分析后台发送测试流量即可在首页看到实时流量报告。

SEO优化(Google)

刚建站时,搜索引擎是没有收录我们的网站的。可以在搜索引擎中输入site:<域名>来查看个人网站是否已被搜索引擎收录。

安装插件

在Git Bash中执行以下命令,该插件用于生成sitemap文件:

1
npm install hexo-generator-sitemap --save

在站点配置文件中添加:

1
2
sitemap:
  path: sitemap.xml

在站点配置文件中找到url,修改为个人网站的url:

1
2
3
4
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://indexmoon.com
root: /

添加robots文件

在站点source文件夹下新建robots.txt文件,文件内容格式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
User-agent: *
Allow: /
Allow: /archives/
Allow: /tags/
Allow: /categories/
Allow: /about/
Allow: /friends/

Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendor/
Disallow: /styles/

Sitemap: https://indexmoon.com/sitemap.xml

robots是站点与spider沟通的重要渠道,站点通过robots文件声明本网站中不想被搜索引擎收录的部分或者指定搜索引擎只收录特定的部分。详细信息可以参考百度搜索资源平台给出的解释

执行hexo d重新部署后,在博客根目录public文件夹下可以看到生成的sitemap.xmlrobots.txt文件。你可以在百度搜索资源平台检测robots.txt文件是否能正常工作。

提交站点到Google

打开Google SearchConsole,添加个人网站地址,资源类型可视个人情况选择,根据提示完成验证。

点击左侧站点地图,输入站点地图网址,确认提交。

验证站点是否被收录

点击左侧网址检查,输入网站域名下的任意网址,查看显示结果。

在Google中输入site:<域名>查看搜索结果。

Google抓取网页需要一定时间,站点地图提交后可能不会立即编入索引。如果验证结果没有收录,可以在几分钟后再次验证。

至此,你的个人网站已被Google收录。如果你对站点地图文件做出了更改。Google会在下次抓取你的网站时发现你的更改,所以不必重新提交已知的站点地图。

开启SEO优化

为了使网站更容易被搜索引擎收录,获得更高SEO,主题提供了百度、谷歌和360这3种搜索引擎的自动推送服务。在主题配置文件中找到analytics,开启推送服务:

1
2
3
4
5
6
7
8
9
analytics:
baidu:
enable: true #开启对Baidu的自动推送
google:
enable: true #开启对Google的自动推送
id: #Google跟踪代码的id
"360":
enable: true #开启对360的自动推送
id: #360跟踪代码的id

文章内图片处理

在使用Markdown写文章时,图片是不能直接上传的。一般来说,可以手动上传至七牛云,再把链接写到Markdown中;或者通过修改站点配置文件在新建Markdown时创建同名文件夹,将图片放入该文件夹中,通过相对路径引用,部署时和文章一同上传至Github。

一键上传七牛云

如果你使用七牛云处理图片,可以试一试一键贴图工具qimage-win,支持本地文件、截图及网络图片一键上传七牛云,并粘贴资源链接至当前编辑器。有Windows和Mac两个版本。

按照要求配置后,使用自定义快捷键即可上传图片至七牛云,同时返回图片引用。

本地上传

方法一

如果你添加本地图片,需要进行如下配置:

在站点配置文件_config.yml中找到post_asset_folder,设置为true。之后在新建Markdown文件时,Hexo会自动创建一个与该文件同名的文件夹,你可以将与文章相关的资源放在此文件夹中,在文章中方便地引用。

在博客根目录下打开Git Bash,执行:

1
npm install hexo-asset-image --save

运行hexo n "xxx"创建新Markdown文件,查看/source/_posts文件夹,存在xxx.md和一个xxx文件夹。将所需图片,如test.png,放入xxx文件夹,然后只需在xxx.md中按照Markdown的语法引入图片即可:

1
![图片描述信息](xxx/test.png)

依次执行以下命令:

1
2
3
hexo clean
hexo g
hexo s

访问http://localhost:4000查看是否有图片显示,确认无误后执行hexo d部署到远程仓库,访问个人网站即可看到图片。

方法二

上述方法可以解决本地图片的使用问题,但为每个文章建立同名文件夹不便于管理。你可以在本地source文件夹下建立images文件夹,将文章中用到的所有图片放置在同一文件夹下,上传至远程仓库,此时无需修改站点配置文件,也不需要安装插件。

同时,主题提供了配置静态图片CDN的功能,更改主题文件夹下的package.json文件的imgcdn字段,例如:

1
2
3
{
"imgcdn": "https://indexmoon.com/blog-static"
}

文章中如果使用了图片资源,例如![](/images/test.png)。都会被替换为https://indexmoon.com/blog-static/images/test.png

借助此功能,可以将静态图片资源部署在CDN或者其他服务器上,文章仓库仅仅存放文章对应的Markdown。避免随着文章数量的增加,静态图片资源造成的仓库大小不断膨胀。

注意事项

如果你使用方法一上传本地图片,同时又使用了文章链接唯一化的插件,你可能会发现,图片并不能正常显示。我们现在假设有一Markdown文件标题为test.md,其同名文件夹下有一图片为indexmoon.png,在Markdown文件中引用该图片的语法为![](test/indexmoon.png)

进入博客根目录下的node_modules文件夹,找到hexo-asset-image,也就是我们安装的图片上传插件,打开文件夹下的index.js文件,其内容如下:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
return str.split(m, i).join(m).length;
}

hexo.extend.filter.register('after_post_render', function(data){
var config = hexo.config;
if(config.post_asset_folder){
var link = data.permalink;
var beginPos = getPosition(link, '/', 3) + 1;
// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
var endPos = link.lastIndexOf('/') + 1;
link = link.substring(beginPos, endPos);

var toprocess = ['excerpt', 'more', 'content'];
for(var i = 0; i < toprocess.length; i++){
var key = toprocess[i];

var $ = cheerio.load(data[key], {
ignoreWhitespace: false,
xmlMode: false,
lowerCaseTags: false,
decodeEntities: false
});

$('img').each(function(){
// For windows style path, we replace '\' to '/'.
var src = $(this).attr('src').replace('\\', '/');
if(!/http[s]*.*|\/\/.*/.test(src)){
// For "about" page, the first part of "src" can't be removed.
// In addition, to support multi-level local directory.
var linkArray = link.split('/').filter(function(elem){
return elem != '';
});
var srcArray = src.split('/').filter(function(elem){
return elem != '';
});
if(linkArray[linkArray.length - 1] == srcArray[0])
srcArray.shift();
// src = srcArray.join('/');
src = srcArray.pop();
$(this).attr('src', '/' + link + src);
}
});
data[key] = $.html();
}
}
});

从代码中可以看出,该插件通过截取永久链接link中域名后面的部分,与文章中所使用的图片地址src拼接,获得HTML文件中图片的正确src

Hexo默认的永久链接格式为::year/:month/:day/:title/,假设发布时间为5月8号,此时这篇文章发布后生成的永久链接为http://yourname.github.io/2019/05/08/test/,代码运行后得到的linkArray[2019,05,08,test]srcArray[test,indexmoon.png],生成的HTML文件中图片的引用结果为<img src="/2019/05/08/test/indexmoon.png">,这时图片可以正常显示。

当我们使用插件后,Hexo永久链接格式为articles/:abbrlink/,因为abbrlinktitle不等,第42行代码没有执行,得到的图片引用结果为<img src="/articles/abbrlink/test/indexmoon.png">,路径不存在,所以无法正常显示图片。

解决方案有两个,一是将代码中第43行的src = srcArray.join('/');改为src = srcArray.pop();,Markdown文章中图片引用格式不变;二是不改动代码,Markdown文章中引用图片时直接使用![](indexmoon.png),去掉路径中同名文件夹那一层。

参考资料

hexo摸爬滚打之进阶教程

Theme Art Design中文文档

hexo史上最全搭建教程

评论加载中