Volantis A Wonderful Theme for Hexo
Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性,您可以轻松搭建一个极简风格的博客,也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。
开始使用
Volantis
中文创作者社区
由于cdn.jsdelivr.net在国内不太稳定,替代的jsd.cdn.zzko.cn稳定性稍好,但是也不是100%稳定,因而需要一个脚本实时切换到合适的CDN。freecdn-js能实现这个需求,但是我的文件(图片、js等)储存在GitHub图床,而freecdn-js本身需要被加速的文件的hash,因此需要自己写脚本处理下载图片并计算。因为图片等文件的cdn链接是直接写在.md文件中的,所以写了一个正则脚本来提取cdn的链接。
我们要得到的结果如封面所示
由于博客采用了图片懒加载(lazyload)插件,在加载dom后和图片加载成功之前,图片占位图为1px的像素,图片加载成功之后,则会把布局撑开,造成布局抖动。如果把和要加载的图片(本博客所有图片都放在了GitHub图床上,所以要用到image-size库访问远程图片)一样大小的占位图替代1px大小的占位图,则能解决布局抖动问题。本post将会占位图以硬编码的方式写到dom中,这需要修改在生成hexo博客时会用到的fancybox.js(或许每个主题用到的文件里都不一样,但最终都会使用hexo.extend.tag.register()方法;本博客使用volantis主题)。
通过修改metingjs的代码将Aplayer播放器的音乐源改为本地,经过测试,Volantis自带的消息通知,右键播放器,导航栏播放器均正常显示.经过修改也可以适用于其他使用metingjs的主题
新的代码仅向metingjs增加了本地音源功能,原有功能保持不变
暗黑模式动画,看板娘随音乐启停说话,主页特效,KaTeX公式,网页压缩,透明卡片等
部分内容非Volantis主题也适用
添加Gitee动态友链
本篇文章记录了我对 Volantis 主题一路磕磕碰碰的个性化配置,希望为接下来要去配置的新手避个坑
为暗黑模式的切换增加动画
优化背景图较多时的网页加载速度
统计一下目前使用的自定义字体及调用。
Volantis 主题可直接参考使用。
1 / 6