Hexo 主题开发

个人项目 Hexo 2021-02-08 09:51:38 2021-05-24 12:48:52 367 次浏览

准备工作

首先我们使用 Yeoman 生成主题模板,稍微提一下,Yeoman 是一个前端项目的脚手架工具,使用 npm install yo -g 安装 Yeoman,然后执行 npm install generator-hexo-theme -g,之后我们就可以使用 yo hexo-theme 生成主题模板。

我这里已经写了一个基本功能完善的主题,你可以 fork 下来参考一下。

Hexo 主题开发概述

layout.ejs 是整个主题的框架,所有的页面都是基于此文件,通过 <%- body %> 引入其他模板文件的内容。

index.ejspost.ejs 等类似文件的名称不可改变,hexo 使用这些模板文件渲染对应的内容,例如 index.ejs 用于渲染首页,post.ejs 用于渲染文章。

主题的配置文件中的配置可以通过 theme.配置 的形式引用。

使用<%= theme.highlight %> 可以访问到 highlight 字段的内容。

Hexo 的配置文件与之类似,使用 config.配置 的形式使用。

EJS 语法简介

常用标签:

标签 描述
<% 程序执行
<%- 输出未转义内容
<%= 输出转义内容

项目结构

.
├── README.md
├── _config.yml
├── layout
│   ├── archive.ejs
│   ├── category.ejs
│   ├── index.ejs
│   ├── layout.ejs
│   ├── page.ejs
│   ├── partials
│   │   ├── comment.ejs
│   │   ├── footer.ejs
│   │   ├── nav.ejs
│   │   └── paginator.ejs
│   ├── post.ejs
│   └── tag.ejs
└── source
    ├── favicon.ico
    └── lightx.css

文章目录的实现

<%- toc(page.content, {list_number:false}) %>

词云的实现

直接插入以下代码:

<%- tagcloud({min_font: 16, max_font: 35, amount: 999, color: true, start_color: 'gray', end_color: 'black'}) %>

评论区的实现

使用 disqus 实现评论区,缺点是需要代理才能正常使用。

<div id="comment">
    <% if(theme.disqus && (theme.disqus.trim() !== "")){%>
    <div id="disqus_thread"></div>
    <script>
      var disqus_config = function() {
        this.page.url = "<%= page.permalink %>"; // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = "<%= page._id %>"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
      };
  
      (function() {
        var d = document,
          s = d.createElement("script");
        s.src = "https://<%= theme.disqus %>.disqus.com/embed.js";
        s.setAttribute("data-timestamp", +new Date());
        (d.head || d.body).appendChild(s);
      })();
    </script>
    <%}%>
</div>

其中 theme.disqus 的值为主题配置文件中的 disqus 字段的值。

计数的实现

计数使用不蒜子:

在 body 标签的末尾插入: <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

之后直接在需要显示计数的地方插入:

PV: <span id="busuanzi_value_site_pv"></span>
UV: <span id="busuanzi_value_site_uv"></span>

优点是十分方便,不需要注册,缺点是速度有点慢,且只能统计整站的访问量。

测试主题

Hexo 官方有一个专门用来测试主题的仓库:

https://github.com/hexojs/hexo-theme-unit-test.git

参考链接

  1. Hexo API
  2. Hexo 主题开发
  3. Hexo 主题开发经验杂谈
  4. Hexo 主题开发指南
  5. EJS 官方文档

未经允许,禁止转载,本文源站链接:https://iamazing.cn/