当前位置 : 首页 » 文章分类 :  开发  »  Hexo博客(08)Hexo主题分析

Hexo博客(08)Hexo主题分析

freemind主题分析

主题框架

├── layout
|   ├── about.ejs：站点简介。
|   ├── archive.ejs：归档页面，引用partial/archive.ejs。
|   ├── categories.ejs：分类页面。
|   ├── index.ejs：首页，或者说首页上的文章列表，引用partial/index.ejs。
|   ├── layout.ejs：一个完整的页面。引用header,navigation,footer,search,after_footer.
|   ├── message.ejs：留言页面。
|   ├── page.ejs：引用partial/archive.ejs。
|   ├── post.ejs：文章详情页面，引用partial/article.ejs。
|   └── tag.ejs：标签页面。
|   ├── _widget
|      ├── category.ejs："所有分类"侧边栏挂件。
|      ├── links.ejs："友情链接"侧边栏挂件。
|      ├── recent_posts.ejs："最近发表"侧边栏挂件。
|      ├── search.ejs："搜索"侧边栏挂件。
|      └── tagcloud.ejs："标签云"侧边栏插件。
|   ├── _partial：
|      ├── after_footer.ejs："返回顶部"按钮，theme.fancybox代码，config.search代码，加载一些js。
|      ├── archive.ejs：归档页面。
|      ├── article.ejs：单篇文章页面模版。
|      ├── footer.ejs：所有页面的footer模版。
|      ├── head.ejs：所有页面的header模版。
|      ├── index.ejs：首页上的文章列表。
|      ├── index_pagination.ejs：首页文章列表下面的“下一页”“上一页”。
|      ├── navigation.ejs：始终位于站点顶部的导航栏。
|      ├── search.ejs：swiftype搜索代码。
|      ├── sidebar.ejs：主页的侧边栏挂件。
|      └── post
|          ├── analytics.ejs：谷歌统计和百度统计脚本。
|          ├── bdshare.ejs：百度分享脚本。
|          ├── category.ejs：单篇文章的分类。
|          ├── comment.ejs：多说和disqus评论框脚本。
|          ├── comment_footer.ejs：多说和disque评论的公共代码。
|          ├── entry.ejs：主页文章列表上的单篇文章预览。
|          ├── jiathis.ejs：jiathis分享脚本。
|          ├── meta.ejs：单篇文章页面的侧边栏插件配置。
|          ├── pagination.ejs：单篇文章下面的“上一篇”“下一篇”按钮。
|          ├── share.ejs：addthis分享。
|          ├── slogan.ejs：位于标题之下，文章之上的slogan。
|          ├── tag.ejs：单篇文章的标签。
|          └── title.ejs：单篇文章的标题。
├── source
|   ├── css
|      ├── style.css：主样式文件。
|      ├── responsive.css：响应式样式，用于适应桌面、平板、手机浏览器。
|   ├── fancybox
|   ├── fonts
|   ├── img
|   └── js
├── scripts
├── languages
└── _config.yml

下面是freemind主题和free2mind主题的对比分析：

layout

所有模版和布局。

  • about.ejs：站点简介页面模版。2中新建的模版。
  • archive.ejs：归档页面模版，引用partial/archive.ejs。一致。
  • categories.ejs：分类页面模版。2去掉了此页面。
  • index.ejs：首页模版，或者说首页上的文章列表，引用partial/index.ejs。2中去掉了subtitle。
  • message.ejs：留言页面模版。2中新建的布局。
  • page.ejs：引用partial/archive.ejs。2为空。
  • post.ejs：文章详情页面模版，引用partial/article.ejs。一致。
  • tag.ejs：标签页面模版。2为空。
  • layout.ejs：默认的layout布局，即一个完整的页面。用index,post,tag等页面模版的内容替换掉其中的<%- body %>就得到了各页面的完整代码。引用header,navigation,footer,search,after_footer.

layout/_partial

