前言

看了上一篇的文章應該可以自己搭一個簡陋的博客網站出來，下面我們來美化next主題，使我們的網站更簡便、生動、好看

1.Next主題風格

Next提供了四中主題風格scheme，可以在主題配置文件Myblog/themes/next/_config.yml文件中進行選擇

分別是Muse、Mist、Pisces、Gemini

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

默認時Muse主題，我用的是Gemini主題，所以把Muse註釋掉，Gemini去掉註釋

# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

效果：

2.博客自定義圖標

我們博客的默認圖標是N，不過Next支持修改圖標

博客網站的圖標可以在easyicon、bitbug、iconfont等網站選擇和製作，然後選擇或者創建相應大小的圖標文件，放置在Myblog/themes/next/sources/images目錄下，並在主題配置文件中進行如下配置，只需要設置small和medium兩個就可以：

favicon:
  small: /images/favicon.ico
  medium: /images/favicon.ico
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

效果

3.鼠標點擊特效

在/themes/next/source/js/src下新建文件 clicklove.js ，接着把下面的代碼拷貝粘貼到 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);

在\themes\next\layout_layout.swig文件末尾添加：

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

重新加載靜態文件

hexo clean
hexo g
hexo s --debug

效果

4.添加動態背景

在網站背景添加網格線動態線，將canvas_nest的false值改爲true

# Canvas-nest
canvas_nest: true

效果

5.修改標籤樣式

修改博客底部的標籤樣式默認爲#tag

這個測試是我們的博客的標籤，如果沒有可在hexo admin後臺添加

只需要修改模板/themes/next/layout/_macro/post.swig，搜索 rel=“tag”>#，將 # 換成

6.作者頭像設置

可以再側邊欄添加我們頭像，

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /images/headImage.jpg #將我們的頭像圖片放置在Myblog/themes/next/source/images目錄下，填寫具體地址

7.文章結束標誌

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

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

接着打開\themes\next\layout_macro\post.swig文件， post-footer 之前添加如代碼：

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

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

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

8.社交設置

設置主題配置文件，其中social表示社交信息，我們可以填入我們相關的鏈接，格式爲鏈接名:鏈接地址 || 鏈接圖標，其中鏈接圖標必須是FontAwesome網站中存在的圖標名。

social:
  GitHub: https://github.com/honger1234 || github
  CSDN: https://blog.csdn.net/qq_38738510 || crosshairs
  #E-Mail: mailto:yourname@gmail.com || envelope
  #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

9.添加標籤頁面、分類和公益404頁面

首先打開主題下的配置文件_config.yml，然後搜索menu找到如下配置項，將commonweal、tags、categories前的#號去掉，就開啓了404、標籤和分類標籤，當然還有其他菜單項也可以開啓

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

運行如下命令新建相關頁面

hexo new page "404"
hexo new page "tags"
hexo new page "categories"

運行結果如下，會再source文件下創建about、tags、categories文件夾，每個文件夾下還會創建一個index.md文件表示404、標籤頁和分類頁面，編輯這三個MarkDown文件可以自定義這三個頁面的內容

404的index.md內容如下

---
title: 404
date: 2020-05-21 22:01:08
type: "404"
---

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
  <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
  <script type="text/plain" src="http://www.qq.com/404/search_children.js"
          charset="utf-8" homePageUrl="/"
          homePageName="回到我的主頁">
  </script>
  <script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
  <script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>

標籤頁的index.md內容如下

---
title: tags
date: 2020-05-21 21:56:07
type: "tags"
---

分類頁的index.md內容如下

---
title: categories
date: 2020-05-21 21:56:11
type: "categories"
---

10.博客底部佈局

設置主題配置文件中

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  since: 2020 #建站時間

  # Icon between year and copyright info.
  icon: heart #♥型圖標

  # If not defined, will be used `author` from Hexo main config.
  copyright:
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: false #是否顯示 Powered by hexo

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false #是否顯示主題信息
    # Version info of NexT after scheme info (vX.X.X).
    version: true #是否顯示主題版本
  # -------------------------------------------------------------
  # Any custom text can be defined here.
  #custom_text: Hosted by <a target="_blank" href="https://pages.github.com">GitHub Pages</a>

11.添加打賞

在主題配置文件中設置如下：

# Reward
reward_comment: 請作者喝杯茶把⬇
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

自己獲取自己的支付收款碼，放置在next/source/images中

12.頁面寵物

首先在博客目錄下執行：

npm install -save hexo-helper-live2d

然後在站點配置文件中加入：

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  model:
    use: live2d-widget-model-wanko  #選擇哪種模型
  display: #放置位置和大小
    position: right
    width: 150
    height: 300
  mobile:
    show: true#是否在手機端顯示

