Hexo Next主題進階教程

注意點：

• 下面的教程，每個教程點都是用水平線分割，防止混亂
• 教程針對NexT主題設定，此教程為進階教程，基礎配置主題的教程可以查閱相關資料，以下改變的效果可以到此部落格預覽

---

當前所在選單下劃線顯示

效果圖：

• 開啟themes\next\layout_partials資料夾中的header.swig
• 在底部新增一個指令碼

<script>
	
	window.onload = function(){
		var path = 'https://malizhi.cn'; //這裡要改成你部落格的地址
		var localhostItem = String(window.location).split(path)[1];
		var LiNode = document.querySelectorAll('#menu > li > a')
		
		for(var i = 0; i< LiNode.length;i++){
			var item = String(LiNode[i].href).split(path)[1];
			if(item == localhostItem && item != undefined){
				LiNode[i].setAttribute('style','border-bottom:1px solid black');
			}
		}
	};

</script>
複製程式碼

• 重新部署釋出即可 命令：hexo cl && hexo g && hexo d

---

統計站點的總訪問量，即統計瀏覽了多少次；有多少人訪問，在footer顯示

• 找到站點的themes/next/layout/_partials目錄下的footer.swig檔案。插入程式碼如下

<!-- 新增訪客統計程式碼 -->

<div class="busuanzi-count">
    <script async="" src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="site-uv">
      <i class="fa fa-user"></i>
      訪問使用者： <span class="busuanzi-value" id="busuanzi_value_site_uv"></span> 人
    </span>
    <div class="powered-by"></div>
    <span class="site-uv">
      <i class="fa fa-eye"></i>
      訪問次數： <span class="busuanzi-value" id="busuanzi_value_site_pv"></span> 次
    </span>
    <!-- 部落格字數統計 -->
    <span class="site-pv">
      <i class="fa fa-pencil"></i>
      部落格全站共： <span class="post-count">{{ totalcount(site) }}</span> 字
    </span>
</div>
<!-- 新增訪客統計程式碼 END-->
複製程式碼

效果如下：

---

關於部落格獲取文章閱讀數量或者評論訊息時獲取失敗這種情況不用擔心，有時候所處的網路是機房或者一些有限制訪問leancloud的網路會造成訪問不了leancloud，可以換一個網路試試。

• 訪問不了時，網頁顯示錯誤如下： api.leancloud.cn/1.1/classes/Comment:1 Failed to load resource:net::ERR_CONNECTION_RESET

---

如何讓百度收錄自己的bolg

• 在百度搜尋引擎搜尋自己的域名檢視是否收錄 site:malizhi.cn

  

• 如果沒有收錄，可以到此網站提交申請，驗證網站，驗證成功網站後，我們可以使用自動推送，讓百度可以收錄我們部落格的所有網頁

• 百度收錄驗證時如果選擇第一種方式驗證就是把 baidu_verify_6j6lLVHSN7.html放在blog的根目錄

  

  但是放在根目錄會有一個問題，hexo會為此html自動渲染，新增了不必要的東西，此時，百度驗證會不通過，我們要在此html中頂部新增以下內容，hexo才不會為此html自動渲染。

		---
		layout: false
		---
複製程式碼

• 驗證成功後，開啟你的hexo部落格根目錄，分別用下面兩個命令來安裝針對百度的外掛

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
複製程式碼

• 安裝成功後hexo g，站點根目錄中的public目錄會自動生成sitemap配置檔案，sitemap.xml baidusitemap.xml
• 在部落格站點目錄中，新增以下配置

# 自動生成sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml
複製程式碼

• 修改主題配置檔案

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true
複製程式碼

• 修改baidu_push.swig，位置是themes\next\layout_third-party\seo，新增以下程式碼（程式碼來自百度自動推送）：

{% if theme.baidu_push %}
<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>
{% endif %}
複製程式碼

這樣子的話每次訪問部落格中的頁面會自動向百度提交。

---

如何把www.xxx.cn xxx.cn 轉換成https://xxx.cn

• 去到nginx的配置檔案中，在80埠的server塊中配置：

rewrite ^(.*) https://xxx.cn$1 permanent;   #重定向https訪問
複製程式碼

---

如何把https://www.xxx.cn 轉成https://xxx.cn

• 去到nginx的配置檔案中，(前提是你的bolg已經有安全驗證證照) 在配置檔案中增加多一個server

server {
        listen 443;
        server_name www.xxx.cn;
        rewrite ^(.*) https://xxx.cn$1 permanent;   #重定向https訪問
    }
複製程式碼

• 然後在原來驗證bolg的443埠後面增加一小段程式碼default_server ssl

   server {
        listen 443 default_server ssl;
複製程式碼

---

在底部增加執行時間

<!-- 在網頁底部新增網站執行時間 -->
<span id="timeDate">載入天數...</span><span id="times">載入時分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("07/21/2018 00:00:00");//此處修改你的建站時間或者網站上線時間
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "Run for "+dnum+" Days ";
        document.getElementById("times").innerHTML = hnum + " Hours " + mnum + " m " + snum + " s";
    }
setInterval("createtime()",250);
</script>
複製程式碼

效果如下：

---

底部跳動圖示實現

