Next主題美化

寫作目的

網(wǎng)上關(guān)于Hexo的主題美化的博客已經(jīng)很多也很全面了，但是在作者去一一嘗試的時候附较，卻發(fā)現(xiàn)有很多博客中提供的方法現(xiàn)在已經(jīng)不支持或者過時了，為了避免大家和作者一樣花費大量時間去一一嘗試，所以作者考慮再三恩敌，決定將自己嘗試過可靠的方法記錄下來疾忍，與大家一起學習進步乔外。

一、Next主題美化

Hexo支持很多主題風格一罩，Hexo博客支持很多主題風格杨幼，其中Next主題是Github上Star最多的主題，其一直在更新維護，支持非常多的外部插件和功能選項差购。我目前使用的是Next6.0版本四瘫，下面我會介紹基于Next6主題的界面美化手法。

1欲逃、Next主題安裝配置

Next主題配置安裝方式很簡單找蜜，只需要執(zhí)行兩步：

$ cd hexo文件目錄
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

然后設(shè)置站點配置文件_config.yml:

$ theme: next

即可將我們的Hexo博客主題替換為Next主題。

2暖夭、主題簡單配置

Next主題主要分為四種scheme锹杈，可以在主題文件的_config.yml文件中進行選擇，分別是Muse迈着、Mist竭望、Pisces、Gemini裕菠；作者主要選用的是Gemini風格咬清，效果如下：

3、Next常規(guī)配置

3.1奴潘、個人信息配置

在站點的_config.yml文件中進行配置：

title: 可樂&博客
subtitle: 生于憂患旧烧，死于安樂
description: 看得懂的書，請仔細看画髓；看不懂的書掘剪，請硬著頭皮看。
keywords:
author: 張泉
language: zh-CN # 主題語言
timezone: Asia/Shanghai #中國的時區(qū)奈虾，不要亂改城市

3.2夺谁、頭像配置

將頭像放置在themes/next/source/images/中，然后在主題中打開_config.yml文件中進行配置：

avatar:
  # In theme directory (source/images): /images/avatar.gif
  # In site directory (source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /images/avatar.png #將我們的頭像圖片放置在blog/themes/next/source/images目錄下肉微，填寫具體地址
  # If true, the avatar would be dispalyed in circle.
  rounded: true #鼠標放在頭像上時是否旋轉(zhuǎn)
  opacity: 1 #頭像放縮指數(shù)
  # If true, the avatar would be rotated with the cursor.
  rotated: true #頭像是否設(shè)為圓形匾鸥，否則為矩形

3.3 其它常規(guī)配置

# Table Of Contents in the Sidebar
toc:
  enable: true #是否自動生成目錄
  # Automatically add list number to toc.
  number: false #目錄是否自動產(chǎn)生編號
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false #標題過長是否換行
  # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.
  max_depth: 6 #最大標題深度

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12 #側(cè)邊欄相對主菜單像素距離
  # Back to top in sidebar.
  b2t: true #是否提供一鍵置頂
  # Scroll percent label in b2t button.
  scrollpercent: true #是否顯示當前閱讀進度
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false #手機上是否顯示側(cè)邊欄

3.4、菜單欄配置

（1）在主題中打開_config.yml文件中進行配置：

menu:
  home: / || home
  # about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

（2）系統(tǒng)自動幫我們創(chuàng)建了home和archives頁面碉纳，所以我們只需要使用終端創(chuàng)建tags和categories頁面即可：

$ cd hexo文件目錄
$ hexo new page "tages"
$ hexo new page "categories"

(3)創(chuàng)建好的頁面在站點sources中勿负，我們需要對相關(guān)頁面進行type修改：

---
title: 分類
date: 2019-09-11 14:14:50
type: "categories"
---

---
title: 標簽
date: 2019-09-11 14:14:28
type: "tags"
---

（4）在我們寫的博客頁面中進行相關(guān)參數(shù)的配置：

---
title: 手把手教你使用Hexo搭建github個人博客
date: 2019-09-11 19:06:18
comments: false
tags:
- 工具
- hexo
categories: 
- 工具
- hexo
---

效果如下：

二、添加搜索功能

1劳曹、安裝 hexo-generator-searchdb 插件

$ cd 文件目錄
$ npm install hexo-generator-searchdb --save

2奴愉、打開站點配置文件_config.yml,找到Extensions在下面添加:

# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

3、打開主題配置文件_config.yml,找到Local search铁孵，將enable設(shè)置為true锭硼。

4、效果如下：

三库菲、自定義博客圖標

我們博客的默認圖標是H，不過Next支持修改圖標志膀，下面是我的圖標：

我們需要將我們的圖標放置在/themes/next/sources/images目錄下熙宇，并在主題配置文件中進行如下配置鳖擒，只需要設(shè)置small和medium兩個就可以：

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/favicon-128x128-next.png
  safari_pinned_tab: /images/logo.svg

四、添加點擊效果

1烫止、在/themes/next/source/js目錄下蒋荚，新建clicklove.js文件：

$ cd /themes/next/source/js
$ touch clicklove.js

2、將下面的代碼粘貼進clicklove.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);

3馆蠕、在\themes\next\layout\_layout.swig文件末尾添加：

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

4期升、效果如下：

五、添加背景

1互躬、下載相應的資源包：

$ git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

2播赁、在主題配置中做相關(guān)參數(shù)修改：

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest: # 網(wǎng)絡背景
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,0' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 150 # the number of lines

