MLi's Blog

Hexo学习4-hexo站点的丰富和优化

安装主题

安装主题的主要流程:将主题包下载下来,放到themes文件夹下,然后在_config.yml里进行配置, 以next主题为例进行说明:

  • 在hexoBlog目录下进行git克隆

    1
    git clone https://github.com/iissnan/hexo-theme-next themes/next

    这样主题就自动下载到next文件夹了(也可以手动下载主题,然后解压缩)

  • 修改hexoBlog目录下的_config.yml文件:theme: next

  • 如果要修改next主题的一些配置,则需要修改next文件夹下的_config_yml文件。

我比较喜欢的两个主题有

添加多说分享和评论功能

开始以为添加百度分享分享到微博、微信等,但是发现next主题的百度分享不支持https的站点,就使用多说分享了。首先去多说用微信或者 qq登陆,设置shortname, 然后在站点的_config.yml(注意不是主题下的_config.yml)添加两行(第一行设置评论,第二行设置分享)

duoshuo_shortname:自己设置的shortname

duoshuo_share: true

具体设置参见next主题的说明文档。如果还是不行的话,可能和其他插件冲突,比如 disqus,检查下主题下的_config.yml和站点下的_config.yml。

添加版权申明

参考”为 Next 主题文末添加版权等信息“,只不过我的是在next\layout_macro的post.swig的{\% endmacro \%}那行前面加上如下的代码

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
<div class="page-footer">
{% if not is_index %}
<div id="eof" class="print-invisible">
<hr class="eof">
</div>
<div class="copyright" style="clear:both;">
<p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
<p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
<p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a></p>
<p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/" title="Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)">Attribution-NonCommercial 4.0</a></p>
<p><span>转载请保留以上信息。</span></p>
</div>
{% endif %}
{% if not is_index and (post.prev or post.next) %}
<div class="post-nav">
<div class="post-nav-prev post-nav-item">
{% if post.prev %}
<a href="{{ url_for(post.prev.path) }}">{{post.prev.title}}</a>
{% endif %}
</div>
<div class="post-nav-next post-nav-item">
{% if post.next %}
<a href="{{ url_for(post.next.path) }}">{{post.next.title}}</a>
{% endif %}
</div>
</div>
{% endif %}
</div>

站点的menu的链接失效都指向主页的解决方案

站点的_config.yml里的必须为relative_link: false , 否则menu的那些链接都会失效。

git无法添加themes/next的解决方案

在站点根目录(我的为hexoBlog)下,新建git仓库,发觉无法添加”themes/next”下的文件,会提示

fatal: Pathspec ‘themes/next/_config.yml’ is in submodule

这时候因为在next下有个submodule,需要先进入到这个目录运行更新子模块,命令如下:

1
2
3
cd themes/next
git --git-dir=.git --work-tree=. add .
git --git-dir=.git --work-tree=. commit -m "update next theme"

然后返回到站点根目录,添加,具体如下:

1
2
3
4
cd ..
cd ..
git add themes/next
git commit -m "update blog"

详见:Git: fatal: Pathspec is in submodule

添加到搜索引擎

参考Hexo博客提交百度和Google收录让Baidu和Google收录Hexo博客,站点能够被google站点工具验证成功,一定要记得将验证文件放到主题下的source文件夹下(themes\next\source),而不是博客的source文件夹(hexoBlog\source)下,否则验证不成功。

设置首页只显示预览,不显示全文

设置主题下的_config.yml, 搜索auto_excerpt,将enable改成true。

增加首页文章置顶的功能

node_modules/hexo-generator-index/lib/generator.js里的内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals) {
var config = this.config;
var posts = locals.posts.sort(config.index_generator.order_by);
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

将其替换成

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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

然后的具体的博客的源文件(.md)开头加上top项,当top的值取0的时候,表示默认排序,即是按照时间顺序来排序,当top的值取1到无为置顶文件限大的时候,值最高的md文件即是置顶文章。比如说

1
2
3
4
5
title: 索引页
date: 2017-01-25T10:12:56.000Z
categories: 建站
top: 2
tags: hexo

注意只能首页置顶,其他里还是置顶不了。参考资料:hexo博文置顶技巧

修改文章内链接文本样式

修改文件themes\next\source\css\_common\components\post\post.styl ,添加如下css样式:

1
2
3
4
5
6
7
8
9
.post-body a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}

参考此处

我进行的相关配置总结