Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
1.安装：
npm install -g hexo-cli
2.建站
$ hexo init <folder>
$ cd <folder>
$ npm install
3.目录结构：
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
|
_config.yml
网站的 配置 信息，您可以在此配置大部分的参数。
package.json
webpack应用程序信息
scaffolds
模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。
source
资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes
主题 文件夹。Hexo 会根据主题来生成静态页面。
3.配置
可以在 _config.yml 中修改大部分的配置
title,description....这些
一个配置项由key: value组成，value前面一定要有一个空格，否则报错
默认层级太多（permalink: :year/:month/:day/:title/），会影响seo
permalink: :year:month:day/:title.html ---建立一个日期目录，网页生成放在日期目录里，比如20190626/test.html
permalink: :title.html ---直接生成在网站根目录，以文章名为网页名
把github上下载的主题放在themes文件夹
theme: indigo ---indigo是主题在themes里面的文件夹名
4.命令：
hexo new [layout] <title>
新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。
$ hexo new "post title with whitespace"
|
hexo generate --可以简写为hexo g
生成静态文件
hexo server
启动服务网
5.网站位置移动
使用命令新建一个站点，然后把之前站点的source、themes 、 _config.yml覆盖过去即可
6.写作
新建文章
在source/_posts目录下找到新建的文章，使用markdown语法进行编辑
7.如果编译出来的博客代码不是运行在根目录下，一定要配置_config.yml的root为实际的目录，比如：
root: /blog
8.搜索
Hexo本身也提供了两个插件来生成数据文件作为数据源：
hexo-generator-search生成xml格式的数据文件。
hexo-generator-json-content 生成json格式的数据文件
indigo主题支持hexo-generator-json-content，所以以hexo-generator-json-content为例：
安装：
$ npm install hexo-generator-json-content@2.2.0 --save
配置indigo主题是否开启搜索：
然后执行hexo generate时会自动生成content.json文件，若使用默认设置，生成的数据结构如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
meta: {
title: hexo.config.title,
subtitle: hexo.config.subtitle,
description: hexo.config.description,
author: hexo.config.author,
url: hexo.config.url
},
pages: [{ //-> all pages
title: page.title,
slug: page.slug,
date: page.date,
updated: page.updated,
comments: page.comments,
permalink: page.permalink,
path: page.path,
excerpt: page.excerpt, //-> only text ;)
keywords: null //-> it needs settings
text: page.content, //-> only text minified ;)
raw: page.raw, //-> original MD content
content: page.content //-> final HTML content
}],
posts: [{ //-> only published posts
title: post.title,
slug: post.slug,
date: post.date,
updated: post.updated,
comments: post.comments,
permalink: post.permalink,
path: post.path,
excerpt: post.excerpt, //-> only text ;)
keywords: null //-> it needs settings
text: post.content, //-> only text minified ;)
raw: post.raw, //-> original MD content
content: post.content, //-> final HTML content
categories: [{
name: category.name,
slug: category.slug,
permalink: category.permalink
}],
tags: [{
name: tag.name,
slug: tag.slug,
permalink: tag.permalink
}]
}]
|
hexo-generator-json-content默认生成的json数据内容非常全，默认配置如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
jsonContent:
meta: true
keywords: false
|
因为默认生成了很多我们不需要的数据，所以我们要对其进行配置让它只生成我们想要的内容,在hexo/_config.yml中加入：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
jsonContent:
meta: false
pages: false
posts:
title: true
|
这样，就只生成每篇文章的标题，日期，路径，标签和文本字段，同时也减小了文件的大小。
例如：
1
2
3
4
5
6
7
8
9
10
11
|
{
"title": "自定义HEXO站内搜索Javascript+json",
"date": "2016-11-09T01:24:56.000Z",
"path": "2016/11/09/自定义HEXO站内搜索Javascript-json.html",
"text": "目前很多Hexo博客都用的Swiftype和Algolia等第三......#这里显示整篇文章的内容",
"tags": [{
"name": "javascript,hexo",
"slug": "javascript-hexo",
"permalink": "http://chaoo.oschina.io/tags/javascript-hexo/"
}]
}
|
分类：
执行命令：
hexo new page categories
修改source/categories/index.md：
layout: categories
comments: false
在文章中添加分类：
---
title: test
date: 2019-06-20 14:05:07
categories: 蜜蜂试玩
tags:
---
标签：
执行命令：
hexo new page tags
修改/source/tags/index.md
layout: tags
comments: false
---
文章中添加标签：
---
title: test
date: 2019-06-20 14:05:07
categories: 蜜蜂试玩
tags: [蜜蜂试玩, 手机赚钱, 蜜蜂试玩教程,a,b,c,ddddd,eeeee,fffff,gggggggggggg]
---
- 如果出现加载慢的情况，可以执行hexo clean先删除临时文件，再执行hexo server
1.hexo根目录下的source目录会拷贝到最终生成的public文件夹中，所以我们要加的css，图片，第三方js等文件可以放到这里
2.当前主题的source目录会拷贝到最终生成的public文件夹中，所以我们要加的css，图片，第三方js等文件可以放到这里
在页面中使用第三方库：
//使用在线方式引入
<%- _js(cdn('jquery', '3.3.1', 'dist/jquery.min.js')) %>
<%- _css(cdn('bootstrap', '4.3.1', 'dist/css/bootstrap.min.css')) %>
//引用本地资源，需要先放入主题或根目录的source文件夹中
<%- _js('lib/bootstrap/bootstrap.min.js') %>
<%- _css('lib/bootstrap/bootstrap.min.css') %>
cdn地址在主题的配置文件中可以配置
注意：引入本地js资源，生成到public目录后，js可以自动改变了，所以第三方库最好都使用cdn方式引入，如果jsdelivr cdn速度慢，可以直接这样引入：
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
- 主题下的source目录打包后会生成到public目录，除_post,里面的目录代表路径，md文件转html文件,也可以由html文件替代md文件
浙公网安备 33010602011771号