基于Hexo和Butterfly创建个人技术博客，(3) 创建博客文章及文章模板配置

Hexo官司网查看 这里
笔者个人站查看 这里

特别说明：

1. hexo博客站点发布的文件全是静态文件，没有任何后台服务。博文的发布过程是：1、在本地用hexo new命令创建.md文件----2、经hexo g命令生成.html文件-----3、再通过hexo d命令发布到远程主机上上面。
   a、第1步中可以用其它格式文件编写，但需要安装对应的处理引擎；
   b、第3步中发布过程视情况而定，也可以选择手动上传等；

最佳实践：建议有技术能力的同学可以把生成的文件用git做下版本管理，然后按需增量部署而不是每次全量覆盖(这个话题会在高级内容中详细描述如何操作)，这样可以避免破坏原有积累的一些数据，比如访问次数等统计信息；

本章目标：
掌握如何创建新博客文章的方法

一、概述

文章可以手动创建，也可以通过hexo new命令创建，创建文章的命令是hexo new。hexo官方建议的流程如下：

1. 首先确定layout模板，模板中定义的内容可以认为是一种公共内容的提取，模板的内容称为Front-matter，在创建文章时会自动添加到新文件中。hexo自带了三种模板(可按实际情况修改)：page、post、draft。
   • page：用于创建列表页;
   • post：用于创建具体的博客文章;
   • dratf：用于创建草稿(一般不太用)。
2. 使用 hexo new命令创建文章。

二、创建模板

模板的概念
所谓的layout模板就是schffolds文件夹下面的.md文件，在新建文章时Hexo 会把 scaffolds 文件夹内相对应的文件添加到新文件的头部，Hexo 有三种默认模板：post、page 和 draft，区别是创建文章后会被保存到不同的路径；

1. layout可以自定义，自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。
2. 如果修改文章的 front-matter 设置 layout: false，则不会使用任何一种布局了。
3. layout不是必须的，它只是一种创建文章的快捷方式。但还是建议掌握这个流程，可以节省很多时间。

布局	生成的.md文章存放路径
post	/source/_posts
page	/source
draft	/source/_drafts

简单模板
模板可使用全局变量，在Tags Plugin语法一章中会详细讲解，一个简单的post.md模板定义如下，其它可配置的属性见下节Front-matter：

---
title: {{ title }}
date: {{ date }}
comments: false
---

自定义模板
一个自定义layout的例子，photo是一个自定义的布局，Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md，如果没有找到会忽略掉，然后文章文件保存到source/_posts 文件夹中，但需要注意其front-matter的值为photo，建议修改成正确的值。

$ hexo new photo "My Gallery"

2.1、Front-matter配置说明

Front-matter 是文章(.md)文件最上方以 --- 分隔的区域，用于设置文章的属性，此处是hexo默认的属性，在butterfly主题中又扩展了一部分，在后面章节会详细描述：

---
title: Hello World
date: 2013/7/13 20:46:25
---

参数	描述	默认值
layout	布局	config.default_layout
title	标题	文章的文件名
date	建立日期	文件建立日期
updated	更新日期	文件更新日期
comments	开启文章的评论功能	true
tags	标签（不适用于分页）
categories	分类（不适用于分页）
permalink	覆盖文章的永久链接，永久链接应该以 / 或 .html 结尾	null
excerpt	纯文本的页面摘要。
disableNunjucks	启用时禁用 Nunjucks 标签 {{ }}/{% %} 和 标签插件的渲染功能	false
lang	设置代码块语言以自动检测功能	继承自 _config.yml

2.2、categories和tags配置

只有文章支持分类和标签，在 Hexo 中分类具有顺序性和层次性，也就是说 Foo, Bar 不等于 Bar, Foo；而标签没有顺序和层次。

categories:
- Diary
tags:
- PS3
- Games

为文章添加多个分类，可以尝试以下 list 中的方法。此时这篇文章同时包括三个分类： PlayStation 和 Games 分别都是父分类 Diary 的子分类，同时 Life 是一个没有子分类的分类。

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

2.3、模板示例

