lanbos'blog

hexo装饰(二)

设置分类列表

在_config.yml中设置categories:会让文章属于哪个分来,如果分类用了中文的话,路径也会出现中文,这不是我们想看到的效果,这时在配置文件中的Category & Tag可以更改分类的路径,类似于:

1
2
3
4
5
6
7
# Category & Tag
default_category: uncategorized
category_map:
编程: programming
生活: life
其他: other
tag_map:

light主题格式优化

light主题的引用模块和强调模块不太符合我的审美,找到了/themes/light/source/css/_partial/article.styl,后面加入

1
2
3
4
5
6
7
8
9
10
11
.entry
em
background #ddd
font-style normal
padding 0 4px
article .entry blockquote
border-left 5px solid #ddd;
background #eee;
font-size: 14px;
padding: 5px 30px 15px;
text-align: left;

其实就是对css格式的更改,这里要吐槽一下styl这种格式,一看就是python和ruby开发者搞出的东西,类似于jade这种反人类的语法,牺牲开发效率体现优雅。。。

light主题增加文章导航

网上找了写增加导航的方法,但是不适用与light主题,自己看了下官方api,文章导航主要借助了hexo提供的辅助函数toc:

1
2
3
<%- toc(str, [options]) %>
<!-- 事例-->
<%- toc(page.content) %>

其实就是在toc函数中传入内容就行了。导航的位置根据不同的主题略有不同,网上很多主题是直接放在了/layout/_partial/article.ejs中,但是对于类似于light这样左右布局的主题,导航放在文章区域不太好调控样式,这样的主题导航适合放在右侧的sidebar中。但是直接放在sidebar中有一个问题,因为sidebar不仅仅在详情页面出现,而且会在主页和列表也出现,直接用上述方法的话在静态化编译的时候hexo直接会报错,而且导致主页和列表页无法打开,为了解决这个问题,引入了辅助函数:

1
<%- is_post() %>

通过这个函数可以判断页面是否是详情页。
所以给light主题在右侧侧边栏添文章导航的方法是:
1.在/themes/light/layout/_widget中新建文件toc.ejs
2.在toc.ejs中填入以下代码:

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

3.在/themes/light/_config.yml中更改相关内容:

1
2
3
4
5
widgets:
- toc #新增文章导航
- search
- category
- tagcloud

4.在/themes/light/source/css/_partial/archive.styl中修改文章导航的样式比如增加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#toc
background #fff
box-shadow 1px 2px 3px #ddd
padding 15px 20px
line-height 1.6
font-size 14px
margin-bottom 30px
strong
font-size 15px
ol
margin-top 5px
margin-left 0
.toc
padding 0
li
list-style-type none
.toc-child
padding-left 20px

5.在/themes/light/layout/layout.ejs中找到

1
<aside id="sidebar" class="alignright"><%- partial('_partial/sidebar', {}, {cache: true}) %></aside>

cache:true改为cache:false因为这里调用了缓存机制,不关闭缓存机制的话在文章页面会继承首页的sidebar,文章列表不会出现。

文章导航优化

这样一个light主题的文章导航的最基本样式就添加完成了,但是发现现在的文章导航是固定在sidebar第一块位置上的,当文章很长时每次还得拖回到顶部去查看文章导航会很不方便。我们需要的效果是初始情况下文章导航固定在sidebar右侧位置上,然后当文章滚动后,文章导航订在右侧固定的位置也就是fixed布局。这样明显就要有js的参与了。
1.首先在/themes/light/source/js中新建一个文件,名字随意,然后把以下代码考入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var lb_article = (function ($) {
var _sideBarShow=function () {
var scrollTop=$("body").scrollTop();
if(scrollTop>160){
$("#toc").addClass("toc-articleP");
}else if(scrollTop<=160&&$("#toc").has("toc-articleP")){
$("#toc").removeClass("toc-articleP");
}
}
var pub = {
sidebar: function () {
_sideBarShow()
$(window).scroll(function () {
_sideBarShow()
})
}
}
return pub;
})(jQuery);
lb_article.sidebar();

2.在/themes/light/layout/_partial/after_footer.ejs中引入js文件既在文件最后添加:

1
<script src="<%- config.root %>js/之前建立的文件名.js"></script>

3.在/themes/light/source/css/_partial/archive.styl中添加:

1
2
3
4
#sidebar .toc-articleP
position fixed
width 240px
background #f4f4f4

总结

到了主题优化部分大多是动前端的内容,找到对应的文件进行增加和修改就可以,ejs模板比较好理解,但是styl格式对于不长些ruby之类语言的人来说较为不习惯。对于light主题的优化就到这里,随后可能会利用前端知识添加一些背景图片,更改部分字体之类的小修改。

参考

GoonX的博客