hexo搭建博客还是用java写_[Java教程]hexo配置自己的博客站点

[Java教程]hexo配置自己的博客站点

0 2017-08-20 17:00:11

最近业余时间利用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首页，布局文件默认输出嵌入的页面

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示例 本文网址：http://www.shaoqun.com/a/321567.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

0