设置子模块
将主题添加为子模块
git submodule add https://github.com/volantis-x/hexo-theme-volantis.git themes/volantis |
多人协同
默认的作者信息在主题配置文件中设置:
# 文章布局 |
Volantis 支持多个作者在一个站点发布文章,其他作者信息需要写在数据文件中,例如:
Jon: |
在文章的 front-matter 中新增 author
即可:
--- |
为网站提速
加载速度
减少不必要的 js 插件,例如字数统计、动态背景。
查找并解决拖慢速度的资源,以 Chrome 浏览器为例:
- 页面中点击右键,选择「检查」。
- 在右边的窗口中「Network」选项卡,并勾选「Disable cache」。
- 刷新网页,查看加载速度慢的资源。
3.1. 加载缓慢的图片,建议使用 CDN。
3.2. 加载缓慢的可以不用的 js 插件,建议舍弃。
3.3. 加载缓慢却必须使用的 js 插件,建议下载并自己上传至 jsdelivr。
运行速度
- 访问具有动态特效背景(如雪花、粒子等)的网站时,手机很快会发烫变卡,笔记本很快会风扇狂转并且浏览器提示建议关闭此页面。如果你希望网站有好的使用体验请尽量不要安装这类插件。
优化 SEO
seo: |
在 front-matter 中,可以设置 keywords
、description
、robots
和 seo_title
。其中 seo_title
仅仅用作网页标题,优先级高于 title
。
文章内部不要使用 H1 标题。
通过死链检测工具检查并删除无法访问的链接。
安装 SEO 优化插件:
页面不要堆砌关键词,不要频繁更改路径。
使用 CDN
对于大部分将博客 deploy 到 GitHub 的用户来说,直接加载本地资源速度比较慢,可以使用 jsdelivr 为开源项目提供的 CDN 服务。
开启方法
# use_cdn: /source/js/* 中的JS文件(JS Only)使用jsdelivr的min版本加速 |
如果你需要对样式进行 DIY,可以只关闭 style 文件的 CDN。
如果你需要对样式进行 DIY,请注意首屏渲染和异步延迟加载的差异。
自定义 CDN
如果你把对应的文件上传到自己的 CDN 服务器,可以把对应的链接改为自己的 CDN 链接。
尝试使用 Terser 压缩 ES6
安装压缩工具
npm install -g gulp |
gulp 配置文件
var gulp = require('gulp'); |
运行压缩
gulp |
安装 Service Worker 服务
# 全局导入 |
在blog/source
中创建sw.js
文件。
内容如下:
importScripts('https://unpkg.com/workbox-cdn@5.1.3/workbox/workbox-sw.js'); |
安装「相关文章」插件
安装插件
npm i -S hexo-related-popular-posts
插件的自定义配置方法:
如果您使用了头图,可以在站点配置文件中添加以下设置来让相关文章显示正确的文章头图:
popularPosts: |
注意
需要升级到 5.0.1 及以上版本才可以支持自定义头图,详见 #29
分析与统计
默认支持 不蒜子 的访问统计,可以自行添加百度统计和 Google Analytics。
字数和阅读时长
- 安装以下插件:
npm i --save hexo-wordcount
- 修改配置文件,将
wordcount
插件打开blog/_config.volantis.yml plugins:
...
# 文章字数统计、阅读时长,开启需要安装插件: npm i --save hexo-wordcount
wordcount:
enable: #true - 然后修改配置文件,将
wordcount
写入需要显示的 meta 位置:blog/_config.volantis.yml # 文章布局
article:
...
# 文章详情页面的文章卡片本体布局方案
body:
# 文章顶部信息
# 从 meta_library 中取
top_meta: [..., wordcount, ...]
...
# 文章底部信息
# 从 meta_library 中取
bottom_meta: [..., wordcount, ...]
CNZZ 统计
请参考 ZYMIN 的这篇教程:
更多进阶玩法
详见 @TRHX 的这篇博客:
内含卡片半透明、增加卡通人物、自定义鼠标样式、鼠标特效、烟花特效、彩色滚动字体、网站运行时间、动态浏览器标题、雪花飘落特效等多种详细教程。