Github+Hexo 个人博客搭建:butterfly 主题配置
分类页
在项目根目录下,在命令行输入:1
hexo new page categories
你会找到 source/categories/index.md 这个文件,修改这个文件内容:1
2
3
4
5
6---
title: Categories
date: 2022-01-13 14:17:49
type: "categories"
comments: false
---
标签页
在项目根目录下,在命令行输入:1
hexo new page tags
你会找到 source/tags/index.md 这个文件,修改这个文件内容:1
2
3
4
5
6---
title: Tags
date: 2022-01-13 14:17:49
type: "tags"
comments: false
---
本地搜索
在项目根目录下,在命令行输入:1
npm install hexo-generator-search --save
_config.yml
中添加1
2
3
4search:
path: search.xml
field: post
content: true_config.butterfly.yml
修改为重新部署即可在顶栏中找到搜索按钮1
2local_search:
enable: true
后台管理
只能用于本地管理
在项目根目录下,在命令行输入:1
npm install --save hexo-admin
设置密码
先将服务启动1
hexo clean && hexo g && hexo s
访问 http://localhost:4000/admin/#/auth-setup
输入对应的账号密码信息,自动生成配置信息
_config.yml
文件末尾添加复制的内容
重启服务后,再次访问 http://localhost:4000/admin 就会提示你输入密码
评论功能
使用 Gitalk 插件
Gitalk 的特性:
- 使用 GitHub 登录
- 支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]
- 支持个人或组织
- 无干扰模式(设置 distractionFreeMode 为 true 开启)
- 快捷键提交评论 (cmd|ctrl + enter)
使用 Gitalk 需要你做一些提前准备:
- 在 github 上创建一个仓库,Gitalk 会把评论放在这个仓库的 issues 里面。
- 在 github 上申请一个 GitHub OAuth application,来让 Gitalk 有权限操作 github 上的仓库。
申请一个 OAuth application
GitHub OAuth application
允许程序来操作你的 github 账户,可以对 github 中仓库读写。
打开 https://github.com/settings/applications/new 进入新建页面
在注册 OAuth 应用页面有如下几个参数需要填写:
Application name:必填,OAuth 的名字
Homepage URL:必填,你应用的网址,哪个网站用了 Gitalk 组件,就填写这个网址
Application description:选填,该 OAuth 的说明
Authorization callback URL:必填,授权成功后回调网址,跟 Homepage URL 参数保持一致就好
这些参数在注册成功后是可以修改
``_config.butterfly.yml` 修改 gitalk 两处配置信息1
2
3
4
5
6
7
8
9
10
11comments:
# Up to two comments system, the first will be shown as default
# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
use:
- Gitalk
text: true # Display the comment name next to the button
# lazyload: The comment system will be load when comment element enters the browser's viewport.
# If you set it to true, the comment count will be invalid
lazyload: true
count: true # Display comment count in top_img
card_post_count: false # Display comment count in Home Page
1
2
3
4
5
6
7
8
9
10
11
12gitalk:
client_id: 你的client id
client_secret: 你的client secret
repo: 你的github仓库
owner: 你的github用户名
admin: 该仓库的拥有者或协作者
language: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ru
perPage: 10 # Pagination size, with maximum 100.
distractionFreeMode: false # Facebook-like distraction free mode.
pagerDirection: last # Comment sorting direction, available values are last and first.
createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically
option:
重新部署后
Pjax
当用户点击链接,通过 ajax 更新页面需要变化的部分,然后使用 HTML5 的 pushState 修改浏览器的 URL 地址。
这样可以不用重复加载相同的资源(css/js), 从而提升网页的加载速度。
修改主题配置文件_config.butterfly.yml:
1
2
3
4# 如果你有使用hexo-douban,可配置这个
pjax:
enable: true
exclude:
Gulp 压缩
一个可以自动压缩 HTML、JS、CSS 文件、图片,可以将 ES6 语法转换成 ES5,减少网络请求,同时降低网络负担
首先全局安装 gulp1
2npm install -g gulp-cli
npm install gulp
安装 babel71
npm install gulp-babel @babel/core @babel/preset-env babel-preset-es2015 babel-core@6 --save
安装模块1
npm install gulp-cache gulp-changed gulp-clean gulp-debug gulp-htmlmin gulp-minify gulp-util --save-dev
安装压缩 HTML1
npm install gulp-htmlclean --save-dev
安装压缩 CSS1
npm install gulp-minify-css --save-dev
安装压缩 JS
这里我选择 gulp-uglify + gulp-babel,可以把 ES6 转换成 ES5,因为兼容所以选择1
npm install --save-dev gulp-uglify
安装如上插件之后,在你的博客根目录创建一个 gulpfile.js
文件并把如下代码 CV 进去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
46var gulp = require('gulp');
var gutil = require('gulp-util');
var clean = require('gulp-clean');
var debug = require('gulp-debug');
var cache = require('gulp-cache');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');
var changed = require('gulp-changed');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var minifycss = require('gulp-minify-css');
// 压缩css文件
gulp.task('minify-css', function() {
return gulp.src('./public/css/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public/css'));
});
// 压缩js文件,支持将ES6代码转换成ES5代码
gulp.task('minify-js', function() {
return gulp.src('./public/lib/**/*.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(uglify())
.pipe(gulp.dest('./public/lib'));
});
// 压缩html文件
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'));
});
// gulp3的写法
gulp.task('default', gulp.parallel('minify-css', 'minify-js', 'minify-html'));
使用:
在 hexo g 之后运行 gulp 即可
例如:1
hexo cl && hexo g && gulp && hexo d