1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Hexo博客Next主题配置加载优化性能提升

Hexo博客Next主题配置加载优化性能提升

时间:2021-01-22 07:32:12

相关推荐

Hexo博客Next主题配置加载优化性能提升

主题源加载优化

把在NexT主题的_config.yml里面的:

# Uri of fonts host. E.g. // (Default)host:

改为:

# Uri of fonts host. E.g. // (Default)host: //fonts.lug.

因为fonts.lug.是中科大的源,相比之前能快一下

博客双线部署

参考文章地址

压缩网页静态资源

参考文章地址

hexo-neat插件github地址

常规的做法是使用gulp来进行压缩,每次压缩时还需要输入额外的命令,比较繁琐

配置hexo-neat压缩插件

在站点根目录下安装hexo-neat

博客目录下运行

npm install hexo-neat --save

如果报错,选择克隆插件,然后手动复制到插件目录里面hexo目录\node_modules\

git clone /rozbo/hexo-neat

站点配置文件添加相关配置

配置信息添加到博客目录文件夹下的hexo目录\_config.yml的末尾,可以安装自己的需求去自定义配置

# hexo-neat# 博文压缩neat_enable: true# 压缩htmlneat_html:enable: trueexclude:# 压缩css neat_css:enable: trueexclude:- '**/*.min.css'# 压缩jsneat_js:enable: truemangle: trueoutput:compress:exclude:- '**/*.min.js'- '**/jquery.fancybox.pack.js'- '**/index.js'

报错及相应解决

参考文章地址

1、跳过压缩文件的正确配置方式

如果按照官方插件的文档说明来配置exclude,你会发现完全不起作用。这是因为配置的文件路径不对,压缩时找不到你配置的文件,自然也就无法跳过了。你需要给这些文件指定正确的路径,万能的配置方式如下:

neat_css:enable: trueexclude:- '**/*.min.css'

2、压缩html时不要跳过.md文件

.md文件就是我们写文章时的markdown文件,如果跳过压缩.md文件,而你又刚好在文章中使用到了NexT自带的tab标签,那么当hexo在生成静态页面时就会发生解析错误。这会导致使用到了tab标签的页面生成失败而无法访问。

3、压缩html时不要跳过.swig文件

.swig文件是模板引擎文件,简单的说hexo可以通过这些文件来生成对应的页面。如果跳过这些文件,那么你将会发现,你的所有页面完全没有起到压缩的效果,页面源代码里依然存在着一大堆空白。

4、点击的桃心效果消失

# 压缩jsneat_js:enable: truemangle: trueoutput: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选择器

我的个人博客文章地址,欢迎访问

我的CSDN文章地址,欢迎访问

我的简书文章地址,欢迎访问

我的GitHub主页,欢迎访问

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。