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 //填自己的博客地址
- 打开themes/_config.yml下修改gitalk那里: