Hexo模板主题开发 入门念叨07月04日 / 2016

分类:站长杂谈 标签:

在主机测评群中,貌似好几个大牛都对Hexo博客挺感兴趣,也确实,hexo这种方式占用VPS资源极少,并且门槛低,甚至可以运行于github等代码托管平台。但是,从目前寻找到的资料来看,Hexo主题开发没有wordperss和typecho的那么简单,可以来一段我初步收集到的资料吧。

庆祝的话已经说的差不多了,下面来讲一讲如何开发一个Hexo主题。

结构

主题结构

Hexo主题的结构大体如下:

.
├── _config.yml
├── languages
│   ├── default.yml
│   └── zh-Hans.yml
├── layout
│   ├── achieve.swig
│   ├── category.swig
│   ├── index.swig
│   ├── _layout.swig
│   ├── page.swig
│   ├── _partials
│   ├── post.swig
│   └── tag.swig
└── source
    ├── css
    ├── fonts
    ├── img
    ├── js
    └── vendors

首先有一个 _config.yml 负责提供主题级别的配置,可以在 layout 中通过theme.xxx 的形式进行调用。

然后 languages 负责实现博客的i18N功能,如果博客没有多语言的需求,只需要实现一个 default.yml 即可。

其次是最为重要的 layout 文件夹,这个里面主要存放博客的结构,Hexo 引擎会使用指定的渲染引擎将 layout 文件渲染成HTML页面。

最后是 source ,把所有主题需要用到的资源,比如CSS,Fonts,JS等都存放到这个文件夹中。

这个主题使用了 swig

页面结构

页面结构分为两个维度,一者是我要呈现哪些页面,二者是每个页面上都有哪些内容。

哪些页面?

作为一个博客,主要需要的页面有以下这些:

  • 主页
  • 单页
  • 归档页面
  • 分类页面
  • 标签页面
  • 文章页

哪些内容?

如果没有什么特别的设计,博客的页面大体上可以分为这几个部分:

  • head:头部文件
  • body:主体内容
    • header:题图,导航栏等
    • content: 内容
    • footer:尾部的联系方式等

实现

前面讲到了 Hexo 的结构,下面来聊一聊具体的实现。

原理

Hexo 渲染的入口是 _layout.swig ,所以一个主题至少需要实现一个_layout.swig

然后Hexo会遍历Hexo目录下 source 文件夹中的所有Markdown文件,根据Markdown文件所指定的layout进行渲染,默认类型为 post

技巧

_layout.swig结构

整体的结构基本如下:

<!doctype html>
<html>
<head>
    {% include '_partials/head.swig' %}
    <title>{% block title %}{% endblock %}</title>
</head>
<body id="home">
    {% include '_partials/menu.swig' %}
    <div id="wrap">
        {% include '_partials/nav.swig' %}
        {% include '_partials/header.swig' %}
        <div id="start" class="container content">
            {% block content %}{% endblock %}
        </div>
        {% include '_partials/footer.swig' %}
    </div>
</body>
</html>

实现文章渲染

这个地方主要是借鉴了NexT主题的设计,实现了一个swig的宏来生成对应的文章。这个宏主要有两个参数,第一个是post对象,第二个是是否为主页。如果是主页就只显示简略的内容,如果不是就输出全文。

判断的部分实现如下:

{% if is_index %}
    {% if post.excerpt %}
        {{ post.excerpt }}
        <a class="" href="{{ url_for(post.path) }}">Read more</a>
    {% endif %}
{% else %}
    {{ post.content }}
{% endif %}

用到的post页的参数可以 我翻译的中文文档

分页插件

Hexo 自己实现了一个分页插件,直接使用paginator函数即可。

{% if page.prev or page.next %}
    <nav class="pagination">
        {{ paginator({
            prev_text: '<i class="fa fa-angle-left"></i>',
            next_text: '<i class="fa fa-angle-right"></i>',
            mid_size: 1
        }) }}
    </nav>
{% endif %}

评论系统

对于Hexo来说,评论系统就是调用一个第三方的JS。所以只需要在合适的位置插入代码即可。

<div id="disqus_thread"></div>
<script>
    var disqus_config = function () {
        this.page.url = '{{ page.permalink }}';
        this.page.identifier = '{{ page.path }}';
    };
    (function () {
        var d = document, s = d.createElement('script');
        s.src = '//abc.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
本文小编:烟花易冷

藏在电脑之间,摸打滚爬数载,终究练就电脑半高手,系统半专家~~~ 就在那一瞬间,蓦然回首,却发现了一个惊天秘密:忘记交电费了....

  • 某瓜子 发布于 2016-07-11 Reply

    沙发!不过我的gp现在用的是Jekyll。。考虑hexo好不好玩。。

    • 烟花易冷 发布于 2016-07-14

      好评!瓜子的技术果然很娴熟

  • 清空重写
  • 发表评论