当前位置 : 首页 » 文章分类 :  开发  »  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,014
阅读预计12分钟
创建日期 2016-06-11
修改日期 2017-06-12
类别
标签
百度推荐