Hexo 主题开发制作 | blog [ YOG WANG ]

前置

Hexo 的安装就不讲了，直接开始我在制作 Hexo 主题遇到的一些问题。

首先
在使用 Hexo cli 脚手架创建完 Hexo 项目后会有一个默认官方主题 landscape 在 themes 目录中复制一份出来重命名成自己的名称，例如我的就是改成了 yogwang，并且在根目录中的 _config.yml 中修改主题为自己的主题

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: yogwang //这里修改成自己的主题

─yogwang
  ├─languages     // 国际化(i18n)让网站以不同语言呈现
  │  └─...
  ├─layout        // 布局文件
  │  ├─_partial     // 局部组件
  │  │  ├─post      // 文章组件
  │  │  └─...
  │  ├─_widget      // 侧边栏部件
  │  └─...
  ├─scripts       // 启动时自动载入的Js脚本
  ├─source        // 资源文件夹
  │  ├─css          // CSS样式
  │  │  ├─fonts     // 字体
  │  │  ├─images    // 图片
  │  │  ├─_partial  // 局部组件CSS
  │  │  ├─_util     // 分栏&Mixin
  │  │  └─...
  │  ├─fancybox     // fancybox插件
  │  └─js           // JS脚本
  ├─_config.yml   // 主题配置文件
  ├─.gitignore    // Git忽略配置
  ├─Gruntfile.js  // Grunt项目文件
  ├─LICENSE       // 授权条款
  ├─package.json  // 包管理配置文件
  └─README.md     // 项目手册

因为我是完全重新创作一个主题，所以需要保留下来的目录如下

保留下来的目录

─yogwang
  ├─layout
  │  ├─_partial
  │  │  └─post
  │  │  └─...
  │  ├─_widget
  │  └─...
  ├─scripts
  ├─source
  │  ├─css
  │  └─js
  ├─_config.yml
  ├─.gitignore
  ├─package.json
  └─README.md

因为仅自己使用所以 languages、Gruntfile.js 和 LICENSE 没有保留，

保留下了 layout 布局文件夹的全部文件，

清空了 scripts 和 source 目录下文件仅保留目录;

README.md 作为备忘录。

制作

因为保留下了官方主题的布局文件，所以只需要在原有基础上调整就可以制作一个主题雏形。

调整后的目录：

Layout
│  archive.ejs    // 所有归档文章列表
│  category.ejs   // 归档时间来分类的列表
│  index.ejs      // 主页
│  layout.ejs     // 通用布局模板
│  page.ejs       // 单页模板
│  post.ejs       // 文章模板
│  tag.ejs        // 标签归档列表页
├─_partial        // 私有组件
│  │  archive-post.ejs      // 列表页文章预览
│  │  archive.ejs           // 文章列表
│  │  article.ejs           // 文章详情
│  │  footer.ejs            // 尾部模板
│  │  meta.ejs              // 页面META部分
│  │  header.ejs            // 头部模板
│  │  sidebar.ejs           // 侧边栏
│  └─posts      // 文章组件
│          category.ejs     // 文章分类归档
│          date.ejs         // 文章创建时间
│          nav.ejs          // 文章分页
│          tag.ejs          // 文章Tag
│          title.ejs        // 文章标题
└─_widget      // 侧边栏部件
        archive.ejs         // 分类列表部件
        category.ejs        // 时间归档部件
        recent_posts.ejs    // 最后发布部件
        tag.ejs             // 标签分类部件

书写样式直接跳过,以下是一些制作完成之后遇到的问题

问题

在主题配置文件中添加个人信息并输出到页面

打开 thems 目录下对应主题的 _config.yml 文件，参考官方模板中的 Menu 属性同样创建 userinfo

# userinfo
user:
  nickname: 王阳阳
  bio: '久之须自见得'
  commpany: ODIN.INC
  address: Jiaxing,China
follow:
  github: https://github.com/yogwang
  weibo: http://weibo.com/yooooooge

如何在页面中输出？？
在页面对应位置 <%= theme.user.nickname %> 即可，也可以循环输出

1
2
3

<% for (var i in theme.follow){ %>
  <a href="<%= theme.follow[i] %>" target="_blank"></a>
<% } %>

其实也可以在 Hexo 根目录下的 _config.yml 文件配置 输出标签如 <%= config.LABEL %>

不知道怎么生成 ‘关于我’ 单页面

在 Layout 中编写完 about.ejs 模板之后,我想使用这个布局来创建关于我的单页面

在 Hexo.io 官方文档中是这样写的

hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

使用 hexo new 命令，创建关于我单页面

1 2	PS E:\yogwang.github.io> hexo new about aboutme INFO Created: E:\yogwang.github.io\source\_posts\aboutme.md

这样就会生成一篇使用 about.ejs 来布局的 文章 并生成在_posts 文件夹下。注意哦，生成的是文章会在文章列表中显示。

那么问题来了，我怎么创建一个使用 about.ejs 布局，且不在文章列表中显示的单页面呢

Hexo 有三种默认布局：post、page 和 draft，它们分别对应不同的路径，自定义的其他布局和 post 相同，草稿文件都将储存到 source/_posts 文件夹。

所以在 hexo new 页面的时候先使用 hexo new page about

1 2	PS E:\yogwang.github.io> hexo new page about INFO Created: E:\yogwang.github.io\source\about\index.md

这样会在 source 目录下创建 about 目录，并生成 index.md 文件，打开它在 Front-matter 中添加 layout: about

---
title: 我
date: 2019-07-11 15:10:39
layout: about
---

前置

目录

完全展开主题目录：

保留下来的目录

制作

调整后的目录：

问题

在主题配置文件中添加个人信息并输出到页面

不知道怎么生成 ‘关于我’ 单页面