一傅物、Hexo自定義 ---晚楓博客---

image

1. 動態(tài)標題

打開博客主題文件夾，路徑：themes/matery/layout/layout.ejs，在對應位置添加如下代碼：

<script type="text/javascript">
    var OriginTitile = document.title,
        st;
    document.addEventListener("visibilitychange", function () {
        document.hidden ? (document.title = "寫離開頁面標題顯示的內(nèi)容", clearTimeout(st)) : (document.title =
            "寫進入頁面標題顯示的內(nèi)容", st = setTimeout(function () {
                document.title = OriginTitile
            }, 3e3))
    })
</script>


        

2. 修改導航欄顏色以及透明效果

打開themes/matery/source/css/matery.css文件，大約在250行，有一個.bg-color屬性蕴潦，修改其屬性值即可，代碼如下：

.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜歡的顏色值
    opacity: 0.8;  //透明效果 值范圍 0~1俘闯，看情況自己修改
}

3. 添加動態(tài)詩詞

采用的是今日詩詞潭苞，每次返回一句詩詞，根據(jù)時間真朗、地點此疹、天氣、事件智能推薦。官網(wǎng)有API文檔蝗碎，可以去看一下湖笨，有多種安裝方式，最簡單的方式就是從官網(wǎng)獲取代碼蹦骑，在/themes/matery/layout/_partial/head.ejs添加下面的一行代碼：

<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

然后再將/themes/matery/layout/_partial/bg-cover-content.ejs中的<%= config.description %>修改為把<%= config.description %>改為<%- '正在加載今日詩詞....' %>慈省，這個使用前提是將主題配置文件的subtitle的值改為false。

4. 鼠標點擊文字特效

實現(xiàn)方法眠菇，引入js文件边败，在主題文件下的/source/js/下新建click_show_text.js，其代碼如下：

var a_idx = 0;
jQuery(document).ready(function ($) {
    $("body").click(function (e) {
        var a = new Array("富強", "民主", "文明", "和諧", "自由", "平等", "公正", "法治", "愛國", "敬業(yè)", "誠信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
            y = e.pageY;
        $i.css({
            "z-index": 5,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#FF0000"
        });
        $("body").append($i);
        $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            3000,
            function () {
                $i.remove();
            });
    });
    setTimeout('delay()', 2000);
});

function delay() {
    $(".buryit").removeAttr("onclick");
}

5. 修改原有相冊

參考教程：https://yafine-blog.cn/posts/3b98.html

6. 添加天氣小插件

首先去中國天氣官網(wǎng)：https://cj.weather.com.cn/plugin/pc捎废，配置自己的插件笑窜，選擇自定義插件—>自定義樣式——>生成代碼，然后會生成一段代碼缕坎，復制粘貼到 themes/matery/layout/layout.ejs即可怖侦。

7. 關(guān)于我頁面添加個人簡歷

打開theme/matery/layout/about.ejs文件篡悟，大約在13行谜叹。有一個``標簽，找出其對應結(jié)尾的標簽搬葬，大約在61行左右荷腊，然后在新增如下代碼：

<div class="card">
     <div class="card-content">
         <div class="card-content article-card-content">
             <div class="title center-align" data-aos="zoom-in-up">
                 <i class="fa fa-address-book"></i>&nbsp;&nbsp;<%- __('個人簡歷') %>
              </div>
                 <div id="articleContent" data-aos="fade-up">
                     <%- page.content %>
                 </div>
           </div>
      </div>
</div>

注意粘貼的位置和空格要正確，這里的位置隨你自己設置急凰，你也可以把簡歷作為第一個card女仰，然后/source/about/index.md下面寫上你的簡歷了（就像寫博客一樣）。

8. 豆瓣書單電影頁面

1. 首先在博客站點目錄執(zhí)行下面的命令安裝豆瓣插件：

   npm install hexo-douban --save    
   

