基於Hexo搭建個人博客(二)---主題優化篇

這是一個基於Hexo的個人博客的教程，包含了從博客搭建到主題優化，最後部署到雲端的全過程。
更多文章歡迎訪問我的個人博客–>幻境雲圖

0. 選擇主題

你可以點擊這裏選擇你喜歡的Themes,裏面有大量美觀的主題

我這裏用的是簡約著稱的Next主題.

下載主題
- 使用git命令下載該主題到本地.
- git clone https://github.com/theme-next/hexo-theme-next themes/next
- clone成功後,你的Themes文件夾下就會有next主題文件了.
Hexo配置文件:
- 都叫_config.yml
- 一份位於站點根目錄下，主要包含 Hexo 本身的配置,稱爲 站點配置文件
- 另一份位於主題目錄下主要用於配置主題相關的選項,稱爲主題配置文件
開啓主題
- 站點配置文件進行修改: 將theme: landscape修改爲 theme: next

1. 側邊欄頭像設置

新版next注意引入了該功能,直接在主題配置文件修改即可,如下:

# Sidebar Avatar 頭像
avatar:
  url: /images/avatar.gif
  # 圓形頭像
  rounded: true
  # 透明度 0~1之間
  opacity: 1
  # 頭像旋轉
  rotated: true

2. 設置個人社交圖標鏈接

直接在主題配置文件修改即可,如下:

# Social Links. 社交鏈接 前面爲鏈接地址 後面是圖標 
social:
  GitHub: https://github.com/illusorycloud || github
  E-Mail: mailto:[email protected] || envelope
  #Weibo: https://weibo.com/yourname || weibo
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype
# 圖標配置 
social_icons:
  #是否顯示圖標
  enable: true
  #是否只顯示圖標
  icons_only: false
  #是否開啓圖標變化(就是刷新後會變顏色)
  transition: false

3. 添加菜單項

1.先在主題配置文件修改

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  AAAAA: /BBBBB/ || CCC
其中AAA 爲菜單項的名字,BBB是路徑,CCC是菜單項顯示的圖標

next 使用的是 Font Awesome 提供的圖標 ,在這裏可以選擇自己喜歡的圖標.

2.生成上述路徑的文件

git命令行輸入

hexo new page BBB --其中BBB替換爲具體的名字,會在站點目錄\source下新增一個BBB文件夾,文件夾中有一個index.md文件，需要在文件頭中增加一句type: XXX,例如type: categories。這樣就會在這個頁面顯示所有的分類了。

3.修改主題文件下的對應語言的配置文件,這裏是中文就修改zh-CN.yml

menu:
  home: 首頁
  archives: 歸檔
  AAAA : XXXX
AAA爲上邊的菜單項名字,XXX爲中文的名字

4. 添加RSS

1.安裝插件
- 首先在Git中運行npm install --save hexo-generator-feed命令,安裝插件,插件會放在
  
  node_modules文件夾裏面.
