准备工作
MARKSZのBloG - https://molunerfinn.com/make-a-hexo-theme
Hexo 辅助函数 - https://hexo.io/zh-cn/docs/helpers
Pug 语法 - https://pugjs.org/language/attributes.html
Stylus 语法- http://stylus-lang.com
文档结构
- Hexo 主题, layout 目录需要包括如下几个页面：
首页 Home
归档页 Archive
标签页 Tag
分类页 Category
文章页 Post
页面详情页 Page
- source 目录, 通常存放资源文件
CSS，JS，IMG
搭建书写主题的舒适环境
能看到这篇文章，你应该已经搭建好了 Hexo 的博客环境，默认主题 landspace。通常我们不会在 landspace 上修改，而是下载个新主题，二次开发，或者撰写自己的主题。
- 为了更好的编写主题，我们需要安装：
hexo-browsersync
pug
stylus
npm install hexo-server hexo-browsersync hexo-renderer-jade hexo-renderer-stylus --save-dev
根据情况选择安装，无需硬搬，可能会安装失败，报错- Bug以及解决
安装了 hexo-browsersync 之后也不能实现修改 pug 文件之后刷新出修改后的结果。只能实现自动刷新，但是刷新了之后还是修改前的页面。
你的 node_modules 文件夹里找到 hexo-renderer-jade 的文件夹，然后将里面 lib/pug.js（jade同理）的其中一行代码注释掉：
// pugRender.compile = pugCompile以上是亲踩坑，如遇到其他BUG，参照 MARKSZのBloG
用 Yeoman 来生成主题结构
npm install yo -g
npm install generator-hexo-theme -g
可能安装不成功，清理后，多试几次
进入 Hexo -> themes
yo hexo-theme
选择 pug 和 stylus, 给主题命名 temp
生成的项目结构
├── _config.yml # 主题配置文件
├── layout # 布局文件夹
│ ├── archive.pug # 归档页
│ ├── category.pug # 分类页
│ ├── includes # 复用的公共页
│ │ ├── layout.pug # 页面布局
│ │ ├── pagination.pug # 翻页模板
│ │ └── recent-posts.pug # 文章列表模板
│ ├── index.pug # 主页
│ ├── page.pug # 页面详情页
│ ├── post.pug # 文章详情页
│ └── tag.pug # 标签页
└── source # 资源文件夹
├── css # CSS
│ └── temp.styl
├── favicon.ico # 站点图标
└── js # JS
└── temp.js站点 _config.yml -> theme: landsacpe 改成： theme: temp(你的主题名)
hexo s 查看效果
主题配置，修改
常用变量
config、theme、site、page
常用辅助函数
url_for(link)
is_home、is_post、is_tag、is_category、is_current等几个判断当前文章类型的函数
date、time等时间字符串处理函数
list_categories、list_tags、tagcloud等生成分类列表、标签列表、标签云等函数
toc 生成文章目录
paginator 生成页面页码
常用主题配置，修改
temp.yml
menu:
Home: /
Archives: /archives
Tags: /tags
Categories: /categories
**自定义添加
About: /about
Links: /links
Search: /search
数据查看与填充
- console.log(site.pages) **亲测未成功，有成功的，麻烦告知下
编码示例
# 注意首页也是一个page，它包含的 posts 只包括了首页会显示出来的文章。
each article in page.posts.data
.recent-post-item
- var link = article.link || article.path
a.article-title(href=url_for(link))= article.title || 'no_title'
.content!= article.excerpt
# excerpt是 post 的一个变量，只会显示文章的摘要部分
a.more(href=url_for(link) + '#more') 阅读更多
# 获取标签列表
if (site.tags.length)
.widget-wrap
.widget!= list_tags({show_count:true})
# 获取标签云
if (site.tags.length)
.widget-wrap
.widget.tagcloud!= tagcloud()
** = != 输出变量的两种方式，前者直接“字符串”输出，后者页面“代码”输出
# 侧边栏目录
# 如果是文章页面
if(is_post())
# 给 toc 传入当前页面的内容用于生成目录结构
.sidebar-toc!= toc(page.content)
# pug 写 script
script.
var GLOBAL = {
algolia: !{algolia},
}常用功能添加
- 不蒜子
.busuanzi-count
script(src= url_for("//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"))&attributes(async)
span.site-uv
i.fa.fa-user
span.busuanzi-value#busuanzi_value_site_uv
span.site-uv
i.fa.fa-eye
span.busuanzi-value#busuanzi_value_site_pv- 评论功能 (推荐)
- 添加搜索功能