2. 緊接著在博客站點目錄的配置文件_config.yml下抡锈，添加如下配置：

   douban: 
     user: 252345665    #這個需要修改為你個人的id  
     builtin: false   #如果想生成豆瓣頁面疾忍，這個需要設置為true
     book: 
         title: 'This is my book title' 
         quote: 'This is my book quote' 
     movie: 
         title: 'This is my movie title' 
         quote: 'This is my movie quote' 
     game: 
         title: 'This is my game title' 
         quote: 'This is my game quote' 
     timeout: 10000
   

   • user:：你的豆瓣ID。打開豆瓣床三，登入賬戶一罩，然后在右上角點擊 ”個人主頁“，這時候地址欄的URL大概是這樣：https://www.douban.com/people/xxxxxx/ 撇簿，其中的”xxxxxx”就是你的個人ID了聂渊。
   • builtin：是否將生成頁面的功能嵌入 hexo s 和 hexo g 中，默認是 false 四瘫，另一可選項為 true 汉嗽。
   • title： 該頁面的標題。
   • quote： 寫在頁面開頭的一段話,支持html語法找蜜。
   • timeout： 爬取數(shù)據(jù)的超時時間饼暑，默認是 10000ms，如果在使用時發(fā)現(xiàn)報了超時的錯(ETIMEOUT)可以把這個數(shù)據(jù)設置的大一點。

   如果只想顯示某一個頁面(比如movie)弓叛，那就把其他的配置項注釋掉即可

   3. 然后再主題配置文件_config.yml中添加關(guān)于此頁面的菜單：(下面是我的配置)

   menu:
       媒體:
          url: /
          icon: fas fa-list
          children:
            - name: 電影
              url: /movies
              icon: fas fa-film
            - name: 書單
              url: /books
              icon: fas fa-book
            - name: 游戲
              url: /games
              icon: fas fa-gamepad
   

4. 適配Matery主題：在 /themes/hexo-theme-matery/layout 文件夾下面創(chuàng)建一個名為 douban.ejs 的文件迈着，并將下面的內(nèi)容復制進去：

   <%- partial('_partial/post-cover') %> 
   <style> 
       .hexo-douban-picture img {
           width: 100%; 
       } 
   </style>
   <main class="content"> 
       <div id="contact" class="container chip-container"> 
           <div class="card"> 
               <div class="card-content" style="padding: 30px"> 
                   <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1> 
                   <%- page.content %> 
               </div> 
           </div> 
           <div class="card"> 
               <div class="card-content" style="text-align: center"> 
                   <h3 style="margin: 5px 0 5px 5px;">如果你有好的內(nèi)容推薦，歡迎在下面留言邪码！</h3> 
               </div> 
           </div> 
           <div class="card"> 
               <% if (theme.gitalk && theme.gitalk.enable) { %>
                   <%- partial('_partial/gitalk') %>
               <% } %> 
               <% if (theme.gitment.enable) { %> 
                   <%- partial('_partial/gitment') %> 
               <% } %> 
               <% if (theme.disqus.enable) { %> 
                   <%- partial('_partial/disqus') %> 
               <% } %> 
               <% if (theme.livere && theme.livere.enable) { %> 
                   <%- partial('_partial/livere') %> 
               <% } %> 
               <% if (theme.valine && theme.valine.enable) { %> 
                   <%- partial('_partial/valine') %> 
               <% } %> 
           </div> 
       </div> 
   </main>
   

5. 然后在博客站點目錄下的node_modules文件夾下找到hexo-douban/lib裕菠，文件夾下有三個js文件，分別為：books-generator.js 闭专、games-generator.js 奴潘、movies-generator.js，用文本編輯器打開這三個文件影钉，并將其文件內(nèi)容末尾的代碼修改為一下內(nèi)容：

   /* 原文件內(nèi)容為 layout: [`page`, `post`] 画髓，將其修改為下面的內(nèi)容*/
   layout: [`page`, `douban`]
   

6. 最后就是使用并生成相應的頁面，執(zhí)行命令如下:

   hexo douban     
   

   需要注意的是平委，通常大家都喜歡用 hexo d 來作為 hexo deploy 命令的簡化奈虾，但是當安裝了 hexo douban 之后，就不能用 hexo d 了廉赔，因為 hexo douban 跟 hexo deploy 的前綴都是 hexo d 肉微，你以后執(zhí)行的 hexo d 將不再是 Hexo 頁面的生成，而是豆瓣頁面的生成蜡塌。

   以下是可選的命令參數(shù)：

