抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

Hexo模板制作教程

发布于：2020年3月22日

次浏览

Part -1：前置知识&准备工作

你需要准备的东西，贴心的我已经帮你把链接附带上了：

  • Git
  • Node.js
    个人建议使用v12~v14的版本
  • 任意的文本编辑器，这里推荐使用VSCode，sublime text
  • 一定的HTML和CSS知识，这里推荐菜鸟教程
  • EJS和Stylus知识
  • 会使用Github或者Gitee等代码托管平台，这里推荐使用Github
  • QQ群：1161431755

Part 0：一些废话

CSP2020初赛之后感觉自己废了，准备回归whk，顺便接触了从来没有接触过的hexo theme制作——因为别的主题不敢改，不改又觉得丑。

讲道理这个东西蛮有趣，做完了也很有成就感，难度也不大。

这篇教程希望大家都能够做出自己喜欢的主题，那么，好戏开始！

Part 1：首先，弄出一个框架

网上有的教程会让你手动去mkdir+creat files，但是这对初学者极其不友好，很容易就出错了！ 因此，我们这里使用yo来直接生成一个主题。

当然，你也可以把landscape当做模板主题来使用。

这里还是给大家说一下怎么使用hexo

在任意一个地方新建一个文件夹作为你的博客文件夹，然后右键文件夹，选择Git Bash here

接着输入这里还是给大家说一下怎么使用hexo

在任意一个地方新建一个文件夹作为你的博客文件夹，然后右键文件夹，选择Git Bash here

如果有的童鞋不知道怎么用hexo，这里推荐这个dalao的教程

在你的终端中输入：