局部模版文件夹，多页面的通用组件，例如header，footer，sidebar

  • after_footer.ejs：”返回顶部”按钮，theme.fancybox代码，调用search.js中的searchFunc()函数，加载jquery.imagesloaded, gallery, bootstrap.min, main, search等js代码，被layout.ejs引用。一致。
  • archive.ejs：归档页面。归档页面、点击具体某个标签、类别后进入的页面都是此模版生成的。2有改动，去掉了导航栏下面的一大块非常碍眼的title，在此位置增加了当前位置导航，喜欢。我有改动，改为遍历站点所有文章，不分页。
  • article.ejs：单篇文章页面模版。引用了bdshare.ejs和jiathis.ejs，comment.ejs，meta.ejs，comment_footer.ejs。2有修改，在单篇文章标题上增加了日期、作者、评论数
  • footer.ejs：所有页面的footer模版，网站底部的Powered By等，站长统计等，引用analytics.ejs，被layout.ejs引用。2有改动。我有改动，增加了busuanzi访问量统计，多说公共代码，Google Prettify 代码高亮js代码，百度搜索引擎推送。
  • head.ejs：所有页面的header模版，被layout.ejs引用。生成网站标题、<meta>内容，加载css样式。2有修改。我有改动，增加了Google Prettify 代码高亮css。
  • index.ejs：首页上的文章列表，遍历page.posts(当前页的所有文章)，生成文章标题上的日期、类别、评论数等小标注、生成文章标题、引用post/entry.ejs，index_pagination.ejs，sidebar.ejs。2有改动，增加了文章日期，评论数等，喜欢。我有改动，增加了字数统计，阅读时长估计，网易云跟帖评论数。
  • index_pagination.ejs：首页文章列表下面的“下一页”“上一页”。2有改动。
  • navigation.ejs：始终位于站点顶部的导航栏，遍历theme.memu生成，被layout.ejs引用。一致。
  • search.ejs：swiftype搜索代码，根据theme.swiftype_key开启，被layout.ejs引用。一致。
  • sidebar.ejs：主页的侧边栏挂件，遍历theme.widgets生成，引用_widget/中的脚本。一致。

layout/_partial/post

  • analytics.ejs：谷歌统计和百度统计脚本，根据theme.baidu_tongji.enable启用，被footer.ejs引用。一致。我有改动，增加CNZZ统计代码。
  • bdshare.ejs：百度分享脚本，根据theme.bdshare启用，在article.ejs中被引用。2改为jiathis分享。
  • category.ejs：单篇文章右侧的分类，显示当前文章的类别，一致。
  • comment.ejs：多说和disqus评论框脚本，根据theme.duoshuo_shortname启用，在article.ejs中被引用。2有小修改，去掉了“留言”2字。我有改动，增加网易云跟帖评论代码。
  • comment_footer.ejs：多说和disque评论的公共代码，根据theme.duoshuo_shortname启用。一致。
  • entry.ejs：主页文章列表上的单篇文章预览，被partial/index.ejs引用，显示文章图片和预览内容。2有改动，去掉了“阅读全文”的代码。
  • jiathis.ejs：jiathis分享脚本，根据theme.jiathis启用，在article.ejs中被引用。2有修改，在文章底部“分享到”左侧增加了分类和标签。
  • meta.ejs：单篇文章页面的侧边栏插件配置，在article.ejs中被引用。我有修改，2也有修改，2直接在这里引用了widget。
  • pagination.ejs：单篇文章下面的“上一篇”“下一篇”按钮。2有修改，将“上一篇”改为上一篇文章的标题，这个好。
  • share.ejs：一致。
  • slogan.ejs：位于标题之下，文章之上的slogan，即theme.slogan配置的文字。2中改为”当前位置”导航，这个好。
  • tag.ejs：单篇文章右侧的标签，显示当前文章的标签，一致。
  • title.ejs：单篇文章的标题。2有改动，增加了文章日期和多说评论数。

layout/_widget

独立的侧边栏挂件

source/css

  • responsive.css：响应式样式，用于适应桌面、平板、手机浏览器。2略有改动，无甚影响。
  • style.css：主样式文件。2中有赠有减。
    .pagination样式更复杂了
    去掉了.widget样式
    新增blockquote样式
    修改.slogan样式
    正文是有背景图片的，在body样式中指定为grid-18px-masked.png，清爽的渐变网格。

模版与布局

Hexo站点基本上分为index（首页）、post（文章详情页）、page（导航标签页）、archive（归档页）、category（类别页）以及tag（标签页），对应theme/layout文件夹下的几个ejs文件，它们就是模版。

layout.ejs是布局，可以看成是网站总的结构模版，用上面的index,post,tag等模版的内容替换掉layout.ejs文件里的<%- body %>就得到了各页面的完整代码。例如我使用的free2mind主题的layout.ejs代码如下：