-h, --help    # 幫助頁面
-b, --books   # 只生成書單頁面
-g, --games   # 只生成游戲頁面
-m, --movies  # 只生成電影頁面

當站點配置文件的builtin的值為true時碉纳，生成頁面的功能會嵌入到hexo g和hexo s中，在進行部署生成操作馏艾，會自動生成相應的頁面劳曹。

9. 外鏈跳轉(zhuǎn)插件

hexo-external-link是一個跳轉(zhuǎn)外鏈相關(guān)插件。自動為所有html文件中外鏈的a標簽生成對應的屬性琅摩。 比如 設置target=’_blank’, rel=’external nofollow noopener noreferrer’ 告訴搜索引擎這是外部鏈接,不要將該鏈接計入權(quán)重铁孵。 同時自動生成外鏈跳轉(zhuǎn)頁面,默認在根目錄下 go.html;

使用 npm 或者 yarn 安裝

## npm 安裝
npm install hexo-external-link --save
## yarn 安裝
yarn add hexo-external-link

之后再hexo博客站點根目錄下添加如下配置：

hexo_external_link:
  enable: true
  enable_base64_encode: true
  url_param_name: 'u'
  html_file_name: 'go.html'
  target_blank: true
  link_rel: 'external nofollow noopener noreferrer'
  domain: 'your_domain' # 如果開啟了防盜鏈，填寫你的域名
  safety_chain: true

• enable - 是否開啟hexo_external_link插件 - 默認 false
• enable_base64_encode - 是否對跳轉(zhuǎn)url使用base64編碼 - 默認 fasle
• url_param_name - url參數(shù)名,在跳轉(zhuǎn)到外鏈傳遞給html_file_name的參數(shù)名 - 默認 ‘u’
• html_file_name - 跳轉(zhuǎn)到外鏈的頁面文件路徑 - 默認 ‘go.html’
• target_blank - 是否為外鏈的a標簽添加target='_blank' - 默認 true
• link_rel - 設置外鏈的a標簽的rel屬性 - 默認 ‘external nofollow noopener noreferrer’
• domain - 如果開啟了防盜鏈,除了 localhost 和 domain(你的域名) 之外調(diào)用會跳到主頁,同時也是判斷鏈接是否為外鏈的依據(jù) - 默認 window.location.host
• safety_chain - go.html 為了防止外鏈盜用 對域名進行的判斷 - 默認 false

10. 添加動態(tài)科技線條背景

在themes/matery/layout/layout.ejs文件中添加如下代碼：

<!--動態(tài)線條背景-->
<script type="text/javascript"
color="122 103 238" opacity='0.7' zIndex="-2" count="200" src="http://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>

其中：

• color：表示線條顏色房资，三個數(shù)字分別為(R,G,B)蜕劝，默認：（0,0,0）
• opacity：表示線條透明度（0~1），默認：0.5
• count：表示線條的總數(shù)量志膀，默認：150
• zIndex：表示背景的z-index屬性熙宇，css屬性用于控制所在層的位置，默認：-1

11. 添加鼠標點擊煙花爆炸效果

首先在themes/matery/source/js目錄下新建fireworks.js文件溉浙，打開這個網(wǎng)址傳送門烫止，將內(nèi)容復制粘貼到fireworks.js即可。

然后再themes/matery/layout/layout.ejs文件內(nèi)添加下面的內(nèi)容：

<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="http://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/fireworks.js"></script>

然后hexo clean && hexo g && hexo s即可戳稽，就可以看到效果了馆蠕。

12. 添加櫻花飄落效果

在themes/matery/source/js目錄下新建sakura.js文件期升，打開這個網(wǎng)址傳送門，將內(nèi)容復制粘貼到sakura.js即可互躬。

然后再themes/matery/layout/layout.ejs文件內(nèi)添加下面的內(nèi)容：

