Hexo主题制作指南

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

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

• Git
• Node.js
  个人建议使用v12~v14的版本
• 任意的文本编辑器，这里推荐使用VSCode，sublime text
• 一定的HTML和CSS知识，这里推荐菜鸟教程
• EJS和Stylus知识
• 会使用Github或者Gitee等代码托管平台，这里推荐使用Github
• Cnblogs食用
• Zhihu食用
• 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 = 'Ca