开发hexo主题(二)

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`就可以获取到了

index.ejs中使用它

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 这算是各种文章的集合了,如果你有耐心就看完吧(T▽T) 如果是明确想要哪一种功能的童鞋,那就直接查找吧( ...
    前端攻城狮阿黄阅读 3,245评论 1 6
  • 好长时间不写东西了,都在忙工作,去年三月份的时候我搞了一个hexo的博客,主题换过两三个吧,感觉都大部分的hexo...
    枫s的思念阅读 7,192评论 2 18
  • 内容简介此篇文章介绍的是个人博客的一些配置内容,包含博客项目的介绍、主题配置、图床配置以及各种第三方功能插件的使用...
    Little_Dragon_阅读 1,738评论 0 9
  • 太多断章取义的文章 使我肤浅的认为 社会阴暗面才是社会的本来面目 但是今天,看着那么多的陌生人,愿意花费时间...
    小乔流水谁家阅读 286评论 0 0
  • 1、 坐办公室久了,不免腰酸背痛。好在背后有一扇大窗,可以站在窗前活动腿脚,还可欣赏窗外的风景,久而久之,竟成了习...
    华风十里阅读 578评论 27 21