hexo配置自己的博客站点
最近业余时间利用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文件:
'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中
3. 必须在根目录的package.json文件的依赖荐中加入hexo-filter-list包,如下
"dependencies": {
"hexo": "^3.2.0",
"hexo-filter-list": "^1.0.0.0",
}
总结
本文只是hexo使用的初级探索,其中关于hexo的说明存在问题的地方希望各位朋友指正。如果你需要使用hexo,还是建议都看他的官方文档。
- 再论 ASP.NET 中获取客户端IP地址
- 洛谷P3038 [USACO11DEC]牧草种植Grass Planting
- 【 关关的刷题日记47】Leetcode 38. Count and Say
- 《Python自然语言处理》答案第一、二章
- 【 关关的刷题日记49】 Leetcode 434. Number of Segments in a String
- 自然语言处理构建文本向量空间1.百科2.源代码3.参考:
- 小爬虫之爬取豆瓣电影排行榜1.技术路线2.任务3.分析4.运行结果5.源码
- Numpy 修炼之道 (5)—— 索引和切片
- 深入理解final关键字
- Numpy 修炼之道 (4)—— 基本运算操作
- 一些APT攻击案例分享
- 浅谈命令查询职责分离(CQRS)模式
- Numpy 修炼之道 (3)—— 数据类型
- 熔断器设计模式
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux系统安装zookeeper 服务的方法
- 详解Linux中关于引号的那些事
- seaborn可视化数据框中的多个列元素
- Android OpenGLES如何给相机添加滤镜详解
- VmWare安装centos7无法上网的解决方法
- 如何修改CentOS服务器时间为北京时间
- linux下搭建go环境的安装配置讲解
- linux下搭建scala环境并写个简单的scala程序
- 在Linux系统下上传项目到码云的方法
- 使用seaborn绘制热图
- CentOS中环境变量与配置文件的深入讲解
- 详解linux下fsevents模块引起的npm ls报错解决办法
- 解决nginx/apache静态资源跨域访问问题详解
- 可怕的万圣节 Linux 命令
- linux环境不使用hadoop安装单机版spark的方法