page

---
title: {{ title }}
date: {{ date }}
reward:
description:
top_img:  # butterfly主题扩展，用于设置文章顶图用，后面的文章中会详细说明
comments: false
---

post

---
title: {{ title }}
date: {{ date }}
tags:
categories:
keywords:
description:
top_img:  # butterfly主题扩展，用于设置文章顶图用，后面的文章中会详细说明
cover:    # butterfly主题扩展，用于设置文章顶图用，后面的文章中会详细说明
comments: false
---

dratf

---
title: {{ title }}
tags:
---

因模板可以后期再修改，所以建站初期建议用上述示例模板就可以了，不需要定义的太复杂，在建站过程中逐渐优化。

三、创建新文章

使用如下命令：

$ hexo new [layout] <title>

文件默认支持: markdown、ejs、pug三种不同格式来编写。

3.1、创建新文章

如果不指定layout，则默认为 post，是由 _config.yml 中的 default_layout 参数来指定的。如果标题包含空格的话，请使用引号括起来。

创建两次同名的文件，生成的.md文件不会覆盖。hexo会自动在文件名后加索引：但要注意，经hexo g生成的.html文件的实际链接与 permalink 的配置有关

示例如下：

/source目录下
#创建文件：/source/_posts/test.md
$ hexo new post test

#创建文件： source/_posts/about/me.md  （在source目录下创建子目录）
$ hexo new page --path about/me 

在网站根目录下
#创建文件： /source/about/me.md  （在根目录下）
$ hexo new page --path about/me "About me"

3.2、创建列表页

如果选择layout==post一般是创建博文使用，如果选择page模板则一般是创建列表页面或其它特殊的页面，示例如下：

#创建文件：/source/tags/index.md  
$ hexo new page tags
#创建文件：/source/link/index.md 
$ hexo new page link
#创建文件：/source/categories/index.md 
$ hexo new page categories

3.3、创建草稿(不太建议使用）

创建文件时指定布局为：draft后，文件会被保存到 source/_drafts 文件夹，再通过 publish 命令将草稿移动到 source/_posts 文件夹中：

$ hexo publish [layout] <title>

四、 文件名称设置

Hexo 默认以标题做为文章文件的名称，由参数new_post_name: title.md指定。举例来说，设为 :year-:month-:day-:title.md 可让您更方便的通过日期来管理文章，可以使用以下占位符：

变量	描述
:title	标题（小写，空格将会被替换为短杠）
:year	建立的年份，比如， 2015
:month	建立的月份（有前导零），比如， 04
:i_month	建立的月份（无前导零），比如， 4
:day	建立的日期（有前导零），比如， 07
:i_day	建立的日期（无前导零），比如， 7

文件名称设置修改后不会对网站运行产生任何影响，只会对后续文件命名规则有影响，建议保持默认值即可。

五、引用数据共享

本小节严格来说是属于文章编辑的部分。笔者想了想还是按文章编写和资源使用这两个维度来区分，把共享数据和模板归为同一类别。但又与后续tag plugin有些联系所以有意放在此章末尾来讲解。

5.1、数据共享

如果某些数据是需要重复使用的，可以考虑使用「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件。举例来说，在 source/_data 文件夹中新建 menu.yml 文件，内容如下：

Home: /
Gallery: /gallery/
Archives: /archives/

您就能在模板中使用这些数据了：

<% for (var link in site.data.menu) { %>
  <a href="<%= site.data.menu[link] %>"> <%= link %> a>
<% } %>

渲染结果如下 :

<a href="/"> Home a>
<a href="/gallery/"> Gallery a>
<a href="/archives/"> Archives a>

5.2、资源共享

此处没有明确编码方法会比较迷糊，先了解下概念，详细使用方法可参考 hexo文章编写之Tags Plugin语法 文章中对图片和资源的用法描述，

1.全局资源

Asset 代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。比方说，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

2.文章专用资源

如果资源只给特定的文章使用，可以将 config.yml 文件中的 post_asset_folder 选项设为 true，然后在每一次通过 hexo new [layout]