• 注意點：需要到next\layout_partials下的footer.swig檔案中，在你所需要調動的圖示所對應的span中增加對應的ID
• 去到主體的css檔案（next\source\css_variables） custom.styl ，增加以下程式碼即可

//底部愛心小圖示跳動
keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}

//圖示所對應的span中的ID
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(255, 113, 113);
}
複製程式碼

---

文章加密，對應的外掛文件可以參考

github.com/MikeCoder/h…

• 在根目錄中package.json中新增依賴：

 "hexo-blog-encrypt": "2.0.*"
複製程式碼

• 在站點配置檔案中開啟，沒有則新增：

# Security
encrypt:
    enable: true
複製程式碼

• 在文章中的頭部資訊中新增對應的資訊即可

---
title: testPass
date: 2018-07-26 00:00:00
password: 123456
abstract: 這是一篇加密的文章。
message: enter password to read.
---
複製程式碼

---

文章置頂：

• 修改 hero-generator-index 外掛，把檔案：node_modules/hexo-generator-index/lib/generator.js 內的程式碼替換為：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 兩篇文章top都有定義
            if(a.top == b.top) return b.date - a.date; // 若top值一樣則按照文章日期降序排
            else return b.top - a.top; // 否則按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是隻有一篇文章top有定義，那麼將有top的排在前面
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都沒定義按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};
複製程式碼

• 新增置頂標誌：去到next\layout_macro下的post.swig，找到<div class="post-meta"> ，在下面新增對應程式碼

<div class="post-meta">
          {% if post.top==100 %}
            <i class="fa fa-thumb-tack"></i>
            <font color=808080>置頂</font>
            <span class="post-meta-divider">|</span>
          {% endif %}
     ......
複製程式碼

效果：

---

減少背景線條（預設線條數可以看官方外掛）

github.com/hustcc/canv…

• 對應的js在next\source\lib\canvas-nest下，修改js的count數量即可，預設是99條

---

在頭部選單中，顯示有多少篇數

• 在next\layout_partials\header.swing 修改對應的程式碼
• 找到對應的位置

.......
{{ __('menu.' + name) | replace('menu.', '') }}
.......
複製程式碼

• 可以按照我這種方法新增篇數

  

效果：

---

新增文章陰影

• 去到next\source\css_custom下，修改Custom styles檔案，增加一下程式碼
• 陰影的透明度、大小等可以在程式碼中自由調節

 // Custom styles.
// 主頁文章新增陰影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
複製程式碼

效果圖：

---

修改網頁載入進度條顏色

• 到next\source\lib\pace，找到自己載入條對應的樣式，進行修改即可

---

底部小心心增加點選動畫功能

• 確保你擁有一個以NexT為主題的Hexo部落格 版本大概任意orz
• 下載hexo-next-bottomheart.js（可以把連結複製到下載工具中或者直接新建檔案然後複製貼上），並把它儲存在/themes/next/source/js/src/目錄下。
• 使用文字編輯器開啟/themes/next/layout/_layout.swig，在尾部上方新增一行（line 5），修改後的檔案如下

...
{% include '_components/algolia-search/assets.swig' %}
  <script type="text/javascript" src="/js/src/hexo-next-bottomheart.js"></script>
</body>
</html>
複製程式碼

• 使用文字編輯器開啟/themes/next/layout/_partials/footer.swig， 在

<span itemprop="copyrightYear">{{ current }}</span>
<span class="with-love">
  <i class="fa fa-{{ theme.authoricon }}"></i>
</span>
<span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
複製程式碼

line5處，修改line 5為

<div id="bottomheart" style="cursor:pointer;"><i class="fa fa-{{ theme.authoricon }}"></i></div>
複製程式碼

這時候，重新部署你的部落格，就可以瘋狂點選小心心啦

效果：

---

相簿功能

效果圖:

因為篇幅較長，另起一篇文章說明，文章地址：malizhi.cn/HexoAlbum/

---

如何利用 Gulp 來壓縮你的 Hexo 部落格的靜態檔案（ html / css / js ），達到提高訪問速度的目的

• 在blog站點目錄下開啟git
• 首先安裝gulp $ npm install gulp
• 繼續安裝依賴包
  • $ npm install --save-dev babel-cli
  • $ npm install --save-dev babel-preset-es2015
  • $ npm install gulp-minify-css gulp-babel gulp-uglify gulp-htmlmin gulp-htmlclean --save-dev
• 在部落格的根目錄建立檔案 gulpfile.js，程式碼如下：

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var babel = require('gulp-babel');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

gulp.task('minify-css', function () {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});

gulp.task('minify-html', function () {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))

.pipe(gulp.dest('./public'))
});

gulp.task('minify-js', function () {
return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(babel({ presets: ['es2015'] }))
.pipe(uglify())
.pipe(gulp.dest('./public'));
});

gulp.task('default', ['minify-html', 'minify-css', 'minify-js']);	
複製程式碼

• 壓縮方法：執行完hexo g 產生編譯檔案後，執行gulp
• 看到以下資訊代表壓縮成功，接下來使用hexo d 釋出到伺服器即可，可發現訪問速度有了改善

建議與幫助

有小夥幫有好的建議或者其他問題可以及時聯絡我

• 郵箱：lizhi_ma@foxmail.com