<script type="text/javascript">
//只在桌面版網(wǎng)頁啟用特效
var windowWidth = $(window).width();
if (windowWidth > 768) {
    document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
}
</script>

13. 添加鼠標彩虹星星掉落跟隨效果

在themes/matery/source/js目錄下新建cursor.js文件播赁，打開這個網(wǎng)址傳送門，將內(nèi)容復制粘貼到cursor.js即可吼渡。

然后再themes/matery/layout/layout.ejs文件內(nèi)添加下面的內(nèi)容：

<script src="/js/cursor.js"></script>

14. 添加雪花飄落效果

在themes/matery/source/js目錄下新建snow.js文件容为，打開這個網(wǎng)址傳送門，將內(nèi)容復制粘貼到cursor.js即可寺酪。

然后再themes/matery/layout/layout.ejs文件內(nèi)添加下面的內(nèi)容：

<script src="/js/snow.js"></script>

15. 文章生成永久鏈接

主題默認的文章鏈接配置是

permalink: :year/:month/:day/:title

這種生成的鏈接地址很長坎背，文章版權(quán)的鏈接地址會出現(xiàn)一大串字符編碼，一點也不好看寄雀。因此需要修改文章生成鏈接的格式得滤。

首先再根目錄下執(zhí)行下面的命令：

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

生成完后急膀，原md文件的Front-matter 內(nèi)會增加abbrlink 字段沮协，值為生成的ID 。這個字段確保了在我們修改了Front-matter 內(nèi)的博客標題title或創(chuàng)建日期date字段之后而不會改變鏈接地址脖阵。

二皂股、添加評論系統(tǒng)

2.1添加來必力評論系統(tǒng)

首先去來必力官網(wǎng)墅茉，點擊導航欄上的安裝命黔，會出現(xiàn)如下圖的頁面：

• City 版：是一款適合所有人使用的免費版本；
• Premium 版：是一款能夠幫助企業(yè)實現(xiàn)自動化管理的多功能收費版本就斤。

image

注冊完之后，會提示你填寫網(wǎng)站的相關(guān)信息坠宴，如網(wǎng)站鏈接喜鼓，網(wǎng)站名稱等等庄岖，填寫完畢之后隅忿，會給你一段代碼，如下圖所示：

image

# Livere comment configuration, the default is not activated
# Livere 來必力評論模塊的配置背桐，默認為不激活
livere:
  enable: true   # true即為開啟評論系統(tǒng)
  uid: #這里填寫你的uid

然后在執(zhí)行相關(guān)的部署命令优烧，然后查看效果即可。

2.2 添加Valine評論系統(tǒng)

Valine官方文檔

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

經(jīng)過登錄或者注冊之后再登錄，就會進入如下的頁面：

image

創(chuàng)建應用完成后弊仪，會出現(xiàn)如下頁面纷责，然后點擊設置

image

會出現(xiàn)下面的頁面，將其中APPID和APPKey復制撼短，添加到配置文件中再膳。

image

# 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即為開啟評論系統(tǒng)
  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:  https://cdn.jsdelivr.net/gh/Yafine/cdn@3.1.1/social/comment_bg.png

然后執(zhí)行相關(guān)部署命令，查看效果即可。

2.3 添加Gitalk評論模塊

安裝步驟如下：

1. 注冊 OAuth Application

當別人評論你的文章時栏渺，會需要它是授權(quán)。點擊注冊 OAuth Application進行注冊，注冊界面如下：

image

• Application name：應用名稱，自己隨意起名保礼。
• Homepage URL：博客主頁地址，如果有域名，此處填寫域名谅摄，無域名，填寫你的默認github地址：如https://username.github.io。
• Application description：應用描述爷狈，可選鹿响，可以寫也可以不寫拷淘。
• Authorization callback URL：授權(quán)后返回的地址恃轩，需要與Homepage URL一致蒸殿。

點擊 Register application（注冊）會出現(xiàn) Client ID/Secret摊溶，接下來就是將信息填入配置文件中。

image

2. 新建GitHub倉庫

