Hexo 图片懒加载
引言 {#引言} ======== 知识小课堂:图片加载方式有两种,一个是预加载,另一个就是懒加载,那你了解什么是预加载和懒加载吗?下面来学习一下。 参考:图片预加载与图片懒加载(缓载)的区别与实现 * 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片。当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间。否则,如果一个页面的...
引言 {#引言} ======== 知识小课堂:图片加载方式有两种,一个是预加载,另一个就是懒加载,那你了解什么是预加载和懒加载吗?下面来学习一下。 参考:图片预加载与图片懒加载(缓载)的区别与实现 * 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片。当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间。否则,如果一个页面的...
引言 {#引言} ======== hexo-tag-aplayer 是Aplayer在hexo上的插件,这里的配置参考的是[官方文档](https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md) 安装 hexo-tag-aplayer {#安装-hexo-tag-aplay...
安装插件 {#安装插件} ============ |-----------|---------------------------------------------| | ``` 1 ``` | ``` npm install --save hexo-tag-aplayer ``` | [插件github地址](https://github.com/MoePlayer/...
引言 {#引言} ======== 每当浏览器在加载html的过程中遇到这样的标签时,浏览器会暂停继续构建html,而是优先执行当前的js脚本,等执行完毕后再继续加载后面的html。 怎样加快博客的加载速度呢?可以通过给`<script></script>`添加`defer`和`ansyc`属性来实现异步加载,调整js的加载时间和顺序,确保浏览器构建...
pjax 是如何工作的? {#pjax-是如何工作的?} ============================ pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。 同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。 并且展现方式支持动画技术,可以使用系统自带的动画方式,也可以自定义动画展现方式。 访...
引言 {#引言} ======== PWA的全称是Progressive Web Apps,译为渐进式网络应用程序。装配了PWA以后,用户可以将网站作为WEB APP安装到自己的设备上,以原生应用般的方式浏览博客,同时借助PWA的缓存机制,能够更快速的浏览。本文讨论的是使用两种方案实现PWA。最终效果不尽相同,但是都可以实现原生应用体验和更新弹窗提示。其实还有个离线博客,但是...
安装插件 {#安装插件} ============ |-----------|--------------------------------------------------| | ``` 1 ``` | ``` npm install hexo-butterfly-swiper --save ``` | 添加配置信息 {#添加配置信息} ===============...
首先确保 Valine 的基础功能是正常的,可以参考官网:<https://valine.js.org/> 进入 Leancloud 对应的 Valine 应用中。 Valine Admin项目代码:<https://github.com/DesertsP/Valine-Admin> 快速部署 {#快速部署} ============ 1. 在L...
前言 {#前言} ======== "hexo-generator-searchdb"插件功能更为强大,这次来介绍"hexo-generator-searchdb",其实与"hexo-generator-search"使用的方法非常相似。 安装依赖 {#安装依赖} ============ 前往博客根目录,打开c...
前言 {#前言} ======== Hexo默认只提供了按发布日期的排序,本文将介绍通过修改`hexo-generator-index`来达到文章置顶的效果。 原理:在Hexo生成首页HTML时,将top值高的文章排在前面,可以达到置顶功能。 操作步骤 {#操作步骤} ============ 修改Hexo文件夹下的node_modules/hexo-generator...