Hexo模板系统和pacman的修改

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2014/03/18/hexo_ejs_template/

Hexo的原理是解析_posts中的md格式文件,然后根据模板的解析规则进行解析。

我使用的风格修改自pacman,主要它看着比官方默认的主题要充实很多。

但是毕竟是别人做好的,还是有很多不合自己意的,所以还是需要稍微修改一下。

Hexo模板系统

要做出修改,首先要看看Hexo的模板系统是怎么实现的。

Hexo使用的是ejs,类似的东西就多了,比如Jade,swig,doT等等。

ejs效率比较慢(相比其他的),这里有一个测评,也没有Jade有那么多特性。不过好处也是明显的,不需要太多的时间和精力就可以掌握。

在Hexo中有post、page等不同的布局,而选用哪种布局是在md文件中声明的。

Hexo首先解析md文件,然后根据layout.ejs判断布局类型,再转发给其他布局文件。在布局中可以引入其他文件,比如

<%- partial('_partial/header')%>

这样每一块内容都是单独的,方便二次使用,也可以几个不同布局引用一个代码片段。

简要流程

修改几处英文

我没有从官方风格慢慢改,而是选用了pacman,修改了主题色以后感觉就不错了,不过有几处英文显示感觉不舒服。

Hexo是支持多语言的,在_config.xml中配置就可以了,一般使用zh-CN。

首先看看文章末尾的上一篇和下一篇

language中没有对于这个的定义,首先我们补充nextpostprevpostzh-CN.yml

nextpost:下一篇
prevpost:上一篇

然后修改post文件夹中的pagination.ejs,将PREVIOUS和NEXT替换掉

<nav class="article-nav clearfix">
<% if (page.prev){ %>
<div class="prev" >
<a href="<%-%20config.root%20%><%-%20page.prev.path%20%>" title="<%= page.prev.title %>">
<strong><%= __('prevpost') %>:</strong><br/>
<span>
<% if (page.prev.title){ %><%= page.prev.title %><% } else { %>(no title)<% } %></span>
</a>
</div>
<% } %>
<% if (page.next){ %>
<div class="next">
<a href="<%-%20config.root%20%><%-%20page.next.path%20%>" title="<%= page.next.title %>">
<strong><%= __('nextpost') %>:</strong><br/>
<span><% if (page.next.title){ %><%= page.next.title %><% } else { %>(no title)<% } %>
</span>
</a>
</div>
<% } %>
</nav>

在Hexo中,多语言支持是通过在语言文件中定义,然后在模板中通过<%= --('name')%>来使用的。

然后是搜索框的提示文字:

因为语言文件中已经有了定义,所以直接修改header.ejs文件

<inputtype="search"id="search"autocomplete="off"name="q"maxlength="20"placeholder="<%= __('search') %>" />

还有一个问题是在上下页的时候,修改方法类似

分页标题修改

还有一处小瑕疵是在分页页面那里,对于文章列表的所有页面,它们的标题都是一样的,而一般而言应该是第%d页 | blog.title

对应的设置在head.ejs中,

<%
var title = page.title;

if (is_archive()){
title ='Archives';

if (is_month()){
title +=': ' + page.year +'/' + page.month;
}elseif (is_year()){
title +=': ' + page.year;
}
}elseif (is_category()){
title ='Category: ' + page.category;
}elseif (is_tag()){
title ='Tag: ' + page.tag;
}
%>
<title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>

首先判断页面类型,然后构造标题,如果没有标题,就使用默认配置中的标题。

很明显,分页页面没有被处理。而其中诸如is_archive()的定义在helper/index.js中,这其中没有关于分页页数的判断方法。

最后参考modernist风格才找到答案。

<%
var title = [];
if (page.current >1) title.push(__('page', page.current));
if (page.title) title.push(page.title);
if (page.category) title.push(page.category);
if (page.tag) title.push(page.tag);
if (page.archive){
if (page.year) title.push(__('archive_b', page.year + (page.month ?'/' + page.month :'')));
else title.push(__('archive_a'));
}
title.push(config.title);
%>
<title><%= title.join(' | ') %></title>

通过判断page.current来处理。所以我们在head.ejs中的代码修改为

<%
var title = page.title;

if (is_archive()){
title ='Archives';

if (is_month()){
title +=': ' + page.year +'/' + page.month;
}elseif (is_year()){
title +=': ' + page.year;
}
}elseif (is_category()){
title ='Category: ' + page.category;
}elseif (is_tag()){
title ='Tag: ' + page.tag;
}elseif(page.current >1){
title ='第'+page.current+'页';
}
%>
<title><% if (title){ %><%= title %> | <% } %><%= config.title %></title>

效果:

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2014/03/18/hexo_ejs_template/

发表评论