抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

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

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

  • Git
  • Node.js
    个人建议使用v12~v14的版本
  • 任意的文本编辑器,这里推荐使用VSCodesublime text
  • 一定的HTMLCSS知识,这里推荐菜鸟教程
  • EJSStylus知识
  • 会使用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 || ba不为空,整个表达式结果为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.ymlstylesheets是一个数组(出现了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文件夹下有两个文件夹,分别是cssjs

JS还是那个普通的JSCSS则使用的是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

评论