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
独立的侧边栏挂件
category.ejs
:”分类”侧边栏挂件,遍历site.categories(网站所有类别)生成一个列表,列表内容是超链接(http://masikkk.com/categories/类别名/),对应页面是由_partial/archive.ejs生成的。一致。links.ejs
:”友情链接”侧边栏挂件,遍历theme.links生成。2中有改动。recent_posts.ejs
:”最近发表”侧边栏挂件,对site.posts按日期排序后遍历生成,2中改为加载多说最近评论代码。search.ejs
:”搜索”侧边栏挂件,可选swiftype搜索或内置站内搜索。一致。tagcloud.ejs
:”标签云”侧边栏插件,遍历site.tags(网站所有标签)生成一个列表,列表内容是超链接(http://masikkk.com/tags/标签名/),对应页面是由_partial/archive.ejs生成的。一致。我有改动,去掉只展示20个标签限制,改为按标签首字母排序。
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:标签名称
参考
Hexo Docs(一)- 开始准备
http://lupeng.me/2015/05/13/Hexo_Docs1.htmlHexo Docs(二)- 基本用法
http://lupeng.me/2015/05/27/Hexo_Docs2.htmlHexo Docs(三)- 高级进阶
http://lupeng.me/2015/06/06/Hexo_Docs3.html写一个自己的Hexo主题
http://www.th7.cn/web/html-css/201607/178148.shtml为 Hexo 主题添加多种图片样式
http://wuchong.me/blog/2014/12/13/hexo-theme-creating-image-styles/
上一篇 web.xml
页面信息
location:
protocol
: host
: hostname
: origin
: pathname
: href
: document:
referrer
: navigator:
platform
: userAgent
: