Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页
看了官网的很多Hexo主题,总是不符合自己的心意,索性自己制作一个。
在Hexo中,用户需要关心的文件只有两个,根目录下的_config.yml
和特定主题目录下的_config.yml
,随之启动即可。
下表摘自Hexo的文档,作为一个主题,我们需要关心的也主要是下面几个地方。
模板 | 用途 | 回退 |
---|---|---|
index | 首页 | |
post | 文章 | index |
page | 分页 | index |
archive | 归档 | index |
category | 分类归档 | archive |
tag | 标签归档 | archive |
布局(Layout)
一个重要的概念就是布局,即规定了所有页面的共同点,下面是一个示例
<!DOCTYPE html>
<html>
<body>
<%- body %>
</body>
</html>
其中,<%- body %>
,所在的位置,将会被模版所替换,在编写模版时无需重新编写这部分内容。
局部模版(Partial)
局部模版,用于把部分内容抽离出来
使用的语法例如
<%- partial('partial/header') %>
将引用partial
目录下的header.ejs
文件中的内容。
EJS
有关Ejs,也许你不是特别熟悉,你只需要了解两点。
<% %>
表示单纯的语句,<%- %>
表示输出内容到页面的语句,<%= %>
内嵌一个变量,直接输出到页面,都是内嵌javascript
代码。
更多变量查阅文档相关内容。
现在,开始编写模版
index.ejs
文件是访问的首页,通常需要显示文章摘要列表和一些信息。
我把导航栏抽离出来nav_menu.ejs
<div>
<ul>
<% for (name in theme.menu) { %>
<li>
<a href="<%- url_for(theme.menu[name]) %>" class="">
<%= name %></a>
</li>
<% } %>
</ui>
</div>
其中,<% for (name in theme.menu) { %>
用于显示主题目录下_config.yml
中menu的配置,用于留给用户自定义。
你可以要求用户在主题配置文件中这样写
menu:
home: /
tags: /tags
about: /about
这样刚才的``nav_menu.ejs`就可以获取到了