官网：https://hexo.io/themes/
参考网址: Hexo配置
主题一览：
京东凹凸实验室（最流行的卡片式）：
https://aotu.io/
hexo主题-skapp
项目简介
项目为 hexo 主题 skapp。
本项目主要按照，附上预览地址： demo
主题效果
使用方式
1.复制代码
1
2
3
| cd themes
git clone https://github.com/Mrminfive/hexo-theme-skapp.git
|
2.安装依赖
clone 完后将根目录下的 _config.yml 文件中的 theme 字段设置为 hexo-theme-skapp，同时安装对应 node 依赖：
1
2
| npm install --save hexo-autoprefixer hexo-filter-cleanup hexo-generator-feed hexo-generator-sitemap hexo-renderer-sass hexo-renderer-swig mamboer/lunr.js moment node-sass object-assign
|
注意：如果安装失败可尝试用 cnpm 进行安装。另外，由于使用 nodejieba 分词库，所以 windows 下用户应提前安装好相应编译环境。操作如下：
1
2
3
| npm install -g windows-build-tools
npm install -g node-gyp
|
3.预览
hexo server 进行本地预览了。
注：如果样式生成失败，请用 hexo clean 清除下缓存后再 hexo server。
主题配置
设置语言
编辑根 _config.yml 文件，将 language 设置为你想要的语言：
| 语言 | 代码 |
| ——– | —– |
| English | en |
| 简体中文 | zh-cn |
设置菜单
编辑根 _config.yml 文件，将 menu 设置为如下：
主题默认的菜单项有：
| 键值 | 设定值 | 显示文本（简体中文） |
| ——- | —————— | ——————– |
| home | home: / | 首页 |
| archive | archive: /archives | 归档 |
| about | about: /about | 关于 |
| search | search: /search | 搜索页 |
博客信息配置
以下配置均在根 _config.yml 中：
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
46
47
48
49
50
51
| # Site
# 博客的标题
title: MINFIVE
# banner显示的子标题
subtitle: MINFIVE BLOG
# banner显示的简短介绍
subtitle_desc: 日常学习与兴趣交流
# seo关键字
keywords: minfive, minfive blog, 前端博客, 前端, 程序员, 前端开发, 全栈开发, node.js, javascript
# 博客介绍（同时用于seo）
description: 日常学习与兴趣交流的个人博客
# 个人介绍
introduction: 不思量，自难忘！
# 博客的favicon图标，支持本地及在线两种方式，本地请将图标放置于 themes/hexo-theme-skapp/source/img 目录下
favicon_ico: http://oo12ugek5.bkt.clouddn.com/blog/images/favicon.ico
# 博客的左上角logo图标，支持本地及在线两种方式
logo: http://oo12ugek5.bkt.clouddn.com/images/logo-text-white.png
# 头像/二维码（用于显示在底部）二选一
avatar: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png
# qrcode: http://oo12ugek5.bkt.clouddn.com/images/qrcode.png
# 文章的默认封面
default_cover: http://oo12ugek5.bkt.clouddn.com/images/default_cover.png
# header 的背景图
header_cover: http://oo12ugek5.bkt.clouddn.com/blog/images/banner-bg.jpg
# 404 页面的背景图
error_page_bg: http://oo12ugek5.bkt.clouddn.com/blog/images/dogs.jpg
# 页面加载loading图标
loader_img: http://oo12ugek5.bkt.clouddn.com/blog/images/loader.gif
# 站长信息
author:
name: minfive
link: https://github.com/Mrminfive
# 用于页面 footer 的站长信息
about:
info: 本站是基于 Hexo 搭建的静态资源博客，主要用于分享日常学习、生活及工作的一些心得总结，欢迎点击右下角订阅 rss。
address: Guangzhou, Guangdong Province, China
email: chenxiaowu1994@outlook.com
|
联系方式
在 /source/_data 目录下创建 contact.yml 文件将在页面底部生成相应的标签链接，如：
配置内容如下：
1
2
3
4
5
6
7
8
9
10
| - title: github
icon: icon-github
link: https://github.com/Mrminfive
- title: email
icon: icon-email
link: mailto:chenxiaowu1994@outlook.com
- title: rss
icon: icon-rss
link: /atom.xml
|
其中 title 表示链接的 title 值，icon 表示使用css图标，link 表示跳转的链接。
icon 仅支持如下值：
- icon-email: 邮箱
- icon-rss: rss
- icon-in: linkedin
- icon-twitter: twitter
- icon-facebook: facebook
- icon-github: github
- icon-zhihu: 知乎
- icon-douban: 豆瓣
- icon-weibo: 微博
- icon-telegram: telegram
外部链接
在 source/_data 目录下创建 footer_link.yml 文件将在页面底部生成相应的外部链接列表，如：
个性化配置
主题使用 sass 预编译样式，笔者将所有基本样式参数封装在 hexo-theme-skapp/source/scss 下的 _theme.scss 文件文件中：
基本使用
每篇文章的基本配置如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| title: Hello World
cover: http://oxnuwmm3w.bkt.clouddn.com/hello-world.jpeg
# 作者信息，多作者则设置为数组
# 单作者
author:
nick: BruceYJ
link: https://www.github.com/BruceYuj
# 多作者
author:
- nick: BruceYJ
link: https://www.github.com/BruceYuj
- nick: minfive
link: https://www.github.com/Mrminfive
# 如果文章为转载文章，需要多加文章出处项
editor:
name: Minfive
link: https://www.github.com/Mrminfive
# 首页每篇文章的子标题
subtitle: your subtitle
|
title为文章的标题，cover为文章的首图和缩略图，author为文章的作者信息。
第三方服务
统计
百度统计
主题已集成百度统计，使用百度统计仅需要获取百度统计的脚本id并将其配置到根 _config.yml 中：
1
2
3
| # Baidu statistic
baidu_statistic: ***
|
谷歌统计
主题已集成谷歌统计，使用谷歌统计仅需要获取谷歌统计的脚本id并将其配置到根 _config.yml 中：
1
2
3
| # Google statistic
google_statistic: ***
|
不蒜子统计
主题使用不蒜了统计文章pv，默认不开启，可在根 _config.yml 配置开启:
1
2
3
| # Busuanzi
busuanzi: true
|
内容搜索
主题使用 lunr 进行站内检索，暂不支持配置。
将如下代码写入根 _config.yml 中：
1
2
3
4
5
6
7
8
9
10
| # Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
# Sitemap
sitemap:
path: sitemap.xml
|
评论系统
gitalk
主题集成 gitalk 作为评论功能。开启评论功能需要注册 Github Application，具体请参照 gitalk文档，申请完后在根 _config.yml 配置：
1
2
3
4
5
6
7
8
9
| # Gitalk
gitTalk:
clientId: ***
clientSecret: ***
repo: ***
owner: ***
admin:
- ***
|
1
2
3
4
5
6
7
| clientID: `Github Application clientID`,
clientSecret: `Github Application clientSecret`,
repo: `Github 仓库名`,//存储你评论 issue 的 Github 仓库名（建议直接用 GitHub Page 的仓库名）
owner: 'Github 用户名',
admin: ['Github 用户名'], //这个仓库的管理员，可以有多个，用数组表示，一般写自己,
id: 'window.location.pathname', //页面的唯一标识，gitalk 会根据这个标识自动创建的issue的标签,我们使用页面的相对路径作为标识
|
