HexoHexo

Hexo Docs（三）- 高级进阶

2015-06-09  本文已影响3189人  lupeng

这一部分的主要是一些高级进阶的功能，想自定义自己的主题，就需要这部分的内容。

1、永久链接

你可以通过_config.yml或者文章的头部申明来设置文章的永久链接。

（1）变量

下面列举了可以使用在永久链接里的变量，除了下面这些，你可以使用固定链接中的任何属性。

你也可以自定义每个变量，在permalink_defaults中这样设置：

permalink_defaults:
    lang: en

（2）举例说明

假设在_posts目录下有一篇名为hello-world.md的文章，声明如下：

title: Hello World
date: 2015-06-01
categories:
- foo
- bar

（3）多语言支持

你可以通过new_post_name和permalink字段的设定，来创建一个多语言的网站。

new_post_name: :lang/:title.md
permalink: :lang/:title/

当你创建一个新的文章的时候，hexo new "Hello World" --lang tw，hexo会创建source/_posts/tw/Hello-World.md，那么http://localhost:4000/tw/hello-world/便会指向该文章。

2、主题

hexo根目录中的theme目录就是主题的所在地，设置主题非常简单，只需将_config.yml中theme字段值设为主题名就行了。下面看一下一个主题的目录结构：

.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

（1）主题全局设置

_config.yml配置文件，跟hexo的全局配置文件名一样。只是在不同的目录中，在该配置文件中的改动不需要重启服务，就可以实时体现在站点中。

（2）语言

语言文件夹，详细信息可以查看Localization(i18n)的说明，下面再介绍。

3、模版

模版基本上就是网站的布局了，如果你想要自己亲手制作一个Hexo的主题，那么就要深入了解这块内容了，每一个主题至少都要包含一个index模版，下面是各页面对应的模版名称：

（1）Layouts（布局）

如果页面结构类似，举个例子，两个模版都含有header以及footer，你就可以考虑通过「布局」让两个模板共享相同的结构。一个布局文件必须要能显示 body 变量的内容，如此一来模板的内容才会被显示，例如：

<!--index.ejs-->
index

<!--layout.ejs-->
<html>
 <body><%- body %></body>
</html>

生成的结果如下：

<!DOCTYPE html>
<html>
  <body>index</body>
</html>

每个模板都默认使用layout布局，您可在文章的前置申明中指定其他布局，比如“post”或者“page”或是设为false来关闭布局功能（如果不填默认是post，这个在_config.yml中可以设置默认值），您甚至可在布局中再使用其他布局来建立嵌套布局。

也许你看到官方Docs这么说，还是不明白说的是什么意思，后面我会通过创建个人简历的布局示例来详细讲解这一块内容。

（2）Partials（局部模版）

局部模版可以让你在不同的模版中分享相同的组件，例如Header、Footer或者Sidebar侧边栏等等，可以利用局部模版功能将各个组件分割成独立的文件，便于维护。例如：

<!--partial/header.ejs-->
<h1 id="logo"><%= config.title %></h1>

<!--index.ejs-->
<%- partial('partial/header') %>
<div id="content">Home page</div>

生成后就是：

<h1 id="logo">My Site</h1>
<div id="content">Home page</div>

这个很容易理解，就是将局部模块里的内容，原封不动的拷贝到引用它的文件中。

（3）Local Variables（本地变量）

这里的变量就是针对局部模版来使用的，您可以在局部模块中指定局部变量来进行传递。例如：

<!--partial/header.ejs-->
<h1 id="logo"><%= title></h1>

<!--index.ejs-->
<%- partial('partial/header', {title: 'Hello World'}) %>
<div id="content">Home page</div>

生成后就是：

<h1 id="logo">Hello World</h1>
<div id="content">Home page</div>

这个也不难理解，就是传递变量的过程。

（4）Optimization（最优化）

假如你的主题特别复杂，因为要生成的文件过于庞大，这样会导致hexo生成性能下降，除了优化主题外，你还可以通过Fragment Caching(局部缓存)的功能来处理。它的主要功能就是缓存局部的内容，减少文件查询。常用在那些很少变动的模块中，比如Header、Footer等等，例如：

<%- fragment_cache('header', function(){
  return '<header></header>';
});

如果使用局部模版的话，如下：

<%- partial('header', {}, {cache: true});

但是需要注意的是，如果开启了relative_link参数的话，就不要使用局部缓存的功能，因为relative link在每个页面可能不同。

4、变量

（1）全局变量

（2）页面变量

Page(page) 这里指的是hexo new page创建的那个页面

Post(post) 这里指的是文章页面，与page布局相同，添加如下变量：

首页(index)

归档页(archive) 与index布局相同，但是新增如下变量：

分类页(category) 与index布局相同，但是新增如下变量：

