Hexo博客优化加速

上一篇文章已经具体讲述了博客的搭建与基本使用，接下来记录一下对博客的优化的工作，从图片加载优化和 PicGo 图床来介绍。

图片加载优化

概念介绍

预加载就是进入项目前提前加载资源，避免在项目中加载缓慢，影响用户体验

懒加载一般是当图片滚动进可视窗口内才加载图片，可视窗口之外的图片则不加载

matery主题整体采用预加载模式，这样可以在我们访问其他页面的时候会稍微快点。我们可以在这个基础上对图片进行懒加载，这样做效果就是 html、css、js 加载之后，图片再加载。既保证了网页的打开速度，也不会因图片的庞大体积而拖累了整个页面的加载。

安装插件

在 Blog 根目录执行
1
npm install hexo-lazyload-image --save

在根目录下的 _config.yml 中添加对应配置

lazyload:
  enable: true 
  onlypost: false  # 是否只对文章的图片做懒加载
  loadingImg: # eg ./images/loading.gif

设置插件

修改 /themes/matery/source/js 中的 matery.js文件,在第108行加上：

1
2
3

$(document).find('img[data-original]').each(function(){
    $(this).parent().attr("href", $(this).attr("data-original"));
});

打开 /themes/matery/layout/_partial/header.ejs文件，

在img和span的两个头加个div：

<div class="brand-logo">
    <a href="<%- url_for() %>" class="waves-effect waves-light">
        <div>
            <% if (theme.logo !== undefined && theme.logo.length > 0) { %>
            <img src="<%= theme.logo %>" class="logo-img" alt="LOGO">
            <% } %>
            <span class="logo-span"><%- config.title %></span>
        </div>
    </a>
</div>