# 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

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
  enable: false
  size: 300
  alpha: 0.6
  zIndex: -1

3、效果如下

六吼渡、添加更多按鈕

因為在你的博客主頁會有多篇文章容为，如果你想讓你的文章只顯示一部分，多余的可以點擊閱讀全文來查看寺酪，那么你需要在你的文章中添加

<!--more-->

其后面的部分就不會顯示了坎背，只能點擊閱讀全文才能看。效果如下：

七寄雀、添加RSS訂閱

1得滤、安裝RSS插件

$ cd 文件目錄
$ npm install --save hexo-generator-feed

2、打開站點配置文件_config.yml盒犹，進行相關(guān)參數(shù)修改：

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

3懂更、打開主題配置文件_config.yml，進行相關(guān)參數(shù)修改：

$ rss: /atom.xml //注意：有一個空格

4阿趁、效果如下：

八膜蛔、添加社交信息

打開主題配置_config.yml，進行相關(guān)參數(shù)修改：

social:
  GitHub: 自己的GitHub地址 || github #
  CSDN: 自己的CSDN地址 || crosshairs
  #E-Mail: mailto:yourname@gmail.com || 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: true

九脖阵、增加頁面寵物

1皂股、在站點目錄下執(zhí)行：

$ npm install -save hexo-helper-live2d

2、打開主題配置_config.yml命黔，添加下列相關(guān)參數(shù)：

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-tororo
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true
  react:
    opacity: 0.7

use對應的參數(shù)呜呐，可以對照著lived2d進行選擇，效果如下：

十悍募、增加文章結(jié)束標志

1蘑辑、在路徑/themes/next/layout/_macro文件夾中新建passage-end-tag.swig文件：

//切換到路徑_macro
$ cd [_macro路徑]
//創(chuàng)建passage-end-tag.swig文件
$ touch passage-end-tag.swig

2、打開passage-end-tag.swig文件坠宴，添加以下內(nèi)容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結(jié)束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div>
    {% endif %}
</div>

3洋魂、打開/themes/next/layout/_macro/post.swig，在post-body之后，post-footer之前副砍，添加以下代碼：

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

4衔肢、然后打開主題配置文件_config.yml,在末尾添加：

# 文章末尾添加“本文結(jié)束”標記
passage_end_tag:
  enabled: true

5、效果如下：

十一豁翎、添加文章版權(quán)信息

打開主題配置_config.yml角骤，進行相關(guān)參數(shù)設(shè)置：

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true

效果如下：

十二、增加閱讀次數(shù)和訪客數(shù)

博客閱讀次數(shù)和訪客數(shù)使用的是不蒜子提供的相關(guān)服務心剥，使用非常簡單邦尊。

1、打開 themes/next/layout/_partial/footer.swig优烧，將下面這段代碼添加到footer.swig最后面：

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
  <span class="post-meta-divider">|</span>
  本站總訪問量<span id="busuanzi_value_site_pv"></span>次
  <span class="post-meta-divider">|</span>
  本站訪客數(shù)<span id="busuanzi_value_site_uv"></span>人次
  <span class="post-meta-divider">|</span>
  本文總閱讀量<span id="busuanzi_value_page_pv"></span>次
</div>

2蝉揍、打開主題配置_config.yml，進行相關(guān)參數(shù)設(shè)置：

busuanzi_count:
  enable: true  #是否開啟不蒜子統(tǒng)計功能
  total_visitors: false
  total_visitors_icon: user
  total_views: false
  total_views_icon: eye
  post_views: false
  post_views_icon: eye

3匙隔、效果如下：

十三疑苫、增加文章字數(shù)統(tǒng)計

在next中推薦的是hexo-symbols-count-time，而在本篇中使用的是功能更加強大的hexo-wordcount纷责。

1捍掺、安裝hexo插件：

$ cd 文件目錄
$ npm install hexo-wordcount --save

2、在/themes/next/layout/_partials/footer.swig末尾添加代碼：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

3再膳、打開主題配置_config.yml挺勿，進行相關(guān)參數(shù)設(shè)置：

symbols_count_time:
  separated_meta: true #分隔符|
  item_text_post: true #是否統(tǒng)計站點總字數(shù)
  item_text_total: true #是否同級文章總字數(shù)
  awl: 2 #平均每個字符的長度
  wpm: 300 #words per minute

3、打開站點配置_config.yml喂柒，進行相關(guān)參數(shù)設(shè)置：

symbols_count_time:
  symbols: true #是否統(tǒng)計字數(shù)
  time: false #是否統(tǒng)計閱讀時長
  total_symbols: true #是否統(tǒng)計總字數(shù)
  total_time: false #是否統(tǒng)計總閱讀時長

3不瓶、效果如下：

十四、自定義頭部背景區(qū)域

1灾杰、將圖片文件放在/themes/next/source/images中蚊丐，打開/themes/next/source/css/_schemes/Pisces/_brand.styl,添加

background-image: url(/images/blogHead.jpg);
 @media(min-width: 992px){
    background-image: url(/images/blogHead.jpg);
    }

2、效果如下：

十五艳吠、添加右上角github綁帶

1麦备、打開主題配置_config.yml，進行相關(guān)參數(shù)設(shè)置：

# Value after `||` delimeter is the title and aria-label name.
github_banner: https://github.com/nightmaredimple || Follow me on GitHub #添加右上角github綁帶