Github+Hexo个人博客搭建:butterfly主题配置
分类页
在项目根目录下,在命令行输入:
1 | hexo new page categories |
你会找到 source/categories/index.md 这个文件, 修改这个文件内容:
1 | --- |
标签页
在项目根目录下,在命令行输入:
1 | hexo new page tags |
你会找到 source/tags/index.md 这个文件, 修改这个文件内容:
1 | --- |
本地搜索
在项目根目录下,在命令行输入:
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 | comments: |
1 | gitalk: |
重新部署后
Pjax
当用户点击链接,通过 ajax 更新页面需要变化的部分,然后使用 HTML5 的 pushState 修改浏览器的 URL 地址。
这样可以不用重复加载相同的资源(css/js), 从而提升网页的加载速度。
修改主题配置文件_config.butterfly.yml:
1 | # 如果你有使用hexo-douban,可配置这个 |
Gulp压缩
一个可以自动压缩 HTML、JS、CSS 文件、图片,可以将 ES6 语法转换成 ES5,减少网络请求,同时降低网络负担
首先全局安装 gulp
1 | npm install -g gulp-cli |
安装babel7
1 | 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 |
安装压缩 HTML
1 | npm install gulp-htmlclean --save-dev |
安装压缩 CSS
1 | 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 | var gulp = require('gulp'); |
使用:
在 hexo g 之后运行 gulp 即可
例如:
1 | hexo cl && hexo g && gulp && hexo d |