主题源加载优化
把在NexT主题的_config.yml里面的:
# Uri of fonts host. E.g. //fonts.googleapis.com (Default)
host:
改为:
# Uri of fonts host. E.g. //fonts.googleapis.com (Default)
host: //fonts.lug.ustc.edu.cn
因为fonts.lug.ustc.edu.cn
是中科大的源,相比之前能快一下
博客双线部署
压缩网页静态资源
参考文章地址hexo-neat插件github地址
常规的做法是使用gulp
来进行压缩,每次压缩时还需要输入额外的命令,比较繁琐
配置hexo-neat压缩插件
在站点根目录下安装hexo-neat
博客目录下运行
npm install hexo-neat --save
如果报错,选择克隆插件,然后手动复制到插件目录里面hexo目录\node_modules\
git clone https://github.com/rozbo/hexo-neat
站点配置文件添加相关配置
配置信息添加到博客目录文件夹下的hexo目录\_config.yml
的末尾,可以安装自己的需求去自定义配置
# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
enable: true
exclude:
# 压缩css
neat_css:
enable: true
exclude:
- '**/*.min.css'
# 压缩js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'
报错及相应解决
参考文章地址
1、跳过压缩文件的正确配置方式
如果按照官方插件的文档说明来配置exclude,你会发现完全不起作用。这是因为配置的文件路径不对,压缩时找不到你配置的文件,自然也就无法跳过了。你需要给这些文件指定正确的路径,万能的配置方式如下:
neat_css:
enable: true
exclude:
- '**/*.min.css'
2、压缩html时不要跳过.md文件
.md文件就是我们写文章时的markdown文件,如果跳过压缩.md文件,而你又刚好在文章中使用到了NexT自带的tab标签,那么当hexo在生成静态页面时就会发生解析错误。这会导致使用到了tab标签的页面生成失败而无法访问。
3、压缩html时不要跳过.swig文件
.swig文件是模板引擎文件,简单的说hexo可以通过这些文件来生成对应的页面。如果跳过这些文件,那么你将会发现,你的所有页面完全没有起到压缩的效果,页面源代码里依然存在着一大堆空白。
4、点击的桃心效果消失
# 压缩js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'
- '**/love.js'
gitalk js文件报错
在上面的代码底部加入如下代码
- '**/comments.gitalk.js'
5、jquery pjax min js报错
我这里的 jquery pjax min js是指的加入pjax前需要以来的两个cdn文件,一个是jq,一个是它,我将它下载到了本地,不要在意这些细节~
同样加入如下代码
- '**/jquery_pjax_min_js.js'
图片懒加载
懒加载,在需要的时候才加载图片,而不是一次性加载完整个页面的图片
使用lazyload
插件,适用于本地图片很多的情况
配置
在Hexo
博客目录下,执行以下命令:
npm install hexo-lazyload --save
然后在你的 Hexo
目录的配置文件 _config.yml
中添加配置:
lazyload:
enable: true
# className: #可选 e.g. .J-lazyload-img
# loadingImg: #可选 eg. ./images/loading.png
参数:loadingImg
- 图片未加载时的代替图
默认路径: /js/lazyload-plugin/loading.svg
如果需要自定义,添填入 loading
图片地址,如果是本地图片,不要忘记把图片添加到你的主题目录下。
className
- 需要延迟加载的图片 class
选择器
默认会延迟加载文章中的所有图片。
如果不为空,请填入需要延迟加载的图片class
选择器