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,还是建议都看他的官方文档。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏nummy

PyCharm使用内置SSH

在主菜单中选择Tools|Start SSH Session.., 然后点击弹出框中的Edit credentials:

15620
来自专栏软件开发 -- 分享 互助 成长

连续多行输入--C++ 中字符串标准输入的学习及实验(续篇)

编程中常常会用到连续多行输入的情况,如果事先知道要输入多少行的话,可以直接定义一个变量,然后用循环就可以实现了,但有时候事先并不知道,要输入多少行,于是就可以用...

55450
来自专栏Jerry的SAP技术分享

Mac终端给命令设置别名alias的办法

在Mac里使用curl https://www.google.com,运行后得不到期望看到的google首页的HTML source code。

18630
来自专栏轻扬小栈

破狗,pogoplus 之 百度同步 SyncY

15110
来自专栏云计算教程系列

如何在Ubuntu 14.04上更改PHP设置

PHP是一种服务器端脚本语言,被许多流行的CMS和博客平台使用,如WordPress和Drupal。它也是流行的LAMP和LEMP堆栈的一部分。在设置基于PHP...

41500
来自专栏向治洪

svn插件安装

以下是一些关键步骤: ? ? 其中http://subclipse.tigris.org/update_1.0.x是SVN插件的下载站点【subclipse是E...

21650
来自专栏用户画像

Mac安装maven

maven:https://maven.apache.org/download.cgi , 并解压到某个目录。

1.2K30
来自专栏我是攻城师

Nginx配置的一些小功能

38150
来自专栏技术专栏

Intellij IDEA 修改项目名称

5.3K20
来自专栏iOS开发笔记

iOS开发之-cordova环境搭建

目前主流应用程序大体分为三类:Web App、Hybrid App、 Native App ? 今天就写一些关于hybrid APP的一些东西 环境说明: 操...

33750

扫码关注云+社区

领取腾讯云代金券