hexo主题优化

文章目录
  1. 1. 前言
  2. 2. 选择主题
  3. 3. 添加“关于”
  4. 4. 添加RSS
  5. 5. 添加sitemap
  6. 6. 添加多说
  7. 7. 添加头像
  8. 8. 添加favicon
  9. 9. archieves数量
  10. 10. Categories
  11. 11. 添加文章目录
    1. 11.1. 修改article.ejs
    2. 11.2. 修改article.yml
    3. 11.3. 使用
    4. 11.4. 新的问题
    5. 11.5. 奇怪现象
  12. 12. 书写代码块
  13. 13. 文章模板
  14. 14. 参考文档

前言

大概一年前开始使用hexo,主题一直使用jacman。后来Hexo更新到3.0,主题也跟着更新,但是,懒惰的小编并没有参与这一更新活动。
如今,安装了hexo3.0,问题来了——主题不匹配。当年千辛万苦优化过的主题,又要重新搞起!

选择主题

啊嘞,几个月不见,hexo已经如此牛逼!不仅官网更加高端大气上档次,而且主题数量翻了几翻!
https://github.com/hexojs/hexo/wiki/Themes ,可以看到,群众的力量是巨大的!
换个主题,换个心情,这次我选择了yilia,简洁大气!

添加“关于”

hexo new page "about"
编辑hexo/source/about/index.md,
编辑hexo/themes/yilia/_config.yml,添加如下:

1
2
menu:
关于: /about

添加RSS

npm install hexo-generator-feed --save

注意,后面的参数--save绝对不能省,否则该插件信息不会写入package.json。
hexo cleanhexo g,查看public文件夹,可以看到atom.xml文件。

添加sitemap

npm install hexo-generator-sitemap --save
hexo cleanhexo g,查看public文件夹,可以看到sitemap.xml文件。
sitemap的初衷是给搜索引擎看的,为了提高搜索引擎对自己站点的收录效果,我们最好手动到google和百度等搜索引擎提交sitemap.xml。

添加多说

http://duoshuo.com/ ,注册一个账号。登录,添加新站点voidking。
在工具,获取代码界面,可以看到通用代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"voidking"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end -->

var duoshuoQuery = {short_name:"voidking"};中的voidking,就是我们要用到的duoshuo-key,也有人称之为duoshuo_shortname。
打开hexo/themes/yilia/layout/_partial/post/duoshuo.ejs,可以看到:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="duoshuo">
<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="<%=key%>" data-title="<%=title%>" data-url="<%=url%>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"<%=theme.duoshuo%>"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- 多说公共JS代码 end -->
</div>

我们需要填入的,是<%=theme.duoshuo%>的值,那么,在哪里填入呢?在hexo/themes/yilia/_config.yml文件中。
是这样的,我们可以认为,_config.yml就是theme,而在_config.yml中写入duoshuo: voidking,就是给duoshuo赋值为voidking

当然,你也可以直接在duoshuo.ejs中把<%=theme.duoshuo%>替换为voidking。但是不建议这么做,因为这样破坏了作者可复用性设计。

添加头像

在hexo/themes/yilia/source/img中添加一个图片headportrait.jpg,然后编辑hexo/themes/yilia/_config.yml:

1
2
#你的头像url
avatar: "img/headportrait.jpg"

添加favicon

使用Axialis IconWorkshop,制作一个16X16的favicon.png。放置到hexo/themes/yilia/source中,然后编辑hexo/themes/yilia/_config.yml:

1
favicon: /favicon.png

添加好之后,本地测试,只有主页会显示favicon,其他页面不显示,不知道是什么原因。

找了很久没找到解决办法,狠了狠心,直接上传。惊奇地发现,上传到gitcafe之后,所有页面都可以显示favicon。

archieves数量

要修改hexo主题,多少要懂得一点hexo的结构和原理。
全局配置文件hexo/_config.yml中有这么一段:

1
2
per_page: 5
pagination_dir: page

这里的per_page,同时设置index、archive、tag、categoriy。如果想要单独设置,可以这么写:

1
2
3
4
5
6
7
8
9
10
11
12
13
index_generator:
per_page: 5

archive_generator:
per_page: 200
yearly: true
monthly: true

tag_generator:
per_page: 10

category_generator:
per_page: 10

Categories

Litten大哥,你这不要Categories是什么节奏?修改起来,非常不容易哇!
需要修改的文件有hexo/themes/yilia/source/js/main.jshexo/themes/yilia/source/css/_partial/main.stylhexo/themes/yilia/layout/_partial/left-col.ejs。也许还有别的文件,修改了一下午,以失败告终。。。
总之,还是能力不够,看来得找时间系统学习一下hexo主题的制作了。。。先放着吧!

