最近业余时间利用hexo为自己搭建一个高度自定义的个人站点，站点发布在github上，访问地址为：https://cqhaibin.github.io/。本博客简单介绍实现此站点的过程。效果图如下
构建此站点最初的目的主要方便自己使用本人开发的tomato time这个小工具。然后在实施的过程中加入的自己自己琢磨写的vueManager。
hexo的介绍和常用内容总结
hexo实现了通过markdown生成静态站点的能力，提供了高度定制化的能力。
1. hexo常用命令
命令名 | 说明 |
|---|---|
hexo init | 初始化一个hexo项目 |
hexo server | 启动本web服务，用于开发阶段 |
hexo g | 生成静态网页 |
hexo d | 部署网页 |
hexo clean | 清理缓存 |
hexo new "postName" | 新建文章 |
hexo new page "pageName" | 新建页面 |
2. hexo模板介绍
archive.ejs归档列表页模板，归档可以按照年份 月份实现的，list_archives显示列表
模板文件名 | 说明 |
|---|---|
layout.ejs | 模板的入口文件，也是整个站点的入口文件 |
index.ejs | 首页，布局文件<%- body %>默认输出嵌入的页面 |
post.ejs | 文章详细页 |
page.ejs | 页面 |
archive.ejs | 归档列表页模板，归档可以按照年份 月份实现的，list_archives显示列表 |
category.ejs | 分类显示页 |
tag.ejs | 标签页 |
hexo的模板解析，以layout.ejs为入口，所有静态页面（如：文章、页面、首页、标签、归档、分类等）都会以layout.ejs为模板。所以每个页面的公共部分应该在写layout.ejs中(如页头、页脚等）。
3. hexo-asset-image
此插件实现markdown引用的本地图片，在markdown转换为html也能被正确引用。
hexo模板开发
根据上述 “hexo模板介绍”，我们可以很较为轻松的开发出自己的模板，模板文件说明
模板文件夹、配置文件 | 说明 |
|---|---|
layout | 相关ejs模板信息，用于生成html时使用 |
script | 此文件夹下的.js文件，作为hexo插件 的一种扩展存在，在编译过程中起作用 |
source | 此文件下的文件或文件夹，在编译过程中会保持不变，供开发者使用 |
languages | 多语言包 |
_config.yml | 针对当前模板的配置文件，配置文件中的信息可以被ejs模板访问 |
说明：
1. 本示例模板使用的stylus作用css的预编译语言。
hexo插件开发
1. 插件需要入在node_moduels文件夹下，必须有.js和.package.json文件（也就是一个标准npm包即可）.
js文件：
代码语言：javascript复制'use strict'
console.log('hexo-filter-list start success....');
var core = {
findglyph: function(txt, glyph){
var num = 0;
while(txt.charAt(num) == glyph){
num ;
}
return num;
}
}
hexo.extend.filter.register('before_post_render',function(data){
//正则获取标题，并赋值给data对象
var regex = new RegExp("(#{1,6})\s*(.?)(\S*)", "g");
var titles = [], tmp;
while((tmp = regex.exec(data.content)) != null){
var txt = tmp[0], level = core.findglyph(txt, '#');
var val = {
level: level,
title: txt.substring(level).replace(/(^s*)/g, '')
}
console.log(val);
titles.push(val);
}
data.headers = titles;
});package.json文件
代码语言：javascript复制{
"name": "hexo-filter-list",
"main": "index",
"version": "1.0.0.0"
}注意：
1. hexo的事件监听都是有缓存的，内容不变，不会触发相应的事件。
2. 本示例的下载包中不包含node_modules，需要手动放将hexo-filter-list放在node_moduels中
3. 必须在根目录的package.json文件的依赖荐中加入hexo-filter-list包，如下
代码语言：javascript复制"dependencies": {
"hexo": "^3.2.0",
"hexo-filter-list": "^1.0.0.0",
}总结
本文只是hexo使用的初级探索，其中关于hexo的说明存在问题的地方希望各位朋友指正。如果你需要使用hexo，还是建议都看他的官方文档。
下载hexo-filter-list插件 下载hexo示例
