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 generatorsInstall a generatorFind some helpGet 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

Part 4：完结撒花+一些广告

本人博客
本人主题Sagittarius

Hexo主题制作指南相关推荐

Drupal 6 主题制作指南
译者:老葛, http://www.thinkindrupal.com/theme-guide-drupal-6 原文:http://drupal.org/theme-guide 欢迎来到主题制作的用 ...
分享一款自己制作的hexo主题
自从接触前端开发,我就一直向拥有自己的个人博客: 刚开始定了一个大目标,想要自己从头开始,一个代码一个代码做起来,但是苦于技术不过关,一直没能实现: 直到我接触了hexo这个工具,我像是发现了新大陆, ...
hexo主题之hexo-theme-yilia-plus
hexo-theme-yilia-plus 一个简洁优雅的hexo主题 ➡️ https://github.com/JoeyBling/hexo-theme-yilia-plus 此项目是根据hexo ...
Infographics（信息图表）制作指南
Infographics(信息图表)制作指南本期极客攻略由OAKMIKEOAK 撰写. http://www.geekpark.net/entity/view/121225 这是一个信息爆炸的时代, ...
Hexo主题之livemylife个性化构建你的博客
本篇博客已首发在个人博客 [快乐码原] :Hexo主题之livemylife个性化构建你的博客欢迎各位客官来康康~ tips:部分图片加载异常,可以到我的个人博客浏览完整版. 简介 livemyli ...
nokia s40 java软件_Nokia S40主题制作 v1.0
软件简介使用方法: 1,应用程式设置'读取数据'选择"每次询问". 2,打开软件,选择主菜单第一个选项"新建主题工程",填写主题名称和浏览保存路径(点击左键的 ...
Drupal8系列（五）：主题制作之搭建框架-Ubuntu 14.04 LTS
Drupal8的主题制作准备工作已经完成了,那么我们接下来就开始正式制作主题了! 一.生成主题的Compass框架首先我们先进入到Druapl8的主题目录: cd /var/www/druapl8/ ...
wordpress引入php文件,WordPress主题制作之模板文件的引入方法，wordpress模板
WordPress主题制作之模板文件的引入方法,wordpress模板 get_template_part() 用来引用模板文件,类似于 get_header().get_sidebar() 和 ge ...
如何开发一个hexo主题_如何确定一个强烈的主题可以使产品开发更有效
如何开发一个hexo主题 by Cameron Jenkinson 卡梅伦·詹金森(Cameron Jenkinson) 如何确定一个强烈的主题可以使产品开发更有效 (How identifying ...
Multi-Architecture镜像制作指南已到，请查收！
摘要:使用Multi-Architecture镜像,可以让docker根据系统架构去拉取对应的镜像,服务的部署脚本等可以在不同架构的系统间使用相同的配置,减化服务配置,提高了服务在不同系统架构间的一致 ...

Hexo主题制作指南

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

Part 0：一些废话

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

Part 2：一些基本操作

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

Part 2.1.1: layout.ejs

Part 2.1.2: index.ejs

Part 2.1.3: page.ejs

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

Part 2.2.1 url_for

Part 2.2.2 css/js

Part 2.2.3 strip_html

Part 2.2.4 date

Part 2.2.5 toc

Part 2.3： CSS和JS的用法

Part 2.3.1 hexo-config

Part 2.3.2 `&:`

Part 2.3.3 @import

Part 3：上传主题

Part 4：完结撒花+一些广告

Hexo主题制作指南相关推荐

最新文章

热门文章

Hexo主题制作指南

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

Part 0：一些废话

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

Part 2：一些基本操作

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

Part 2.1.1: layout.ejs

Part 2.1.2: index.ejs

Part 2.1.3: page.ejs

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

Part 2.2.1 url_for

Part 2.2.2 css/js

Part 2.2.3 strip_html

Part 2.2.4 date

Part 2.2.5 toc

Part 2.3： CSS和JS的用法

Part 2.3.1 hexo-config

Part 2.3.2 &:

Part 2.3.3 @import

Part 3：上传主题

Part 4：完结撒花+一些广告

Hexo主题制作指南相关推荐

最新文章

热门文章

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

Part 2.3.2 `&:`