hexo学习记录

作者注:本文将持续更新

本文记录折腾hexo主题的过程。主要参考技术博客和工作室网站。

yaml支持

hexo新版本(3.0)支持yaml数据文件。在 source 目录建立data.yml,可在 ejs 代码中引入。修改数据文件,无须重启服务。方便将数据和页面分离。此功能可导航条、链接、提示语,等功能。

使用示例:
links.yml文件:

1
2
3
4
5
6
7
links:
- title: 李迟的专栏
url: https://latelee.blog.csdn.net/
- title: 李迟的个人主页
url: https://i.latelee.org
- title: 本站备份网址
url: https://latelee.github.io/

相应 links.ejs 文件:

1
2
3
4
5
6
7
8
9
10
<% const {links} = site.data.links; %> <% if (links) {%>
<div class="widget-wrap"><h3 class="widget-title"><%= __('links') %></h3>
<div class="widget">
<ul class="clearfix">
<% links.forEach(({title, url},) => { %><li>
<i class="fas fa-link"></i><a href="<%- url %>" target="_blank"><%- title %></a>
<% }) %></li>
</ul>
</div>
<% } %></div>

<% const {links} = site.data.links; %> 为导入数据文件固定形式,{links} 为变量名,site.data.links 表示 links.yml 文件。该方式只是引入数据形式不同,与config.yml本质一样(只是修改config.yml需要重启服务)。

导航条更新

yaml文件:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
headerNav:
- title: 嵌入式/Linux
sub:
- title: GUN/Linux系统
href: /category/using-gnu-linux
div: true
- title: Linux内核研究
href: /category/linux-kernel
- title: 嵌入式Linux
href: /category/embedded-linux
- title: U-Boot随笔
href: /category/porting-uboot
div: true
- title: 嵌入式底层BIOS
href: /category/firmware-bios
div: true
- title: qemu
href: /tag/嵌入式qemu
- title: 树莓派
href: /tag/raspberrypi

- title: 程序开发
sub:
- title: 技术杂铺
href: /category/my-study
- title: 开源项目
href: /category/open-project
- title: 程序库
href: /category/my-library
div: true
- title: 流媒体
href: /category/multistream
- title: 无线WIFI
href: /category/wireless
- title: 网络/网站/web
href: /category/
div: true
- title: 小玩意
href: /category/just-for-fun
- title: 答网友问
href: /category/answer4you
- title: 文章归档
href: /archives
- title: 本站信息
href: /webinfo

相应实现代码:

1
2
3
4
5
6
7
8
9
<% const {rightNav, headerNav} = site.data.menu; %> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<% headerNav.forEach(({title, href, href_match, sub}, index) => { %><% if (! sub) { %>
<li><a href="<%= href %>"><%= title %></a></li>
<% } else { %><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="Nav_<%= index %>" href="<%= href %>">
<%= title %><span class="caret"></span></a>
<ul class="dropdown-menu"><% sub.forEach(({title, href, div}) => { %><li><a href="<%= href %>"> <%= title %></a></li><% if (div) { %> <li role="separator" class="divider"></li> <% } %>
<% }); %></ul></li>
<% } %><% }) %></ul>

面包屑功能

在 article.ejs 文章标题下新加:

1
2
3
4
5
6
7
8
9
10
11
12
<% if (is_post()) { %><ul class="breadcrumb">
<li><a href="/"><%= __('home') %></a></li>
<li><a href="/archives"><%= __('allpost') %></a></li>
<li><a href="/archives/<%= post.date.format('YYYY')%>/<%= post.date.format('MM')%>"><%= post.date.format('YYYY')%>年<%= post.date.format('MM') %>月</a></li>
<li><%- list_categories(post.categories, {
show_count: false,
class: 'article-category',
style: 'none',
separator: ', '
}) %>
</li>
</ul> <% } %>

面包屑依次显示首页、归档文章、发表年月、分类。用 is_post() 判断为文章页面。post.date为文章创建时间,其为momentjs格式,用format可得到相应的数字,如 YYY 为年份,MM为月份。经实验,分类只能通过 list_categories 获取。

参考

hexo官网: https://hexo.io/zh-cn/docs/variables

李迟 2019.3.31
更新于 2019.12

  • 本文作者:李迟  最后更新:
  • 版权声明:原创文章,版权归署名作者,转载建议注明出处(当然不注明亦可)。
  • 本文链接:http://www.latelee.org/web/hexo-learning.html