<%- partial('_partial/head') %>
 <body>  
  <%- partial('_partial/navigation') %>
  <div class="container">
      <div class="content">
         <%- body %>
    </div>
  </div>
  <div class="container-narrow">
  <footer> <%- partial('_partial/footer') %> </footer>
</div> <!-- container-narrow -->
  <%- partial('_partial/search') %>
  <%- partial('_partial/after_footer') %>
</body>
   </html>

比如类别页面就是用categories.ejs中的内容替换layout.ejs中的<%- body %>，hexo g后生成的html页面是位于public/categories文件夹中的index.html，用浏览器打开index.html可以看到这是一个没有样式的纯html，但所有页面上的内容都已经生成了。

国际化

语言文件theme/languages/zh-CN.yml中是字段和对应翻译的映射，可以使用printf格式的带参翻译。
引用时使用__或_p辅助函数，__用于纯字符串，_p用于带参字符串。
所以我们可以修改zh-CN.yml中的中文翻译来定制导航栏的中文显示。

categories: 分类
search: 搜索
tags: 标签
tagcloud: 标签云
tweets: 推文
prev: 上一页
next: 下一页
comment: 留言
archive_a: 归档
archive_b: "归档：%s"
page: "第 %d 页"
recent_posts: 最新文章
description: 摘要
read_more: 阅读此文
links: 链接

变量

页面模版及配置中可使用的变量。

全局变量

  • site：网站变量
  • page：针对该页面的内容以及 front-matter 所设定的变量。
  • config：网站配置
  • theme：主题配置。继承自网站配置。
  • _ (单下划线)：Lodash 函数库
  • path：当前页面的路径（不含根路径）
  • url：当前页面的完整网址
  • env：环境变量

网站变量

  • site.posts：所有文章
  • site.pages：所有分页
  • site.categories：所有分类
  • site.tags：所有标签

页面变量

页面(page)

  • page.title：页面标题
  • page.date：页面建立日期（Moment.js 对象）
  • page.updated：页面更新日期（Moment.js 对象）
  • page.comments：留言是否开启
  • page.layout：布局名称
  • page.content：页面的完整内容
  • page.excerpt：页面摘要
  • page.more：除了页面摘要的其余内容
  • page.source：页面原始路径
  • page.full_source：页面的完整原始路径
  • page.path：页面网址（不含根路径）。我们通常在主题中使用 url_for(page.path)。
  • page.permalink：页面的完整网址
  • page.prev：上一个页面。如果此为第一个页面则为 null。
  • page.next：下一个页面。如果此为最后一个页面则为 null。
  • page.raw：文章的原始内容
  • page.photos：文章的照片（用于相簿）
  • page.link：文章的外部链接（用于链接文章）

文章(post)

除page变量外，增加下列变量：

  • page.published：如果该文章已发布则为True
  • page.categories：该文章的所有分类
  • page.tags：该文章的所有标签

首页(index)

  • page.per_page：每页显示的文章数量
  • page.total：总文章数
  • page.current：目前页数
  • page.current_url：目前分页的网址
  • page.posts：本页文章
  • page.prev：上一页的页数。如果此页是第一页的话则为 0。
  • page.prev_link：上一页的网址。如果此页是第一页的话则为 ‘’。
  • page.next：下一页的页数。如果此页是最后一页的话则为 0。
  • page.next_link：下一页的网址。如果此页是最后一页的话则为 ‘’。
  • page.path：当前页面的路径（不含根目录）。我们通常在主题中使用 url_for(page.path)。

归档(archive)

除index变量外，增加下列变量：

  • page.archive：等于 true
  • page.year：年份归档 (4位)
  • page.month：月份归档 (没有前导零的2位数)

分类(category)

除index变量外，增加下列变量：

  • page.category：分类名称

标签(tag)

除index变量外，增加下列变量：

  • page.tag：标签名称

参考

上一篇 web.xml

下一篇 Hexo博客(07)第三方访问量统计

阅读
评论
3.1k字
阅读预计12分钟
创建日期 2016-06-11
修改日期 2017-06-12
类别
标签
目录

页面信息

location:
protocol:
host:
hostname:
origin:
pathname:
href:
document:
referrer:
navigator:
platform:
userAgent:

评论

▲