新建倉庫就不在多說了，相信大家都會喊暖，如果不會的話风范，前面的文章有寫锌半。

3. 配置 _config.yml 文件

   # the Gitalk config州胳，default disabled
   # Gitalk 評論模塊的配置，默認為不激活
   gitalk:
     enable: true    # true即開啟評論模塊
     owner: Yafine  # 填寫你的 github 賬戶名即可
     repo: Yafine-gitalks   # 新建一個倉庫或者使用博客托管的倉庫也可
     oauth:
       clientId: #填寫你的clientId
       clientSecret:  #填寫你的clientSecret
     admin: Yafine  #填寫你的 github 賬戶名即可
    
   

   4. 然后再進行部署步驟即可瓢颅，第一次查看效果需要登錄github賬號木人，關(guān)聯(lián)授權(quán)后进鸠，就可以使用評論系統(tǒng)了。

   三搀罢、域名解析與綁定

   域名的購買流程我就不說了，相信大家應該都會購買吧，一般都會去阿里云或者騰訊云購買域名枫弟。下面就簡單的說一下伊履，如何綁定域名并進行解析。

   Hexo+Github 綁定域名

   推薦以為CSDN博主寫的文章Ｇ肷摇睛廊！

 #   四、博客優(yōu)化

1. 圖片懶加載

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

在站點根目錄執(zhí)行下面的命令：

npm install hexo-lazyload-image --save

之后在站點配置文件下添加下面的代碼：

lazyload:
  enable: true  # 是否開啟圖片懶加載
  onlypost: false  # 是否只對文章的圖片做懶加載
  loadingImg: # eg ./images/loading.gif

最后執(zhí)行hexo clean && hexo g && hexo s就可以看到效果了。

2. 代碼壓縮

方法一：gulp代碼壓縮

使用方法：

