Hexo-Matery-预加载动画

Hexo-matery 主题添加预加载动画

为主题添加一个预加载动画，对与访问速度较慢的blog来说很友好。预加载动画也就不用解释了，从字面意思都能理解是什么，废话不多说直接操作。

1. 添加一个ejs文件

在主题目录下/layout/_partial/目录下创建一个loading-pages.ejs 的文件，内容如下：

<style type="text/css" lang="css">
    #loading-container{
        position: fixed;
        top: 0;
        left: 0;
        min-height: 100vh;
        width: 100vw;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #FFF;
        text-align: center;
        /* loader页面消失采用渐隐的方式*/
        -webkit-transition: opacity 1s ease;
        -moz-transition: opacity 1s ease;
        -o-transition: opacity 1s ease;
        transition: opacity 1s ease;
    }
    .loading-image{
        width: 120px;
        height: 50px;
        transform: translate(-50%);
    }

    .loading-image div:nth-child(2) {
        -webkit-animation: pacman-balls 1s linear 0s infinite;
        animation: pacman-balls 1s linear 0s infinite
    }

    .loading-image div:nth-child(3) {
        -webkit-animation: pacman-balls 1s linear .33s infinite;
        animation: pacman-balls 1s linear .33s infinite
    }

    .loading-image div:nth-child(4) {
        -webkit-animation: pacman-balls 1s linear .66s infinite;
        animation: pacman-balls 1s linear .66s infinite
    }

    .loading-image div:nth-child(5) {
        -webkit-animation: pacman-balls 1s linear .99s infinite;
        animation: pacman-balls 1s linear .99s infinite
    }

   .loading-image div:first-of-type {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
        animation: rotate_pacman_half_up .5s 0s infinite;
    }
    .loading-image div:nth-child(2) {
        width: 0;
        height: 0;
        border: 25px solid #49b1f5;
        border-right-color: transparent;
        border-radius: 25px;
        -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
        animation: rotate_pacman_half_down .5s 0s infinite;
        margin-top: -50px;
    }
    @-webkit-keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}

    @-webkit-keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

    @keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}

    @-webkit-keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}

    @keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}


    .loading-image div:nth-child(3),
    .loading-image div:nth-child(4),
    .loading-image div:nth-child(5),
    .loading-image div:nth-child(6){
        background-color: #49b1f5;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        width: 10px;
        height: 10px;
        position: absolute;
        transform: translateY(-6.25px);
        top: 25px;
        left: 100px;
    }
    .loading-text{
        margin-bottom: 20vh;
        text-align: center;
        color: #2c3e50;
        font-size: 2rem;
        box-sizing: border-box;
        padding: 0 10px;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    @media only screen and (max-width: 500px) {
         .loading-text{
            font-size: 1.5rem;
         }
    }
    .fadeout {
        opacity: 0;
        filter: alpha(opacity=0);
    }
    /* logo出现动画 */
    @-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
    @keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);}}
 </style>
 <script>
(function () {
    const loaded = function(){
       setTimeout(function(){
            const loader = document.getElementById("loading-container");
            loader.className="fadeout" ;//使用渐隐的方法淡出loading page
            // document.getElementById("body-wrap").style.display="flex";
            setTimeout(function(){
                loader.style.display="none";
            },2500); 
        },1000);//强制显示loading page 1s  
    };
    loaded();
})()
</script>

2. 主题目录下的ejs文件中添加内容

在主题目录layout下找到layout.ejs这个文件。

打开后在<body>标签前添加如下内容：

<% if (theme.loadingPages.enable) { %>
   <%- partial('_partial/loading-pages') %>
<% } %>

在<body>标签后添加如下内容：

<% if (theme.loadingPages.enable) { %>
    <div id="loading-container">
         <p class="loading-text">嘘~  正在从服务器偷取页面 . . . </p> 
         <div class="loading-image">
             <div></div>
             <div></div>
             <div></div>
             <div></div> 
             <div></div>
         </div>
    </div>
<% } %>

3. 主题目录下_config.yml文件添加开关配置

打开_config.yml文件，添加如下内容：

loadingPages:
  enable: true  

enable 设置为 true 表示开启加载动画， false 表示关闭加载动画。

4. 重新生成页面

hexo clean && hexo g && hexo s

原文是在：斯莫笔记网站，操作没有说的很清楚就在写了一便。

5. 图片添加加载动画

安装

npm install hexo-lazyload-image --save

之后在站点配置文件_config.yml下添加下面的代码，同时需要在medias文件夹下放一张loading.gif的图片。

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

优化冲突

查看大图，发现全部为loading加载图，原因是因为懒加载插件与其他插件发生了冲突。

解决办法：修改主题文件下的/source/js/matery.js，在108行左右添加以下代码：

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

加完后如下：

// 启用字幕
   subHtmlSelectorRelative: true
        });
// 懒加载防止插件冲突
   $(document).find('img[data-original]').each(function(){
       $(this).parent().attr("href", $(this).attr("data-original"));
 });
// progress bar init
     const progressElement = window.document.querySelector('.progress-bar');
        if (progressElement) {
            new ScrollProgress((x, y) => {
                progressElement.style.width = y * 100 + '%';
            });
        }
    };
    articleInit();
    $('.modal').modal();

6. 优化缓存

• 其实第一次加载后本地都是有缓存的，如果每次都把loading显示出来就不那么好看。
• 所以我们需要对插件进行魔改，让图片稍微提前加载，避开加载动画。
• 打开 主题根目录node_modules/hexo-lazyload-image/lib/simple-lazyload.js 文件。

第19行修改为：

// 懒加载优化
&& rect.top <= (window.innerHeight +240 || document.documentElement.clientHeight +240)

作用：提前240个像素加载图片；当然这个值也可以根据自己情况修改/