1
2
3
4
5
npm i -g yo
cd themes
mkdir 你的主题名字
chmod 675 ./ (请根据自己的情况在前面加入su / sudo）
yo

接下来，如果你是使用本文的EJS+Stylus，那么应该向我这样

1
2
3
4
5
6
7
8
9
10
$ yo
? 'Allo SDLTF! What would you like to do? (Use arrow keys)
  Run a generator
> Hexo Theme
  鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€
  Update your generators
  Install a generator
  Find some help
  Get me out of here!
(Move up and down to reveal more choices)

这个时候直接按回车

1
2
3
4
5
Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo hexo-theme

--=[ generator-hexo-theme ]=--
? What is the theme name? ()

输入名字，按下回车。

接下来连按两次回车，然后按一个向上箭头+回车即可完成。

至此，你的目录中应该是这样的：

1
2
3
4
|
|- layout
|- source
|- _config.yml

恭喜！你完成了第一步

Part 2：一些基本操作

这里给一个小提示：

不需要包含的东西，你可以在其文件名之前加入_，这样这个文件就不会被包含了

Part 2.1：搞清楚每个页面的功能

Part 2.1.1: layout.ejs

打开layout/layout.ejs，我们来解读一下这里的代码

1
2
3
4
5
6
7
8
9
<%
var pageTitle = page.title || config.subtitle || '';
if (is_archive()) pageTitle = 'Archives';
if (is_tag()) pageTitle = 'Tag: ' + page.tag;
if (is_category()) pageTitle = 'Category: ' + page.category;
if (is_month()) pageTitle += ': ' + page.month + '/' + page.year;
if (is_year()) pageTitle += ': ' + page.year;
pageTitle += ' [ ' + config.title + ' ]';
%>

由变量名可以猜到，这应该是定义了一个决定页面名称的变量。

解释一下可能出现的疑问：

  1. <%是EJS脚本控制的开始，后面还会用到<%-和<%=等等。大部分时候，你可以把他当做JS看

  2. is_archive()是Hexo的内置函数，用来判断这个页面是否为archive页面，其他同理

  3. ||和C语言中的||意思大相径庭。如果a || b中a不为空，整个表达式结果为a，否则为b

继续看：

1
2
3
4
5
6
7
8
9
10
11
<html lang="<%=config.language%>">
<head>
  <meta charset="UTF-8">
  <title><%=pageTitle%></title>
  <% if (theme.stylesheets !== undefined && theme.stylesheets.length > 0) { %>
    <!-- stylesheets list from _config.yml -->
    <% theme.stylesheets.forEach(url => { %>
      <link rel="stylesheet" href="<%=url%>">
    <% }); %>
  <% } %>
</head>

  1. <%=用于输出内容，并且是直接输出；而<%-则是转为HTML后输出

  2. config.xxx这是使用在博客根目录下的_config.yml中定义的属性，例如你在_config.yml中写了如下代码： 

    1
    I: rubbish

    那么你可以使用config.I得到"rubbish"
    而theme.xxx则是使用主题目录下的_config.yml中定义的属性。

  3. theme.stylesheets.forEach(url =>这是一个循环。其中由于在主题目录下_config.yml的stylesheets是一个数组（出现了xxx:[换行] -...[换行] -...[换行] -...[换行]），则可以使用.length来获得其长度，用.foreach来进行循环，格式如下：

    1
    2
    3
    xxx.forEach(i => {
        // do something
    } );

    等同于

    1
    2
    3
    for(int i = 0;i < xxx.length();i ++){
        // do something
    }

后面的要着重介绍一下<%- body %>，这句话会让Hexo载入index.ejs，不能省略。

当然，如果你想载入其他的页面，你也可以<% include "Xxx" %>

Part 2.1.2: index.ejs

后面的我们会讲的比较简单。如果你看到了你看不懂的变量并且我还没有讲到，或者你想用的东西我没讲到，请阅读官方文档来找答案。

index.ejs很简单：

1
2
3
4
5
6

<%-partial('partials/recent-posts')%>

<div id="paginator">
  <%-paginator()%>
</div>

  1. partial用来载入其他的ejs，但是partial能够传入参数，具体使用请阅读官方文档

  2. paginator()用于插入分页，也就是页面最下方的上一页 1 2 3 4 下一页

Part 2.1.3: page.ejs

依然很简单：

1
2
3
4
5
6
7
8
9
10

<article id="post">
  <h1><%=page.title%></h1>
  <%-page.content%>
</article>

<div id="paginator">
  <%-paginator()%>
</div>

  1. page变量是当前页面的文章，详情请看官方文档

Part 2.2： 一些常用函数的介绍

在上一节中你其实可以看懂一些函数的用法，结合着官方文档，你也应该可以写出一些基本的界面。

这里将介绍一些常用函数的用法

Part 2.2.1 url_for

url_for能在路径前加上根路径

1
2
3
4
5
//_config.yml中
root: /blog/

<%- url_for('/a/path') %>
// /blog/a/path

Part 2.2.2 css/js

这两个函数用于载入文件

1
2
3
4
<%- css('style.css') %>
// <link rel="stylesheet" href="/style.css">
<%- js('script.js') %>
// <script src="/script.js"></script>

更多用法请参考官方文档

Part 2.2.3 strip_html

这个函数可以清空字符串中的HTML标签，一般在内容摘要的显示中使用。

1
2
<%- strip_html('It\'s not <b>important</b> anymore!') %>
// It's not important anymore!

Part 2.2.4 date

这个函数用于插入日期：

1
2
3
4
5
<%- date(Date.now()) %>
// 2013-01-01

<%- date(Date.now(), 'YYYY/M/D') %>
// Jan 1 2013

更多用法请参考官方文档

Part 2.2.5 toc

解析内容中的标题标签 (h1~h6) 并插入目录。

1
<%- toc(page.content) %>

Part 2.3： CSS和JS的用法

在你的source文件夹下有两个文件夹，分别是css和js。

JS还是那个普通的JS，CSS则使用的是Stylus（你也可以用Less,Scss等）

这里只介绍几个常用的写法：

Part 2.3.1 hexo-config

这个函数可以使用你在主题目录的_config中定义的变量，使用方法一般为：convent(hexo-config('xxxxx'))

Part 2.3.2 &:

这个符号用于表示上层元素，例如：

1
2
3
4
5
6
a {

}
a :hover{

}

则可以写成

1
2
3
a{
    &:hover
}

Part 2.3.3 @import

和C语言的include用法一样，@import 'xxx'可以将'xxx'中的内容拷贝到这个文件

所以，我们一般是这样安排目录的： 

1
2
| - _particle
| - xxx.styl

然后在xxx.styl中导入其他文件，因为他们已经被copy到了xxx.styl中，不需要再次被包含

Part 3：上传主题

请阅读官方文档，这里我教你怎么把主题上传到github仓库

  1. 新建仓库

  2. 在git中输入：

    1
    2
    3
    4
    5
    6
    git init
    git add ./
    git commit -m "first commit"
    git branch -M master
    git remote add origin https://github.com/用户名/仓库名.git
    git push -u origin master

    即可

以后的更新：

1
2
3
git add ./
git commit -m "xxx"
git push
Hexo模板制作教程
http://sdltf.github.io/2020/03/22/hexo-theme-make/
本文作者
SDLTF
发布于
2020年3月22日
更新于
2022年6月24日
许可协议
CC BY-NC-SA 4.0
署名-非商业性使用-相同方式共享 4.0 国际。

更新于：2022年6月24日

教程

评论