前置
Hexo 的安装就不讲了,直接开始我在制作 Hexo 主题遇到的一些问题。
首先
在使用 Hexo cli 脚手架创建完 Hexo
项目后会有一个默认官方主题 landscape 在 themes
目录中复制一份出来重命名成自己的名称,例如我的就是改成了 yogwang
,并且在根目录中的 _config.yml
中修改主题为自己的主题
1 2 3 4
|
theme: yogwang //这里修改成自己的主题
|
目录
完全展开主题目录:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| ─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 // 项目手册
|
因为我是完全重新创作一个主题,所以需要保留下来的目录如下
保留下来的目录
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| ─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
作为备忘录。
制作
因为保留下了官方主题的布局文件,所以只需要在原有基础上调整就可以制作一个主题雏形。
调整后的目录:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| 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
1 2 3 4 5 6 7 8 9
| 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
1 2 3 4 5
| --- title: 我 date: 2019-07-11 15:10:39 layout: about ---
|