标签页(tag) 与index布局相同，但是新增如下变量：

5、帮助函数

帮助函数被用于在模版中快速插入内容。

（1）URL

  1. url_for 返回一个带root路径的url，用法：<%- url_for(path) %>

  2. relative_url 返回from相对的to路径，用法：<%- relative_url(from, to) %>

  3. gravatar 插入Gravatar图片，用法：<%- gravatar(email, [size])%>，例如：

     <%- gravatar('a@abc.com') %>
 // http://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787
 <%- gravatar('a@abc.com', 40) %>
 // http://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787?s=40

（2）HTML

  1. css 载入CSS文件。用法：<%- css(path, ...)%>，path可以是数据或者字符串，如果path开头不是/或任何协议，则会自动加上根路劲；如果后面没有加上.css扩展名的话，也会自动加上。示例如下：

     <%- css('style.css') %>
 // <link rel="stylesheet" href="/style.css" type="text/css">

 <%- css(['style.css', 'screen.css']) %>
 // <link rel="stylesheet" href="/style.css" type="text/css">
 // <link rel="stylesheet" href="/screen.css" type="text/css">

  2. js 载入 JavaScript 文件。用法：<%- js(path, ...) %>，path 可以是数组或字符串，如果 path 开头不是 /或任何协议，则会自动加上根路径；如果后面没有加上 .js扩展名的话，也会自动加上。

     <%- js('script.js') %>
 // <script type="text/javascript" src="/script.js"></script>
 <%- js(['script.js', 'gallery.js']) %>
 // <script type="text/javascript" src="/script.js"></script>
 // <script type="text/javascript" src="/gallery.js"></script>

  3. link_to 插入链接。用法：<%- link_to(path, [text], [options]) %>，options参数有：

    • external 在新窗口中打开链接，默认值为false
    • class Class名称，也就是html标签a的class名
    • id ID名，也就是html标签a的id名

    示例如下：

     <%- link_to('http://www.google.com') %>
 // <a href="http://www.google.com" title="http://www.google.com">http://www.google.com</a>
 
 <%- link_to('http://www.google.com', 'Google') %>
 // <a href="http://www.google.com" title="Google">Google</a>

 <%- link_to('http://www.google.com', 'Google', {external: true, class: "link"}) %>
 // <a href="http://www.google.com" title="Google" target="_blank" rel="external" class="link">Google</a>

  4. mail_to 插入电子邮件链接。用法：<%- mail_to(path, [text], [options])%>，options参数有：

    • class Class名称，也就是html标签a的class名
    • id ID名，也就是html标签a的id名
    • subject 邮件主题
    • cc 抄送（CC）
    • bcc 密送（BCC）
    • body 邮件内容

    示例如下：

     <%- mail_to('a@abc.com') %>
 // <a href="mailto:a@abc.com" title="a@abc.com">a@abc.com</a>

 <%- mail_to('a@abc.com', 'Email') %>
 // <a href="mailto:a@abc.com" title="Email">Email</a>

  5. image_tag 插入图片。用法：<%- image_tag(path, [options]) %>，options参数有：

    • class Class名称，也就是html标签a的class名
    • id ID名，也就是html标签a的id名
    • alt 替代文字
    • width 宽度
    • height 高度

基本上就是img标签里的属性值。

  1. favicon_tag 插入favicon。用法：<%- favicon_tag(path) %>
  2. feed_tag 插入feed链接。用法：<%- feed_tag(path, [options]) %>，参数有：title和type(默认值为atom)

（3）条件函数

（4）字符串处理

（5）模板

（6）日期与时间

（7）列表

（8）其他

6、本地化

所谓的本地化功能，就是在主题中设置不同的语言模版，在文件夹languages，然后通过设置改变网页中的预设文本。在模版中是通过__或_p来引用的。

例如你在_config.yml中设置language: zh-CN，而网页模版中有这么一段引用：<h1 class="title"><%= __('comment') %></h1>，那么网站会在languages文件夹中找zh-CH.yml文件，并找到对应的comment值，将值显示在网站中。

这一块知道这些就基本上满足了自定义主题的需求了。

7、插件

这一块内容主要针对开发者的，帮助开发hexo的插件或者向hexo提供插件，主要就是通过github提交代码。大致可以了解一下Hexo的九种插件，您可以在 API 页面中获得更多信息：

注意

1、上面提到的所有Options参数一定要按照json的格式来书写；
2、虽然官方Docs已经写得很详细了，但是缺乏实际例子，后续我会以我的站点为例，详细介绍一些功能如何使用。
或者直接在Github中fork我的主题light-ch（基于hexo-theme-light主题的China版）自行查看代码。

上一篇 下一篇

猜你喜欢

热点阅读