Hexo-Matery主題性能優化

大家可以來我Hexo博客主頁看看具體效果，歡迎留言評論 傳送門

文章生成永久鏈接

原來的文章鏈接地址會出現一大串字符編碼，不好看，而給文章生成永久鏈接有利于SEO，給更加美觀

首先安裝插件

npm install hexo-abbrlink --save

再站點組態檔下添加如下配置：

abbrlink:
    alg: crc16   #演算法： crc16(default) and crc32
    rep: hex     #進制： dec(default) and hex: dec #輸出進制：十進制和十六進制，默認為10進制，丨dec為十進制，hex為十六進制

將站點組態檔的 permalink 的值修改為：

permalink: posts/:abbrlink.html  # 此處可以自己設定，也可以直接使用 :/abbrlink

圖片懶加載

懶加載對服務器前端有一定的緩解壓力作用

使用圖片懶加載需要安裝插件：hexo-lazyload-image

npm install hexo-lazyload-image --save

之后在站點組態檔下添加下面的代碼：

#loading-image
lazyload:
  enable: true
  onlypost: false
  loadingImg: /medias/loading.gif

存在問題：

查看大圖，發現全部為 loading 加載圖，原因是因為懶加載插件與 lightgallery 插件沖突，解決辦法如下：

修改主題檔案下的 matery.js，在 108 行左右添加以下代碼：

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

懶加載優化

打開 Hexo根目錄 >node_modules > hexo-lazyload-image > lib > simple-lazyload.js 檔案

第 9 行修改為：

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

作用：提前 240 個像素加載圖片；當然這個值也可以根據自己情況修改

代碼壓縮

gulp 代碼壓縮

因為 hexo 生成的 html、css、js 等都有很多的空格或者換行，而空格和換行也是占用位元組的，所以需要將空格換行去掉也就是我要進行的 “壓縮”，

進入站點根目錄下依次執行下面的命令：

# 全域安裝gulp模塊
npm install gulp -g
# 安裝各種小功能模塊  執行這步的時候，可能會提示權限的問題，最好以管理員模式執行
npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 額外的功能模塊
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save

在 Hexo 根目錄新建檔案 gulpfile.js，并復制以下內容到檔案中，有中文注釋，可以根據自己需求修改，（注意：檔案名不能錯，一定為 gulpfile.js，否則會出錯！）

var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css壓縮組件
var uglify = require("gulp-uglify"); //js壓縮組件
var htmlmin = require("gulp-htmlmin"); //html壓縮組件
var htmlclean = require("gulp-htmlclean"); //html清理組件
var imagemin = require("gulp-imagemin"); //圖片壓縮組件
var changed = require("gulp-changed"); //檔案更改校驗組件
var gulpif = require("gulp-if"); //任務 幫助呼叫組件
var plumber = require("gulp-plumber"); //容錯組件（發生錯誤不跳出任務，并報出錯誤內容）
var isScriptAll = true; //是否處理所有檔案，(true|處理所有檔案)(false|只處理有更改的檔案)
var isDebug = true; //是否除錯顯示 編譯通過的檔案
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一個hexo物件

// 清除public檔案夾
gulp.task("clean", function () {
    return del(["public/**/*"]);
});

