自己设计 Hexo 主题模板

自己设计一套博客主题,暑假计划做的事情在拖到暑假结束之后终于在学校完成了,先上一张基础版本的截图吧。

hexo theme newsprint

设计借鉴 iBooks 和多看阅读软件的设计,重点突出中文排版,文章排版使用 han.css ,所以这套主题适用于一般日记散文中文文章,而不适合用作程序员的技术博客。

之前一直使用的是 Ghost ,从很早的版本就开始使用, Ghost 的确是一个很不错的博客程序,适合小白用户。但是由于自己的服务器需要更多的运行资源,所以由 Ghost 改为 Hexo。Hexo 可以直接一次性生成所有页面的静态文件,然后配合 nginx 使用,节省了 Ghost 或者 Hexo Server 将近 100MB 的基础内存使用。

在编写 Hexo 主题的过程中也是遇到了不少的坑,这里集中提出来。

首先要想自己写一个主题出来,肯定是要去 Hexo 官网 看文档的,但是实际上官网的文档不全而且有很多东西都很旧了,基本上你还是得去找别人写好的主题做参考。

Hexo 主题目录结构:

├── _config.yml
├── languages
├── layout
├── scripts
└── source

languages 目录里面是本地化文件,一般命名方式类似 en.yml zh-cn.yml 这样的,不过在我实际制作过程中发现,似乎必须要 default.yml 来代替你决定的默认语言,不然文件失效,默认为英文。

layout 目录用于存放主题模板文件,Hexo 设计的是用几个指定名字的模板文件来生成主题静态文件:

├── index		首页	
├── post		文章
├── page		分页
├── archive		归档
├── category	分类归档
├── tag			标签

这些文件都依赖 layout 这个主文件来确定一个主题的基本结构, layout 文件基本结构:

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
  <%- partial('_partial/head') %>
</head>

<body>
  <%- partial('_partial/header') %>
  <%- body %>
  <%- partial('_partial/footer') %>
  <%- partial('_partial/scripts') %>
</body>

</html>

文件里的 <%- body %> 将会被替换为对应的 indexarchivepage...文件内容,由此来构建整个主题的结构。

标签云的用法很简单,不过如果标签多了的话,而又设置了标签云数量的话,那么超过上限的那部分就永远不会出现,所以需要增加一下筛选过程:

<%- tagcloud(site.tags.sort('length', -1).limit(30), {
    color: true,
    start_color: '#a12023',
    end_color: '#000',
    amount: 30
}) %>

通过 site.tags 获取到全站所有的标签之后,先以倒序排序之后再根据标签云上限筛选出比较有价值的标签集,再以自带函数默认的方式显示出来,效果好了很多。

另外,在开发主题的过程中尝试使用了一下 SaSS,使用之后表示爱不释手,特别是嵌套选择器的功能,剩下很多时间不说,还对 css 样式做了一个很好的层级结构化。

关于文章同步,可以使用 Dropbox 同步 source 目录内的文章文件,每隔一段时间再连接 ssh 生成一下最新的静态文件就行。

2017 年 2 月更新:终究还是开源了。[1]


  1. https://github.com/ShinCurry/hexo-newsprint ↩︎