上面模型的選擇可在lived2d中選擇，並下載相應的模型：

npm install live2d-widget-model-wanko

13.博客摘要顯示

對於摘要顯示，首先我們需要開啓摘要功能，修改主題配置文件：

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

14.設置RSS訂閱

在博客主目錄下執行：

npm install --save hexo-generator-feed

在站點配置文件末尾中添加：

plugins: hexo-generate-feed

然後設置主題配置文件：

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

15.文章鏈接樣式

修改文件 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;
  }
}

16.網易雲音樂播放器

首先在網頁搜索網易雲音樂，選擇音樂，並生成外鏈

如果提示版權保護，無法生成外鏈的話就換首歌吧，鼠標停留在生成鏈接上谷歌瀏覽器右鍵檢查，複製裏面的鏈接，前面加上//music.163.com/#，完整鏈接

//music.163.com/#/outchain/2/1421596293/

在 themes/next/_config.yml 配置文件中添加下面代碼

#網易雲音樂的外鏈
#//music.163.com/outchain/player?type=2&id=33911781&auto=1&height=66
background_music: //music.163.com/outchain/player?type=2&id=1421596293&auto=1&height=66

將下面代碼粘貼到一個合適的位置，建議放在側邊欄，在Myblog/themes/next/layout/_macro/sidebar.swig文件下，選擇位置複製進去，不同位置效果不同

 {% if theme.background_music %}
      <div>
         <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="410" height="110" src="{{ theme.background_music }}"></iframe>
      </div>
{% endif %}

我的是放在theme.social後面

17.評論插件

評論我這裏用的是Valine，Valine 是基於 LeanCloud作爲數據存儲的，所以需要註冊一個賬號，註冊完成後，我們找到創建應用

創建好之後獲取獲取 APP ID 和 APP KEY

修改主題配置文件，找到valine的配置,並填上對應的信息

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid: HcHqkaoVfbgnocn19934XGLK-gzGzoHsz # your leancloud application appid                  
  appkey: yNxUjPG4RVq633DglnvgnYAQ # your leancloud application appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: ヾﾉ≧∀≦)o 來呀！吐槽一番吧 # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size

appid和appkey填你自己的

18.文章分享

NexT中已經集成好了百度分享，我們只需在配置中開啓即可

搜索baidushare光健字找到以下配置，將baidushare及type前的註釋去掉

type有兩種類型，button和slide可以根據自己喜歡的配置，但我這裏發現type爲button時按鈕看不到，只有slide才能看到，不知道啥原因，所以暫時用slide不用button

# Baidu Share
# Available value:
#    button | slide
# Warning: Baidu Share does not support https.
baidushare:
 type: slide

這個按鈕要進入文章纔會顯示

上面一步其實就已經OK了，hexo g編譯一下，hexo s就可以在本地看到效果了，但是我部署到GitHub上就不行了，baidushare配置項上有一條註釋# Warning: Baidu Share does not support https，就是說百度分享不支持https，而GitHub的url地址都是https的

解決辦法：把百度分享需要的一些文件下載下來放在本地static文件夾下即可

首先到GitHub上下載baiduShare，然後解壓後將static整個文件夾放在\themes\next\source路徑下

然後打開\themes\next\layout_partials\share\baidushare.swig文件，拉到最下面找到如下配置

<script>
  with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='//bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

將上面的配置替換成如下配置

<script>
  with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>

也就是吧static前的//bdimg.share.baidu.com去掉就完事了

最後再重新hexo d -g編譯部署下就可以看到如下效果了

19.閱讀次數/時長和訪客數

打開主題配置文件，修改配置項

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-eye"></i>
  page_pv_footer:

因七牛強制過期『dn-lbstatics.qbox.me』域名，與客服溝通無果，只能更換域名到『busuanzi.ibruce.sinfo』

所以還要修改下域名

開next/layout/_third-party/analytics/busuanzi-counter.swig文件，修改

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

替換如下

<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

清一下緩存，重新發佈下，打完收工

這個效果是要發佈到github才能看到效果的的，在本地看的話數據是亂的

20.添加訂閱微信公衆號

在每篇文章的末尾顯示微信公衆號二維碼，掃一掃，輕鬆訂閱博客。

在微信公衆號平臺下載您的二維碼，並將它存放於博客source/uploads/目錄下。

然後編輯主題配置文件，如下：

# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.png
  description: 歡迎您掃一掃上面的微信公衆號，訂閱我的博客！

Hexo之next主題優化

文章目錄

前言