添加文章目录

TOC (Table of contents) ,中文翻译做目录。之前用jacman,感觉目录很方便,可以很快定位文章内容,尤其对于长文章来说。但是,yilia貌似没有集成,那就自己添加吧!查找资料,居然找到了好友twiceYuan的写的教程,世界真小哇!
详情请访问参考文档,摘录twiceYuan的教程如下:

修改article.ejs

打开hexo/themes/yilia/layout/_partial/article.ejs,在<%- post.content %>前面插入:

1
2
3
4
5
6
<% if(post.toc !== false){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<%- toc(post.content) %>
</div>
<%}%>

这里加了一个post.toc的判断,也就是说,只有在启用toc的post会出现目录,而不是每篇文章都出现。

修改article.yml

打开hexo/themes/yilia/layout/source/css/_partial/article.yml,在最后插入:

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
/*toc*/
.toc-article
background #eeeeee
margin 2em 0 0 0.2em
padding 1em
border-radius 5px
.toc-title
font-size 120%
strong
padding 0.3em 1
ol.toc
width 100%
margin 1em 2em 0 0
#toc
line-height 1em
font-size 0.8em
float right
.toc
padding 0
li
list-style-type none
.toc-child
padding-left 0em
#toc.toc-aside
display none
width 13%
position fixed
right 2%
top 320px
overflow hidden
line-height 1.5em
font-size 1em
color color-heading
opacity .6
transition opacity 1s ease-out
strong
padding 0.3em 0
color color-font
&:hover
transition opacity .3s ease-out
opacity 1
a
transition color 1s ease-out
&:hover
color color-theme
transition color .3s ease-out

使用

编辑.md文档,如果要使用文章目录,就要文章开头添加toc属性并且设置为true。

1
2
3
4
5
title: hexo主题优化
date: 2015-05-31 16:22:12
tags:
categories: 专业
toc: true

新的问题

小伙伴很靠谱,这个方法可用!但是,新的问题来了,文章目录特别紧凑,不够人性化,应该是因为主题差别。于是,参考格式良好的css文件,改写了article.styl的/*toc*/部分:

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
/*toc*/
.toc-article{
background #eee
margin 0 0 0 0.2em
padding 1em
border-radius 5px
-webkit-border-radius 5px
strong{
padding 0.3em 0
}
}
#toc{
line-height 1.5em
font-size 1em
float right
ol{
margin-left: 0
}
.toc{
padding 0
li{
list-style-type none
}
}
.toc-child{
padding-left 1.5em
}
}

问题完美解决,看来,不同的theme,添加TOC的时候,确实需要个性定制。

奇怪现象

添加目录后,出现了一个奇怪的现象:如果一篇文章在主页展示全部内容,也就是没有添加<!--more-->,那么,该文章就会自动生成目录,无论文章中有没有添加toc属性。
且不去管它,等到技术更加牛逼了再来处理。……等一下,貌似有了灵感,修改article.ejs如下:

1
2
3
4
5
6
<% if(post.toc && post.toc !== false){ %>
<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<%- toc(post.content) %>
</div>
<%}%>

修改完成,执行命令:

hexo cleanhexo ghexo s

查看效果,主页目录没有了,Perfect!

书写代码块

一直以来,写博客的时候,如果用到代码块,都是用三个反引号包围。现在发现,似乎出现了问题。如果连续两个代码块,那么,经常出现一种情况:判断代码块不准确,两个代码块被当成了一个代码块。
而如果代码块使用缩进一个TAB的方法,那么,代码块前面就会没有行号。
。。。麻烦的问题,且不去管它。。。

文章模板

打开hexo/scaffolds/post.md,可以看到:

1
2
3
4
title: {{ title }}
date: {{ date }}
tags:
---

如果我们想要在每次生成.md文件的时候,自动生成categories和toc,可以修改如下:

1
2
3
4
5
6
title: {{ title }}
date: {{ date }}
tags:
categories:
toc: true
---

参考文档

hexo博客的优化技巧续
http://zipperary.com/hexo-guide-5/


如何在谷歌站长工具提交网站地图sitemap.xml
http://jingyan.baidu.com/article/066074d669a958c3c31cb076.html


Hexo 3.0 静态博客使用指南
http://segmentfault.com/a/1190000002592993


hexo你的博客
http://ibruce.info/hexo-your-blog/


twiceYuan:为Hexo添加文章目录