近年来业余时间利用hexo为友好搭建3个莫大自定义的村办站点,站点发布在github上,访问地址为:https://cqhaibin.github.io/。本博客简单介绍达成此站点的进度。效果图如下

json 1

 

创设此站点最初的目的主要惠及本身使用自家支付的tomato
time这些小工具。然后在履行的经过中投入的融洽团结探讨写的vueManager。

hexo的介绍和常用内容统计

hexo达成了经过markdown生成静态站点的能力,提供了中度定制化的能力。

json, 

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文件:

'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文件

{
    "name": "hexo-filter-list",
    "main": "index",
    "version": "1.0.0.0"
}

注意:

  1. hexo的事件监听都以有缓存的,内容不变,不会触发相应的轩然大波。

2.
本示例的下载包中不包罗node_modules,须要手动放将hexo-filter-list放在node_moduels中

  1. 务必在根目录的package.json文件的器重荐中进入hexo-filter-list包,如下

    “dependencies”: {

     "hexo": "^3.2.0",
     "hexo-filter-list": "^1.0.0.0",
    

    }

总结

正文只是hexo使用的低级探索,其中关于hexo的认证存在难题的地点希望各位朋友指正。要是你要求运用hexo,依旧提出都看他的法定文档。

下载hexo-filter-list插件               
下载hexo示例

相关文章

网站地图xml地图