hexo matery个性优化

个性优化"/>

hexo matery个性优化

hexo matery 个性优化

• Hexo matery 功能个性优化
• • 一、访问速度优化
  • • 1、页面加载动画
    • 2、图片加载优化
    • • 什么是预加载
      • 什么是懒加载
      • • 开始操作
        • 图片加载冲突
        • 自定义loading图片
        • 懒加载优化
  • 二、优化文章永久链接
  • • 使用编码生成永久链接
  • 三、优化搜索
  • 四、添加评论功能
  • • 1、给文章添加valine评论功能
    • 2、添加Gittalk评论插件
  • 五、关闭音乐的歌词显示
  • 六、添加RSS订阅
  • 七、增加建站时间
  • 八、添加404页面
  • 九、文章图片水印
  • 十、在线聊天插件
  • 十一、今日诗词：
  • 十二、添加雪花飘落效果
  • 十三、添加动漫人物挂件
  • 十四、浏览器网页标题
  • 十五、添加鼠标点击爱心效果

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个像素加载图片；当然这个值也可以根据自己情况修改

二、优化文章永久链接

使用编码生成永久链接

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

 .html

安装插件：

npm install hexo-abbrlink --save

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

permalink: posts/:abbrlink.html

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

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

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

crc16 & hex
.htmlcrc16 & dec
.htmlcrc32 & hex
.htmlcrc32 & dec
.html

三、优化搜索

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

npm install hexo-generator-search --save

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

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

四、添加评论功能

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

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

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

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

• 再将信息填入：

valine:enable: trueappid: your app id
appkey: your app keynotify: falseverify: falsevisitor