// 下面幾個跟hexo有關的操作，主要通過hexo.call()去執行，注意return
// 創建靜態頁面 （等同 hexo generate）
gulp.task("generate", function () {
    return hexo.init().then(function () {
        return hexo
            .call("generate", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 啟動Hexo服務器
gulp.task("server", function () {
    return hexo
        .init()
        .then(function () {
            return hexo.call("server", {});
        })
        .catch(function (err) {
            console.log(err);
        });
});

// 部署到服務器
gulp.task("deploy", function () {
    return hexo.init().then(function () {
        return hexo
            .call("deploy", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 壓縮public目錄下的js檔案
gulp.task("compressJs", function () {
    return gulp
        .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
        .pipe(plumber())
        .pipe(
            gulpBabel({
                presets: [es2015Preset] // es5檢查機制
            })
        )
        .pipe(uglify()) //呼叫壓縮組件方法uglify(),對合并的檔案進行壓縮
        .pipe(gulp.dest("./public")); //輸出到目標目錄
});

// 壓縮public目錄下的css檔案
gulp.task("compressCss", function () {
    var option = {
        rebase: false,
        //advanced: true, //型別：Boolean 默認：true [是否開啟高級優化（合并選擇器等）]
        compatibility: "ie7" //保留ie7及以下兼容寫法 型別：String 默認：''or'*' [啟用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
        //keepBreaks: true, //型別：Boolean 默認：false [是否保留換行]
        //keepSpecialComments: '*' //保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個引數，有可能將會洗掉你的部分前綴
    };
    return gulp
        .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
        .pipe(plumber())
        .pipe(cleancss(option))
        .pipe(gulp.dest("./public"));
});

// 壓縮public目錄下的html檔案
gulp.task("compressHtml", function () {
    var cleanOptions = {
        protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略處理
        unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊處理
    };
    var minOption = {
        collapseWhitespace: true, //壓縮HTML
        collapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //洗掉所有空格作屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //洗掉<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //洗掉<style>和<link>的type="text/css"
        removeComments: true, //清除HTML注釋
        minifyJS: true, //壓縮頁面JS
        minifyCSS: true, //壓縮頁面CSS
        minifyURLs: true //替換頁面URL
    };
    return gulp
        .src("./public/**/*.html")
        .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
        .pipe(plumber())
        .pipe(htmlclean(cleanOptions))
        .pipe(htmlmin(minOption))
        .pipe(gulp.dest("./public"));
});

// 壓縮 public/medias 目錄內圖片
gulp.task("compressImage", function () {
    var option = {
        optimizationLevel: 5, //型別：Number 默認：3 取值范圍：0-7（優化等級）
        progressive: true, //型別：Boolean 默認：false 無損壓縮jpg圖片
        interlaced: false, //型別：Boolean 默認：false 隔行掃描gif進行渲染
        multipass: false //型別：Boolean 默認：false 多次優化svg直到完全優化
    };
    return gulp
        .src("./public/medias/**/*.*")
        .pipe(gulpif(!isScriptAll, changed("./public/medias")))
        .pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
        .pipe(plumber())
        .pipe(imagemin(option))
        .pipe(gulp.dest("./public"));
});
// 執行順序： 清除public目錄 -> 產生原始博客內容 -> 執行壓碩訓淆 -> 部署到服務器
gulp.task(
    "build",
    gulp.series(
        "clean",
        "generate",
        "compressHtml",
        "compressCss",
        "compressJs",
        "compressImage",
        gulp.parallel("deploy")
    )
);

// 默認任務
gulp.task(
    "default",
    gulp.series(
        "clean",
        "generate",
        gulp.parallel("compressHtml", "compressCss", "compressJs","compressImage")
    )
);
//Gulp4最大的一個改變就是gulp.task函式現在只支持兩個引數，分別是任務名和運行任務的函式

直接在 Hexo 根目錄執行 gulp 或者 gulp default ，這個命令相當于 hexo cl&&hexo g 并且再把代碼和圖片壓縮，
在 Hexo 根目錄執行 gulp build ，這個命令與第 1 種相比是：在最后又加了個 hexo d ，等于說生成、壓縮檔案后又幫你自動部署了

如果不想用圖片壓縮可以把第 154 行的 "compressImage", 和第 165 行的 ,"compressImage" 去掉即可

添加 Valine 評論系統

Valine 官方檔案

如果注冊過 LeanCloud，請點擊此處進行登錄，未注冊的請點擊注冊

步驟：

1. 首先創建一個云存盤開發版，名稱自定義

   

   

2. 在“設定“，”應用 Keys”，找到你的appid和appke，配置到主題中valine配置的地方，啟用valine

   

   # The configuration of the Valine comment module is not activated by default.
   # To use it, activate the configuration item and set appId and appKey.
   # Valine 評論模塊的配置，默認為不激活，如要使用，就請激活該配置項，并設定 appId 和 appKey.
   valine:
     enable: false  # true即為開啟評論系統
     appId:   #此處填寫你的appid
     appKey:  #此處填寫你的appkey
     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
   

   然后執行相關部署命令，查看效果即可

3. 在“設定“，”安全中心”，”Web 安全域名”，添加自己的域名，

4. 在“設定“，”安全中心”，”服務開關”，資料存盤要打開，

Valine升級

拷貝我的Valine.min.js檔案，直接替換你主題目錄 /source/libs/valine/下的 Valine.min.js檔案

有些屬性調整了，主題下的_config.yml的valine屬性如下：

# To use it, activate the configuration item and set appId and appKey.
# Valine 評論模塊的配置，默認為不激活，如要使用，就請激活該配置項，并設定 appId 和 appKey.
valine:
  enable: true
  appId: xxxxxxxxxxxxxxxx
  appKey: xxxxxxxxxxxx
  notify: true
  verify: true
  visitor: true
  avatar: 'monsterid' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  pageSize: 10
  placeholder: '留下你的足跡..' # Comment Box placeholder
  background: /medias/comment_bg.png
  count: true
  enableQQ: 673888718
  recordIP: true
  requiredFields: 
    - nick
    - mail
  guest_info: 
    - nick
    - mail
    - link
  master: 
    - xxxxxxxxxxxxxxx  # md5加密后的博主郵箱
  metaPlaceholder:  # 輸入框的背景文字
    nick: 昵稱/QQ號(必填)
    mail: 郵箱(必填)
    link: 網址(https://)
  lang: zh-CN
  tagMeta: # The String Array of Words to show Flag.[Just Only xCss Style mode]
    - 博主
    - 小伙伴
    - 訪客
  friends: # The MD5 String Array of friends Email to show friends Flag.[Just Only xCss Style mode]
    - xxxxxxxxxxxxxx
    -

修改valine.ejs

Matery 主題使用的ejs模板預編譯，在主題目錄下的layout_partial/valine.ejs中修改，原始為：

new Valine({
        el: '#vcomments',
        appId: '<%- theme.valine.appId %>',
        appKey: '<%- theme.valine.appKey %>',
        notify: '<%- theme.valine.notify %>' === 'true',
        verify: '<%- theme.valine.verify %>' === 'true',
        visitor: '<%- theme.valine.visitor %>' === 'true',
        avatar: '<%- theme.valine.avatar %>',
        pageSize: '<%- theme.valine.pageSize %>',
        lang: '<% if (config.language == "zh-CN") {  %>zh-cn<% } else { %>en<% } %>',
        placeholder: '<%= theme.valine.placeholder %>'
    });

修改后為：

let metaPlaceholder = <%-  JSON.stringify(theme.valine.metaPlaceholder) %> ;
//這里要換行
new Valine({
        el: '#vcomments',
        appId: '<%- theme.valine.appId %>',
        appKey: '<%- theme.valine.appKey %>',
        notify: '<%- theme.valine.notify %>' === 'true',
        verify: '<%- theme.valine.verify %>' === 'true',
        visitor: '<%- theme.valine.visitor %>' === 'true',
        avatar: '<%- theme.valine.avatar %>',
        pageSize: '<%- theme.valine.pageSize %>',
        lang: '<%- theme.valine.lang %>',
        placeholder: '<%= theme.valine.placeholder %>',
        meta: <%- '["' + theme.valine.guest_info.join('", "') + '"]' %>,
        recordIP: '<%- theme.valine.recordIP %>' === 'true',
        enableQQ: '<%- theme.valine.avatar %>',
        requiredFields: <%- '["' + theme.valine.master.join('", "') + '"]' %>,
        master: <%- '["' + theme.valine.master.join('", "') + '"]' %>,
        friends: <%- '["' + theme.valine.friends.join('", "') + '"]' %>,
        tagMeta: <%- '["' + theme.valine.tagMeta.join('", "') + '"]' %>,
        metaPlaceholder: metaPlaceholder,

    });

驗證昵稱和郵箱可以加上以下代碼：

document.body.addEventListener('click', function(e) {
    if (e.target.classList.contains('vsubmit')) {
        const email = document.querySelector('input[type=email]');
        const nick = document.querySelector('input[name=nick]');
        const reg = /^[A-Za-z0-9_-\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!email.value || !nick.value || !reg.test(email.value)) {
            const str = `<div class="valert txt-center"><div class="vtext">請填寫正確的昵稱和郵箱！</div></div>`;
            const vmark = document.querySelector('.vmark');
            vmark.innerHTML = str;
            vmark.style.display = 'block';

            e.stopPropagation();

            setTimeout(function() {
                vmark.style.display = 'none';
                vmark.innerHTML = '';
            }, 2500);
        }
    }
    }, true);

填寫昵稱郵箱和網址的地方樣式修改：

.v[data-class="v"] .vwrap .vheader .vinput {
  width: 32%;
  border-bottom: 1px dashed #dedede;
}

增強 Valine 的郵件通知

開始部署專案

依次點擊左側的云引擎 -> 部署 -> 專案部署 ->Git 部署 -> 配置 Git，然后 Git 的地址填寫：https://github.com/sviptzk/Valine-Admin-Server，然后再次點擊 Git 部署 -> 部署即可

系結評論管理的域名

國區版LeanCloud 不給予免費的二級域名了，因此必須系結備案域名，

國際版LeanCloud 給予一個免費的二級域名，

設定域名白名單

域名可設定多個，一行一個，需要寫協議頭，

設定環境變數

此專案的主題欄位

添加完成后，點擊保存，并且重新部署實體，

登錄后臺為剛剛設定的后臺域名，如果登錄不上則在域名后面加上/sign-up

微信公眾號通知

首先需要到 server 的官網，開啟微信提醒并獲取 SCKEY，

官網寫的很詳細，這里不在過多贅述

防止服務器休眠

關于自動休眠的官方說法：點擊查看

關于服務器休眠喚醒的問題，以前的方法是通過自帶的定時任務進行喚醒，但現在不可以了，因為官方進行限制了，因此使用的是 GitHub+Actions

進入自己的Github首頁-->右上角settings-->左下角Developer settings-->選擇 Personal access tokens-->Generate new token

設定名字為 GITHUB_TOKEN , 然后勾選 repo , admin:repo_hook , workflow 等選項，最后點擊 Generate token 即可

接下來 FORK 專案，

地址：https://github.com/blogimg/WakeLeanCloud

成功 FORK 后，進入專案的設定，添加你的 leancloud 的后臺地址（也就是評論管理的后臺地址）

選擇 Secrets，添加你的評論后臺地址，一定是 Leancloud 的后臺地址（環境變數 ADMIN_URL），而不是你的博客地址，

接下來對自己的專案點個 star 就能啟動了，啟動后請切換到 actions，看看是否運行成功，

在leanclound中云引擎日志中也可以看到有沒有被Get到

至于重發函式，還是和往常一樣，但由于流控限制，因此最好能保證重發時機器是活著的，不然很可能會觸發因流控原因，通過定時任務喚醒體驗版實體失敗，建議升級至標準版云引擎實體避免休眠

選擇 resend-mails 云函式，Cron 運算式為 0 59 7 * * *，表示每天早 8 點 20 分檢查過去 24 小時內漏發的通知郵件并補發（請盡量確保你設定的時間機器是醒著的）

GitHub評論系統

可以先去這個地方看一下 Gitalk 的效果 傳送門

1. 首先要在GitHub上去新建一個倉庫用于存放評論的內容

   

2. 在本倉庫Settings中下拉可以看到issues功能默認開啟，沒有的話需要打開

   

3. 需要注冊一個Github Application

   

   注意兩個URL就是你網站的域名

4. 完成之后便到了如下頁面,其中 Client ID 和 Client Secret 是我們需要的東西

   

5. 最后設定 Theme 目錄下_config.yml檔案

   # the Gitalk config，default disabled
   # Gitalk 評論模塊的配置，默認為不激活
   gitalk:
     enable: true
     owner: guixinchn
     repo: BlogTalk
     oauth:
      clientId: xxxxxxxxxx
      clientSecret: xxxxxxxxxxxxxxxxxx
     admin: guixinchn
   

   

   第一次查看效果需要登錄 github 賬號，關聯授權后，就可以使用評論系統了，如果出現404，則把剛剛的clientId引數也傳過去

網站提交

百度收錄

可以在百度搜索引擎中輸入：site:www.guixinchn.cn來查看網站是否被收錄

如果沒有，可以在下面提交網址

添加自己的站點到百度

登錄百度搜索資源平臺，站點管理->添加網站，輸入域名再驗證所有權即可，如果是用的是GitHub，則不能使用HTML標簽驗證，因為百度的蜘蛛爬取不到GitHub的內容，

我使用第三種dns決議，復制二級域名前面的英文，粘貼在對應的位置如圖所示：

向百度推送自己的資源

經過以上步驟，百度已經知道有我們網站的存在了，但是百度還不知道我們的網站上有什么內容，所以要向百度推送我們的內容，

手動提交即手動地將鏈接一次性提交給百度，自動提交有：主動推送，自動推送，sitemap，主動推送需要安裝相關插件，自動推送Metary主題已經自帶了，并且默認開啟，sitemap提交填寫baidusitemap.xml檔案地址即可

安裝相應的站點地圖插件

npm install hexo-generator-sitemap --save              #sitemap
npm install hexo-generator-baidu-sitemap --save        #百度sitemap

這兩個插件是用來生成 Sitemap檔案 的插件，而 Sitemap 是用來告知搜索引擎我們的網站上有哪些可供抓取的網頁的，

hexo組態檔中的url一定要改成你的域名，這兩個插件是根據你的url生成站點地圖的

安裝后直接執行hexo cl&&hexo g命令，然后就會在網站根目錄生成sitemap.xml檔案和baidusitemap.xml檔案，其中sitemap.xml檔案是搜索引擎通用的檔案，baidusitemap.xml是百度專用的sitemap檔案，

使用sitemap方式推送

有sitemap檔案之后，再將生成的sitemap檔案提交給百度或者其他搜索引擎

百度方式：在普通收錄，資源提交的sitemap那里填寫自己sitemap檔案的URL地址即可

https://你的域名/baidusitemap.xml

提交后會有狀態提示：

這里需要注意嚴格區分http和https

自動推送方式

只要每個需要被百度爬取的HTML頁面中加入一段JS代碼即可：

<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

matery主題可以自動給每個頁面加上這段代碼，只需在主題組態檔中配置：

# 百度搜索資源平臺提交鏈接
baiduPush: true

主動推送方式

安裝主動推送插件：hexo-baidu-url-submit

npm install hexo-baidu-url-submit --save

然后打開hexo組態檔，在末尾加入以下配置：

# hexo-baidu-url-submit  百度主動推送
baidu_url_submit:
  count: 80 # 提交最新的一個鏈接
  host: www.guixinchn.cn # 在百度站長平臺中注冊的域名
  token: xxxxxxx # 請注意這是您的秘鑰， 所以請不要把博客源代碼發布在公眾倉庫里!
  path: baidu_urls.txt # 文本檔案的地址， 新鏈接會保存在此文本檔案里

密匙的獲取是在百度的自動提交的主動推送那里，

再加入新的deploy：

deploy:
- type: baidu_url_submitter

如圖：

這樣每次執行 hexo d 的時候，新的鏈接就會被推送了，
推送成功時,會有如下終端提示!

如圖39個鏈接推送成功

谷歌收錄

同樣可以在百度搜索引擎中輸入：site:www.guixinchn.cn來查看網站是否被收錄

如果沒有，可以在下面提交網址

登錄谷歌站長平臺，添加自己的域名

DNS驗證（就是驗證下網站是不是你的）就是域名決議那里添加一條TXT決議記錄

然后點擊驗證即可

再到谷歌的Search Console，添加自己的sitemap地址查看

接下來就是等待谷歌收錄了

標籤：其他

上一篇：作業一兩年的程式員，有點錢，買房還是買車？

下一篇：寫給自己的創業總結