2.修改站點配置文件
- 安裝好插件後,打開站點配置文件_config.yml`,在末尾加入以下代碼:

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

3.修改主題配置文件
- 打開主題配置文件_config.yml,找到rss 添加配置:rss: /atom.xml

5. 設置酷炫動態背景

next主題提供了兩種背景可以選擇.

第一種背景（我是用的這種）

新版本的next主題的話直接在主題配置文件中,找到canvas-nest 修改爲canvas-nest: true,

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,255' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # the number of lines

進入theme/next目錄

執行命令git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

第二種背景

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# three_waves
three_waves: false
# canvas_lines
canvas_lines: false
# canvas_sphere
canvas_sphere: false

也是需要下載依賴

進入theme/next目錄
執行命令：git clone https://github.com/theme-next/theme-next-three source/lib/three

4個背景中只能開啓一種背景,不然會出錯

6. 設置網站logo

把你的圖片放在themes/next/source/images裏

打開主題配置文件_config.yml ,找到字段favicon: 都修改爲對應路徑

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

7. 實現點擊出現桃心效果

themes/next/source/js/src裏面新建一個love.js,

複製下面的代碼進去

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

然後打開\themes\next\layout\_layout.swig文件,在末尾添加以下代碼：

<!-- 頁面點擊小紅心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

8. 修改文章內鏈接文本樣式

鼠標移動到連接上變顏色

修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css樣式，：

// 文章內鏈接文本樣式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

9. 設置頂部滾動加載條

打開next\layout\_partials\head文件，在文件末尾添加以下代碼:

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
<style>
    .pace .pace-progress {
        background: #1E92FB; /*進度條顏色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*陰影顏色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上邊框顏色*/
        border-left-color: #1E92FB;    /*左邊框顏色*/
    }
</style>

10. 在每篇文章末尾統一添加“本文結束”標記

在路徑 \themes\next\layout\_macro 中新建 page-end-tag.swig 文件,並添加以下內容：

<!--文字可以自己修改-->
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #A2CD5A;font-size:15px;">------------------本文到此結束<i class="fa fa-paw"></i>感謝您的閱讀------------------</div>
    {% endif %}
</div>

接着打開\themes\next\layout\_macro\post.swig文件，在post-body 之後， post-footer 之前添加下面的代碼

<div>
  {% if not is_index %}
    {% include 'page-end-tag.swig' %}
  {% endif %}
</div>

然後打開主題配置文件（_config.yml),在末尾添加：

# 文章末尾添加“本文結束”標記
page_end_tag:
  enabled: true

11. 靜態資源壓縮

Hexo自動生成的html中有很多空白的地方,會影響加載速度,所以最好還是壓縮一下.

這裏使用hexo-neat插件來壓縮。

安裝插件
- npm install hexo-neat --save

在站點配置文件添加配置

# hexo-neat
# 博文壓縮
neat_enable: true
# 壓縮html
neat_html:
  enable: true
  exclude:
  
# 壓縮css  跳過min.css
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
    
# 壓縮js 跳過min.js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'  
    - '**/love.js'
# 壓縮博文配置結束

3.使用
- 以後再執行hexo g命令時就會自動壓縮了

12. 主頁文章添加陰影效果

打開\themes\next\source\css\_custom\custom.styl,向裏面加入：

// 主頁文章添加陰影效果
 .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);
  }

13. 修改文章底部的的標籤樣式

打開模板文件/themes/next/layout/_macro/post.swig，找到rel="tag">#字段，將# 換成<i class="fa fa-tag"></i>,其中tag是你選擇標籤圖標的名字,也是可以自定義的

<a href="{{ url_for(tag.path) }}" rel="tag"> <i class="fa fa-tag"></i> {{ tag.name }}</a>

14. 實現文章字數統計和預計閱讀時間

1.在站點根目錄下使用GitBash命令安裝 hexo-wordcount插件:

npm install hexo-symbols-count-time --save

2.在全局配置文件_config.yml中激活插件:

symbols_count_time:
    symbols: true
    time: true
    total_symbols: true
    total_time: true

3.在主題的配置文件_config.yml中進行如下配置:

#字數統計
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 4
  wpm: 275

到此,我們就實現了文章字數統計和預估時間的顯示功能

15. 在文章底部增加版權信息

修改主題配置文件,找到creative_commons字段

# Creative Commons 4.0 International License.
# https://creativecommons.org/share-your-work/licensing-types-examples
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons:
  #選擇一個License
  license: by-nc-sa
  #是否在側邊欄顯示
  sidebar: false  
  #是否在文章末尾顯示
  post: true

16. 文章置頂

打開文件：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的排在前面（這裏用異或操作居然不行233）
            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
    }
  });
};

寫文章的時候,在標題加上top值,數值越大排在越前面.

tag: hexo 
copyright: true
password: xxx
top: 150

17. 在網站底部加上訪問量

Next主題配置這個就比較方便了

打開主題配置文件，找到如下配置：

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

將enable的值由false改爲true，便可以看到頁腳出現訪問量.

另外本地預覽時訪客數異常是正常的,部署至雲端後就不會出現這樣的問題.

18. 網站搜索功能

1.安裝插件

站點目錄下執行命令npm install hexo-generator-searchdb --save

2.修改站點配置文件

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3.修改主題配置文件

# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: enable
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # unescape html strings to the readable one
  unescape: false

重新開啓服務後即可看到效果。

TODO開啓留言評論功能

//TODO 待更新

參考

Hexo官方文檔

Next官方文檔

基於Hexo搭建個人博客(二)---主題優化篇

0. 選擇主題

1. 側邊欄頭像設置

2. 設置個人社交圖標鏈接

3. 添加菜單項

4. 添加RSS

5. 設置酷炫動態背景

6. 設置網站logo

7. 實現點擊出現桃心效果

8. 修改文章內鏈接文本樣式

9. 設置頂部滾動加載條

10. 在每篇文章末尾統一添加“本文結束”標記

11. 靜態資源壓縮

12. 主頁文章添加陰影效果

13. 修改文章底部的的標籤樣式

14. 實現文章字數統計和預計閱讀時間

15. 在文章底部增加版權信息

16. 文章置頂

17. 在網站底部加上訪問量

18. 網站搜索功能

TODO開啓留言評論功能

參考

感覺比較靠譜的Git倉庫瘦身方案

基於Hexo搭建個人博客(二)---主題優化篇

基於Hexo搭建個人博客(一)---基礎篇

基於Hexo搭建個人博客優化(五)---壓縮篇(gulp4.0壓縮靜態資源)

基於Hexo搭建個人博客(三)---部署篇

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結