主题源加载优化

把在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 选择器


我的个人博客文章地址,欢迎访问
我的CSDN文章地址,欢迎访问
我的简书文章地址,欢迎访问
我的GitHub主页,欢迎访问

Hexo博客Next主题配置加载优化性能提升的更多相关文章

  1. hexo博客yili主题个性化自定义教程(1) ——借鉴中学习,初认yili主题

    文章转载于:hexo博客yili主题个性化自定义教程(1) --借鉴中学习,初认yili主题 这个博客跌跌撞撞也弄了好多天了,由于Next主题不知道什么情况,被我玩坏了.所以换了一个主题. 大名鼎鼎的 ...

  2. hexo博客的相关配置

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 前面两节讲解了hexo博客的搭建以及jacman主题的配置,这节主要讲解博客的一些相关配置.比如404页面,图床,自定义页面,个人网站绑定(重要的 ...

  3. WordPress博客网站fonts.useso加载慢解决办法

    WordPress博客网站fonts.useso加载慢解决办法 之前WordPress博客因为google字体库访问不了替换成360的useso,最近WordPress博客网站一直等待fonts.us ...

  4. Hexo博客maupassant主题添加Google Adsense广告

    自从在 Github Page 落户以后,很长一段时间使用的是极简且有点艺术范儿的 fexo 主题,而不是大名鼎鼎的 next 主题.后来偶然发现了符合我审美的Hexo博客 maupassant 主题 ...

  5. 关于Hexo博客NEXT主题(Gmini)站点图标不显示,显示错误的解决办法

    关于Hexo博客NEXT主题(Gmini)站点图标不显示,显示错误的解决办法   最近闲着没事自己利用Hexo和Github搭了个博客,但是在NEXT(Gmini)主题优化时,出了很多错误,图标不显示 ...

  6. Hexo博客网站再配置

    这两天整理网站方面的事,本地IIS部署,个人网站,发现我的hexo做的个人网站实在很单调,于是找来资料做进一步的配置. 一.网站图标 看一下hexo\themes\modernist\layout\_ ...

  7. hexo博客yilia主题深度设置

    转载:Shuyan http://dongshuyan.com/2019/05/24/hexo博客注意事项/ 1.微信分享异常 这里是themes\yilia\layout\ _partial\pos ...

  8. hexo博客更换主题

    前边我们已经学会了博客的搭建了,这次我们来看看怎么样让我们的博客更漂亮,更个性化.那就是来更换博客的主题,让我们的博客与众不同起来.我们可以去hexo的主题官网去挑选你自己喜欢的主题风格.里边收录了很 ...

  9. hexo 搭建静态博客 + Next 主题配置

    参考手册 HEXO:https://hexo.io/zh-cn/ NEXT:http://theme-next.iissnan.com/ 安装hexo npm install hexo-cli -g ...

  10. 【3】hexo+github搭建个人博客的主题配置

    更换博客主题 主题可参考:https://hexo.io/themes/ hexo默认主题:Landscape 示例主题:Next 下载Next主题 进入Blog所在目录,输入下载命令 #进入Blog ...

随机推荐

  1. Linux(五)用户管理与文件权限

    1 常用的基本命令 Shell可以看作一个命令解释器,为我们提供一个交互式的文本控制台界面,可以通过终端控制台来输入命令,由shell进行解释并最终交给linux内核运行.可以看作用户和硬件的桥梁. ...

  2. 轻量级Web框架Flask(二)

    Flask-SQLAlchemy MySQL是免费开源软件,大家可以自行搜索其官网(https://www.MySQL.com/downloads/) 测试MySQL是否安装成功 在所有程序中,找到M ...

  3. 关于spring嵌套事务,我发现网上好多热门文章持续性地以讹传讹

    事情起因是,摸鱼的时候在某平台刷到一篇spring事务相关的博文,文章最后贴了一张图.里面关于嵌套事务的表述明显是错误的. 更奇怪的是,这张图有点印象.在必应搜索关键词PROPAGATION_NEST ...

  4. [OpenCV-Python] 15 图像阈值

    文章目录 OpenCV-Python:IV OpenCV中的图像处理 15 图像阈值 15.1 简单阈值 15.2 自适应阈值 15.3 Otsu' 's 二值化 15.4 Otsu' 's 二值化是 ...

  5. JS中内存泄漏的几种情况

    JavaScript 中的内存泄漏是指程序中使用的内存不再被需要却没有被释放,最终导致浏览器或者 Node.js 进程使用的内存越来越大,直到程序崩溃或者系统运行缓慢. 在 JavaScript 中, ...

  6. 2021-02-23:给定一个正数n,求n的裂开方法数。规定:后面的数不能比前面的数小 。比如4的裂开方法有: 1+1+1+1、1+1+2、1+3、2+2、4,5种,所以返回5。

    2021-02-23:给定一个正数n,求n的裂开方法数.规定:后面的数不能比前面的数小 .比如4的裂开方法有: 1+1+1+1.1+1+2.1+3.2+2.4,5种,所以返回5. 福哥答案2021-0 ...

  7. 【Java】JTable的数据刷新

    前言 这段时间在写一个大实验,水果超市管理系统,yes,我觉得挺大的,但是就当成了一个实验,接下来还有一个课程设计和一个实训,more bigger... 问题 在我把其他的都写好的时候去写UI层,发 ...

  8. PHP编程与系统开发

    PHP开发环境配置 一.开发环境 1.XAMPP或LNMP.WNMP,先安装widows版本的XMAPP-5.6版本(PHP 5.6) 2.VSCode:微软开发的集成开发环境(IDE) 二.安装教程 ...

  9. 2023-05-24:为什么要使用Redis做缓存?

    2023-05-24:为什么要使用Redis做缓存? 答案2023-05-24: 缓存的好处 买啤酒和喝啤酒的例子可以帮助我们理解缓存的好处. 假设你在超市里买了一箱啤酒,如果你需要每次想喝啤酒就去超 ...

  10. svn is already locked 最终解决方案

    今日执行项目更新时,手贱点击了cancel 中断了操作,最后导致项目被锁,杯具了. 首先想到了Clean up 直接提示 看来不行呀 -// 省略 n 多种尝试 最后使用删除db 中的 lock 表来 ...