Hexo主题制作指南
Part -1：前置知识&准备工作
你需要准备的东西，贴心的我已经帮你把链接附带上了：
GitNode.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的教程
在你的终端中输入：
npm i -g yo
cd themes
mkdir 你的主题名字
chmod 675 ./ (请根据自己的情况在前面加入su / sudo）
yo
接下来，如果你是使用本文的EJS+Stylus，那么应该向我这样
$ 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)
这个时候直接按回车
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? ()
输入名字，按下回车。
接下来连按两次回车，然后按一个向上箭头+回车即可完成。
至此，你的目录中应该是这样的：
|
|- layout
|- source
|- _config.yml
恭喜！你完成了第一步
Part 2：一些基本操作
这里给一个小提示：
不需要包含的东西，你可以在其文件名之前加入
_，这样这个文件就不会被包含了
Part 2.1：搞清楚每个页面的功能
Part 2.1.1: layout.ejs
打开layout/layout.ejs，我们来解读一下这里的代码
<%
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 + ' ]';
%>
由变量名可以猜到，这应该是定义了一个决定页面名称的变量。
解释一下可能出现的疑问：
-
<%是EJS脚本控制的开始，后面还会用到<%-和<%=等等。大部分时候，你可以把他当做JS看 -
is_archive()是Hexo的内置函数，用来判断这个页面是否为archive页面，其他同理 -
||和C语言中的||意思大相径庭。如果a || b中a不为空，整个表达式结果为a，否则为b
继续看：
<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>
-
<%=用于输出内容，并且是直接输出；而<%-则是转为HTML后输出 -
config.xxx这是使用在博客根目录下的_config.yml中定义的属性，例如你在_config.yml中写了如下代码：
I: rubbish
那么你可以使用config.I得到"rubbish"
而theme.xxx则是使用主题目录下的_config.yml中定义的属性。
theme.stylesheets.forEach(url =>这是一个循环。其中由于在主题目录下_config.yml的stylesheets是一个数组（出现了xxx:[换行] -...[换行] -...[换行] -...[换行]），则可以使用.length来获得其长度，用.foreach来进行循环，格式如下：
xxx.forEach(i => {
// do something
} );
等同于
for(int i = 0;i < xxx.length();i ++){
// do something
}
后面的要着重介绍一下<%- body %>，这句话会让Hexo载入index.ejs，不能省略。
当然，如果你想载入其他的页面，你也可以<% include "Xxx" %>
Part 2.1.2: index.ejs
后面的我们会讲的比较简单。如果你看到了你看不懂的变量并且我还没有讲到，或者你想用的东西我没讲到，请阅读官方文档来找答案。
index.ejs很简单：
<%-partial('partials/recent-posts')%>
<div id="paginator">
<%-paginator()%>
</div>
-
partial用来载入其他的ejs，但是partial能够传入参数，具体使用请阅读官方文档 -
paginator()用于插入分页，也就是页面最下方的上一页 1 2 3 4 下一页
Part 2.1.3: page.ejs
依然很简单：
<article id="post">
<h1><%=page.title%></h1>
<%-page.content%>
</article>
<div id="paginator">
<%-paginator()%>
</div>
page变量是当前页面的文章，详情请看官方文档
Part 2.2： 一些常用函数的介绍
在上一节中你其实可以看懂一些函数的用法，结合着官方文档，你也应该可以写出一些基本的界面。
这里将介绍一些常用函数的用法
Part 2.2.1 url_for
url_for能在路径前加上根路径
//_config.yml中
root: /blog/
<%- url_for('/a/path') %>
// /blog/a/path
Part 2.2.2 css/js
这两个函数用于载入文件
<%- css('style.css') %>
// <link rel="stylesheet" href="/style.css">
<%- js('script.js') %>
// <script src="/script.js"></script>
更多用法请参考官方文档
Part 2.2.3 strip_html
这个函数可以清空字符串中的HTML标签，一般在内容摘要的显示中使用。
<%- strip_html('It\'s not <b>important</b> anymore!') %>
// It's not important anymore!
Part 2.2.4 date
这个函数用于插入日期：
<%- date(Date.now()) %>
// 2013-01-01
<%- date(Date.now(), 'YYYY/M/D') %>
// Jan 1 2013
更多用法请参考官方文档
Part 2.2.5 toc
解析内容中的标题标签 (h1~h6) 并插入目录。
<%- 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 &:
这个符号用于表示上层元素，例如：
a {
}
a :hover{
}
则可以写成
a{
&:hover
}
Part 2.3.3 @import
和C语言的include用法一样，@import 'xxx'可以将'xxx'中的内容拷贝到这个文件
所以，我们一般是这样安排目录的：
| - _particle
| - xxx.styl
然后在xxx.styl中导入其他文件，因为他们已经被copy到了xxx.styl中，不需要再次被包含
Part 3：上传主题
请阅读官方文档，这里我教你怎么把主题上传到github仓库
-
新建仓库
-
在
git中输入：
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
即可
以后的更新：
git add ./
git commit -m "xxx"
git push
