Hexo 主题开发

    
        标签：
        
            个人项目
        
            Hexo
        
    发布于：2021-02-08 09:51:38
    编辑于：2021-05-24 12:48:52
    浏览量：2203

准备工作

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

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

Hexo 主题开发概述

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

index.ejs，post.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

参考链接

Links: Hexo-theme-development