1. 進入站點根目錄下依次執(zhí)行下面的命令：

   # 全局安裝gulp模塊
   npm install gulp -g
   # 安裝各種小功能模塊  執(zhí)行這步的時候倘零，可能會提示權(quán)限的問題疫鹊，最好以管理員模式執(zhí)行
   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
   

   b. 在Hexo根目錄新建文件 gulpfile.js枣耀，并復制以下內(nèi)容到文件中缝彬，有中文注釋扒俯，可以根據(jù)自己需求修改墩邀。（注意：文件名不能錯慕蔚，一定為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"); //任務 幫助調(diào)用組件
   var plumber = require("gulp-plumber"); //容錯組件（發(fā)生錯誤不跳出任務睦柴，并報出錯誤內(nèi)容）
   var isScriptAll = true; //是否處理所有文件杜顺，(true|處理所有文件)(false|只處理有更改的文件)
   var isDebug = true; //是否調(diào)試顯示 編譯通過的文件
   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有關(guān)的操作，主要通過hexo.call()去執(zhí)行铃岔，注意return
   // 創(chuàng)建靜態(tài)頁面 （等同 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()) //調(diào)用壓縮組件方法uglify(),對合并的文件進行壓縮
           .pipe(gulp.dest("./public")); //輸出到目標目錄
   });
   
   // 壓縮public目錄下的css文件
   gulp.task("compressCss", function () {
       var option = {
           rebase: false,
           //advanced: true, //類型：Boolean 默認：true [是否開啟高級優(yōu)化（合并選擇器等）]
           compatibility: "ie7" //保留ie7及以下兼容寫法 類型：String 默認：''or'*' [啟用兼容模式隆檀； 'ie7'：IE7兼容模式裳仆，'ie8'：IE8兼容模式纯丸，'*'：IE9+兼容模式]
           //keepBreaks: true, //類型：Boolean 默認：false [是否保留換行]
           //keepSpecialComments: '*' //保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴坠陈，如果不加這個參數(shù)解总，有可能將會刪除你的部分前綴
       };
       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 目錄內(nèi)圖片
   gulp.task("compressImage", function () {
       var option = {
           optimizationLevel: 5, //類型：Number 默認：3 取值范圍：0-7（優(yōu)化等級）
           progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
           interlaced: false, //類型：Boolean 默認：false 隔行掃描gif進行渲染
           multipass: false //類型：Boolean 默認：false 多次優(yōu)化svg直到完全優(yōu)化
       };
       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"));
   });
   // 執(zhí)行順序： 清除public目錄 -> 產(chǎn)生原始博客內(nèi)容 -> 執(zhí)行壓縮混淆 -> 部署到服務器
   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函數(shù)現(xiàn)在只支持兩個參數(shù)，分別是任務名和運行任務的函數(shù)
   

   c. 以后的執(zhí)行方式有兩種：

   • 直接在Hexo根目錄執(zhí)行 gulp或者 gulp default ，這個命令相當于 hexo cl&&hexo g 并且再把代碼和圖片壓縮录别。
   • 在Hexo根目錄執(zhí)行 gulp build 梢褐，這個命令與第1種相比是：在最后又加了個 hexo d 猪贪，等于說生成斤寇、壓縮文件后又幫你自動部署了莫秆。

   值得注意的是：這個加入了圖片壓縮连锯，如果不想用圖片壓縮可以把第154行的 "compressImage", 和第165行的 ,"compressImage" 去掉即可

方法二：hexo-neat插件實現(xiàn)代碼壓縮

hexo-neat插件也是用來壓縮代碼的吻氧，底層也是通過gulp來實現(xiàn)的。

但是這個插件是有Bug的：

• 壓縮 md 文件會使 markdown 語法的代碼塊消失
• 會刪除全角空格

在博客站點根目錄執(zhí)行安裝代碼：

npm install hexo-neat --save

緊接著在站點根目錄下的配置文件添加如下代碼：

neat_enable: true
neat_html:
  enable: true
  exclude:
neat_css:
  enable: true
  exclude:
    - '*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '*.min.js'

然后直接 hexo cl&&hexo g 就可以了，會自動壓縮文件 榜晦。

補充：為了解決以上Bug斩郎，對于matery主題（其他主題自行解決）需要將以上默認配置修改為：

#hexo-neat 優(yōu)化提速插件（去掉HTML甥温、css史简、js的blank字符）
neat_enable: true
neat_html:
  enable: true
  exclude:
    - '**/*.md'
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/**/instantpage.js'
    - '**/matery.js'

3.打造穩(wěn)定快速、高效免費圖床

請看我的另一篇博客文章:https://white_maple.gitee.io/posts/eb3a.html

4. CDN加速

推薦一位大佬的博客文章：https://yafine-blog.cn/posts/ee35.html

五愈污、部署到Coding和碼云

推薦一位大佬的文章：https://yafine-blog.cn/posts/51fb.html

l六杭跪、新建文章自動打開本地Markdown編輯器

寫新文章時姑廉，需要控制臺執(zhí)行hexo new "文章名字"限书，這樣就會在_posts下生成一篇新文章粉铐，但需要手動打開汤踏，挺麻煩瀑踢，只需要在站點根目錄下新建scripts目錄棘劣，然后在新建auto_open.js沙廉，在文件填入一下內(nèi)容：

var spawn = require('child_process').exec;

// Hexo 2.x 用戶復制這段
//hexo.on('new', function(path){
  //spawn('start  "markdown編輯器絕對路徑.exe" ' + path);
//});

// Hexo 3 用戶復制這段
hexo.on('new', function(data){
  spawn('start  "D:\Program Files\Typorae\Typora.exe" ' + data.path);
});

其中"D:\Program Files\Typorae\Typora.exe"是我本地編輯器的路徑蟋定，只需要改為你本地編輯器的路徑即可，然后在執(zhí)行hexo cl && hexo g -d灶芝，部署到GitHub即可属愤，以后在發(fā)布文章就會自動打開編輯器只壳。

文章參考來源**

• matery主題文檔
• Matery主題配置豆瓣插件
• Hexo博客主題個性化
• Hexo+github搭建博客(超級詳細版驹愚，精細入微)
• hexo博客美化

過去的事情可以不忘記倘潜，但一定要放一放!