hexo matery个性优化

最新推荐文章于 2021-05-18 14:44:54 发布

bt-sonny

最新推荐文章于 2021-05-18 14:44:54 发布

阅读量1.9k

点赞数 4

分类专栏：博客文章标签：经验分享前端

本文链接：https://blog.csdn.net/weixin_44186409/article/details/105802136

版权

hexo matery 个性优化

Hexo matery 功能个性优化

Hexo matery 功能个性优化

声明：本文是参考会飞的小戈和·Sky03’s Blog
这俩位位大佬的进行优化

一、访问速度优化

1、页面加载动画

主目录下新建一个文件夹(也就是你的blog目录下)，名为scripts，紧接着在新建的文件夹下新建一个名为loading-pages的js文件，然后再这个js文件填入下面的代码：

/* global hexo */
"use strict";
hexo.extend.filter.register('after_render:html', function (htmlContent) {
   
     const injectHead =
 `<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";
            },1000); 
        },1000);//强制显示loading page 1s  
    };
    loaded();
})()
 </script>`;
     const injectBody = `
 <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>`;
     if (/<\/head>/gi.test(htmlContent)) {
   
         let lastIndex = htmlContent.lastIndexOf('</head>');
         htmlContent = htmlContent.substring(0, lastIndex) + injectHead + htmlContent.substring(lastIndex, htmlContent.length);
     }
     if (/<body>/gi.test(htmlContent)) {
   
         let index = htmlContent.indexOf('<body>');
         htmlContent = htmlContent.substring(0, index) + injectBody + htmlContent.substring(index, htmlContent.length);
     }
     return htmlContent;
 }, 1);

2、图片加载优化

在此之前，我们先了解什么是预加载和懒加载

什么是预加载

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

缺点：会增加服务器压力

什么是懒加载

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

优点：对服务器有一定的缓解压力作用

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

开始操作

首先安装图片懒加载插件： hexo-lazyload-image

在Hexo根目录执行

npm install hexo-lazyload-image --save

然后在Hexo配置文件末尾加入以下代码:

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

本地run前先清除一下缓存，或者直接执行hexo cl && hexo s

图片加载冲突

一般情况下懒加载会和gallery插件会发生冲突，结果可能就是点开图片，左翻右翻都是loading image。matery主题的解决方案是：

修改, /themes/matery/source/js 中的 matery.js文件

在第108行加上：

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

做完这步之后，还有点小Bug，首页的logo点击会直接打开logo图，而不是跳到首页。

解决方案：打开/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>

自定义loading图片

hexo-lazyload-image 插件提供了自定义loading图片的选项

方法就是在 loadingImg 后配置图片的路径，如：

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

注：是在主目录下的配置文件下添加如上代码，路径去主题下找如：themes\hexo-theme-matery\source\medias

懒加载优化

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

&& rect.top <= (window.innerHeight +240 || document.documentElement.clientHeight +240)

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

二、优化文章永久链接

使用编码生成永久链接

采用编码形式，这种缺点是可读性差，优点很明显，链接很短
先看看效果：

 http://chuchendjs.github.com/posts/15325.html

安装插件：

npm install hexo-abbrlink --save

然后在站点根目录config中设置两处，一个是修改permalink为：

permalink: posts/:abbrlink.html

在根目录config添加如下配置：

abbrlink:
  alg: crc32  #算法 crc16(default) and crc32
  rep: hex    #进制 dec(default) and hex 十进制和十六进制，默认为10进制。

不同算法组成的链接有如下几种，挑选自己喜欢的，然后替换上面crc32和hex

crc16 & hex
https://lovelijunyi.gitee.io/posts/66c8.html

crc16 & dec
https://lovelijunyi.gitee.io/posts/65535.html

crc32 & hex
https://lovelijunyi.gitee.io/posts/8ddf18fb.html

crc32 & dec
https://lovelijunyi.gitee.io/posts/1690090958.html

三、优化搜索

matery主题自带搜索，但是只支持英文，所以我们需要拓展搜索功能，先安装插件，在主目录下

npm install hexo-generator-search --save

紧接着在博客站点目录的配置文件_config.yml下，添加如下配置：

# 中文搜索功能
search:
  path: search.xml
  field: post

四、添加评论功能

1、给文章添加valine评论功能

进入主题文件的配置文件D:\blog\themes\matery_config.yml。启用valine，其中需要设置Appid和appkey。此两项需要到Leancloud官网下载。

注册和身份验证通过后，新建应用，名字随意起。

注意：密码开头至少要有一个大写，有两个区域，华北和华东
可能会有出现bug,后面有说到

再将信息填入：

valine:
  enable: true
 appid: your app id
appkey: your app key
  notify: false
  verify: false
  visitor: true
  avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  pageSize: 10
  placeholder: 'just go go' # Comment Box placeholder
  background: /medias/comment_bg.png

Bug:就是如果你注册的是华东节点的可能会出现，背景图没正常显示，拉升到右边，去华北再次注册一个账号就可以了，更多问题请去官方询问

2、添加Gittalk评论插件

matery主题自带gittalk评论插件，我们只需要开启就可以了。

打开GitHub申请，填写信息：

Application name //应用名称，随便填
Homepage URL //填自己的博客地址
Application description //应用描述，随便填
Authorization callback URL //填自己的博客地址

最低0.47元/天解锁文章

bt-sonny

关注

4
点赞
踩
25

收藏

觉得还不错? 一键收藏
2
评论
hexo matery个性优化

hexo matery 个性优化 Hexo matery 功能个性优化访问速度优化页面加载动画图片加载优化什么是预加载什么是懒加载开始操作Hexo matery 功能个性优化声明：本文是参考会飞的小戈这位大佬的进行优化访问速度优化页面加载动画主目录下新建一个文件夹(也就是你的blog目录下)，名为scripts，紧接着在新建的文件夹下新建一个名为loading-pages的js文件，...
复制链接

扫一扫