Hexo主題 —— NexT優化

時間  2019-12-01
標籤 hexo 主題 優化 简体版
原文   原文鏈接

Hexo主題 —— NexT優化

首先，必需要說明的是，關於NexT主題的全部設置與功能都能在《NexT主題官方文檔》中找到。本文只是記錄下我採用的設置。css

主題配置文件_config.yaml

Hexo安裝根目錄下的_config.yaml文件負責的是整個Hexo的屬性配置，而主題目錄下也有/theme/_config.yaml文件，負責單個主題的屬性配置，NexT主題的配置文件就在Hexo/themes/next/目錄下。html

Scheme主題選擇

在theme/_config.yaml文件中的scheme目錄下選擇本身喜歡的主題便可。
Muse 是NexT的默認版本，黑白主調，大量留白。
jquery

Muse

Mist 是NexT的緊湊版本，整潔有序。
git

Mist

Pisces 是雙欄設計，頭像、簽名等被移到左邊單獨做爲一欄，我的最喜歡。
github

Pisces

文內連接形式

未修改時，文內連接顏色和普通文本沒有區別：
web

link origin

爲了突出區別性，咱們在 themes/next/source/css/_common/components/post/post.styl文件中添加下列的代碼： 

.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;
    }
  }
複製代碼

修改後的文內連接是藍色，鼠標放上去會變爲紅色：
npm

link new

菜單設置

在theme/_config.yaml文件中的menu目錄下：home屬性表明主頁，about屬性表明我的信息，tags屬性表明標籤，categories屬性表明目錄，archives屬性表明歸檔…… 經過修改對應的屬性，能夠修改頁面的展現信息，即左側的菜單欄：
canvas

menu

網站圖標設置

將圖片（png或jpg格式，不是favicon.ico）放在themes/next/source/images裏，而後修改主題配置文件theme/_config.yaml的favicon屬性，將small、medium和apple_touch_icon都配置爲/images/imgPath就能夠了，其餘字段都註釋掉。服務器

favicon:
 small: /images/db3.png
 medium: /images/db3.png
 apple_touch_icon: /images/db3.png
複製代碼

啓用RSS訂閱博客更新

什麼是RSS？
RSS(Really Simple Syndication，簡易信息聚合)是一種描述和同步網站內容的格式，是使用最普遍的XML應用。RSS搭建了信息迅速傳播的一個技術平臺，使得每一個人都成爲潛在的信息提供者。發佈一個RSS文件後，這個RSS Feed中包含的信息就能直接被其餘站點調用，並且因爲這些數據都是標準的XML格式，因此也能在其餘的終端和服務中使用，是一種描述和同步網站內容的格式。
RSS目前普遍用於網上新聞頻道，blog和wiki，主要的版本有0.91, 1.0, 2.0。使用RSS訂閱能更快地獲取信息，網站提供RSS輸出，有利於讓用戶獲取網站內容的最新更新。網絡用戶能夠在客戶端藉助於支持RSS的聚合工具軟件，在不打開網站內容頁面的狀況下閱讀支持RSS輸出的網站內容。網絡

  1. 安裝hexo-generator-feed插件
    npm install hexo-generator-feed --save

  2. 在站點的配置文件_config.yaml文件中配置RSS feed
    在_config.yaml文件末尾添加：

 feed:  
 type: atom  
 path: atom.xml  
 limit: 0  

 plugins:
 - hexo-generator-feed
複製代碼

  1. 修改主題配置文件theme/_config.yaml的rss屬性爲：rss: /atom.xml

  2. 使用RSS

運行hexo g，若是提示INFO Generated: atom.xml，且在Hexo/public/目錄下生成了atom.xml文件，則說明RSS設置成功。
運行hexo d，若是服務器對應的目錄hexo下也有了atom.xml文件，則說明部署也成功了。
這樣你的博客就能夠被別人訂閱了，點擊主頁的RSS按鈕，會顯示以下頁面：

RSS

打賞

在theme/_config.yaml文件中的Reward(Donate)目錄下，傳入打賞圖片，能夠展現打賞信息：

# Reward (Donate)
 reward_settings:
 enable: true
 animation: true
 comment: 沒辦法，要恰飯的嘛
 reward:
 wechatpay: https://tva1.sinaimg.cn/large/007rAy9hgy1g3b8vqnvnrj30u014q0w6.jpg
 alipay: https://tva1.sinaimg.cn/large/007rAy9hgy1g3b8wjrpzgj30p011iaco.jpg
複製代碼

首頁文章摺疊

將theme/_config.yaml文件auto_excerpt目錄下的enable改成true便可。

auto_excerpt

回到頂部按鈕顯示百分比

back2top:
  # 回到頂部按鈕
 enable: true
  # true，按鈕顯示在側邊欄；false，按鈕顯示在右下角
 sidebar: false
  # 按鈕上顯示百分比
 scrollpercent: true
複製代碼

如圖：

back2top

文章添加陰影

未添加陰影時，文章之間的分隔不是很明顯：

no shadow

在 themes/next/source/css/_custom/custom.styl文件中添加以下代碼： 

// 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);
}
複製代碼

效果如圖：

shadow

頭像

修改theme/_config.yaml文件下的avatar屬性，能夠使用本地圖片，或是在avatar: url:屬性中傳入網絡圖片。

社交連接

修改theme/_config.yaml文件下的social屬性，按照格式設置便可：

 social:
 GitHub: https://github.com/DragonBaby308 || github
 Bilibili: https://space.bilibili.com/24837083 || bilibili
複製代碼

友情連接

修改theme/_config.yaml文件下的links屬性，按照格式設置便可：

links:
  讓我幫你百度一下: http://lab.mkblog.cn/lmbtfy/
複製代碼

Local Search本地搜索

  1. 首先，安裝hexo-generator-searchdb，在根目錄下執行：
    npm install -g hexo-generator-searchdb --save

  2. 在站點配置文件_config.yaml中添加以下內容：

search:
 path: ./public/search.xml
 field: post
 format: html
 limit: 10000
複製代碼
  1. 將主題配置文件theme/_config.yaml文件中local_search標籤下的enable改成true。
    Local Search

不蒜子統計UV（訪客數）和PV（訪問量）

將主題配置文件theme/_config.yaml文件中busuanzi_count標籤下的enable改成true。配置以下：

busuanzi_count:
 enable: true
  # 訪客數
 site_uv: true
  # 訪問量
 site_pv: true
  # 文章閱讀次數
 page_pv: true
複製代碼

動態背景

首先將動態背景所須要依賴的js下載到themes/next/source/lib目錄下，而後將主題配置文件theme/_config.yaml文件中canvas標籤下的對應特效改成true便可啓用。 如，我須要使用Canvas-nest動畫，則須要首先git clone https://github.com/theme-next/theme-next-canvas-nest Hexo/themes/next/source/lib/canvas-nest，將js下載到本地，而後再修改主題配置文件theme/_config.yaml文件中canvas_nest標籤下的enable爲true。

# canvas-nest  鼠標靜止不動，會有線條彙集
git clone https://github.com/theme-next/theme-next-canvas-nest Hexo/themes/next/source/lib/canvas-next

# three_waves  波浪
# canvas_lines
# canvas_sphere
git clone https://github.com/theme-next/theme-next-three Hexo/themes/next/source/lib/next-three

# canvas-ribbon  彩虹效果，只支持Pisces
git clone https://github.com/theme-next/theme-next-canvas-ribbon Hexo/themes/next/source/lib/canvas-ribbon

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

three_waves: true
canvas_lines: true
canvas_sphere: true

canvas_ribbon:
  enable: true
  size: 300
  alpha: 0.6
  zIndex: -1
複製代碼

加載條效果

首先經過git clone https://github.com/theme-next/theme-next-pace Hexo/themes/next/source/lib/page命令，將加載條所須要依賴的js下載到Hexo/themes/next/source/lib目錄下，而後將主題配置文件theme/_config.yaml文件中pace標籤改成true，在pace_theme中選用對應主題便可啓用。

pace: true
# pace_theme: pace-theme-big-counter 右上角百分比數字
# pace_theme: pace-theme-bounce 右上角彈球
# pace_theme: pace-theme-barber-shop 理髮店藍白加載條，從左滑到右
# pace_theme: pace-theme-center-atom 屏幕正中，原子樣式的圓形加載條
# pace_theme: pace-theme-center-circle 屏幕正中，圓形轉圈加載條
# pace_theme: pace-theme-center-radar 屏幕正中，雷達形狀
# pace_theme: pace-theme-center-simple 屏幕正中，進度條
# pace_theme: pace-theme-corner-indicator 右上角轉圈
# pace_theme: pace-theme-fill-left 從左到右
# pace_theme: pace-theme-flash 右上角有一個小圈圈，其餘特效沒看出來
# 屏幕正中間進度條
pace_theme: pace-theme-loading-bar  
# pace_theme: pace-theme-mac-osx 斑馬紋？
# pace_theme: pace-theme-minimal 啥也沒有
複製代碼

本文結束標記

在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-body後，添加以下代碼：

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

最後在theme/_config.yaml文件末尾添加：

# 文章末尾添加「本文結束」標記
passage_end_tag:
 enabled: true
複製代碼

效果如圖：

pageend

版權聲明

  1. 在theme/next/layout/_macro/目錄下添加文件my-copyright.swig
{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

  <!-- JS庫 sweetalert 可修改路徑 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文標題:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章做者:</span><a href="/" title="訪問 {{ theme.author }} 的我的博客">{{ theme.author }}</a></p>
  <p><span>發佈時間:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
  <p><span>最後更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
  <p><span>原始連接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="點擊複製文章連接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="複製成功！"></i></span>
  </p>
  <p><span>許可協議:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商業性使用-禁止演繹 4.0 國際</a> 轉載請保留原文連接及做者。</p>  
</div>
<script>
    var clipboard = new Clipboard('.fa-clipboard');
      $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '複製成功',
          icon: "success",
          showConfirmButton: true
          });
        });
    });  
</script>
{% endif %}
複製代碼
  1. 在theme/next/source/css/_common/components/post/目錄下添加文件my-post-copyright.styl
.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}
複製代碼
  1. 修改theme/next/layout/_macro/post.swig文件
{#####################}
{### END POST BODY ###}
{#####################}

  # 添加下面這段
{% if not is_index %}
  {% include 'my-copyright.swig' %}
{% endif %}

{% if theme.wechat_subscriber.enable and not is_index %}
  {% include '../_partials/post/wechat-subscriber.swig' %}
{% endif %}
複製代碼

  1. 修改theme/next/source/css/_common/components/post/post.styl文件，在最後一行新增：@import "my-post-copyright";

  2. 修改Hexo/scaffolds/post.md，默認顯示版權信息

---
title: {{ title }}
date: {{ date }}
tags:
categories:
copyright:
---
複製代碼

效果如圖：

copyright

Livere（來必力）評論區

首先，訪問Livere官網，註冊→登陸→安裝，會獲得一個data-id。

data-id
將 data-id複製粘貼到 theme/_config.yaml文件的 livere_uid屬性便可。效果如圖：
Livere

Live2d 看板娘

  1. 安裝hexo-helper-live2d

在博客根目錄下，執行npm install hexo-helper-live2d --save

  1. 修改站點配置文件或主題配置文件

官方已有的看板娘名稱請點這裏查看，部分看板孃的模型預覽請看CSDN某博客。
我修改的是站點配置文件Hexo/_config.yaml，添加以下代碼：

live2d:
 enable: true
 scriptFrom: local
 pluginRootPath: live2dw/
 pluginJsPath: lib/
 pluginModelPath: assets/
 model:
    # 填寫你所須要的看板娘名稱
 use: live2d-widget-model-haruto
 display:
 position: right
 width: 150
 height: 300
 mobile:
 show: true
複製代碼
  1. 經過npm安裝依賴的看板娘文件

npm install live2d-widget-model-name，其中name是你選擇的官方看板孃的名字，如我選擇的是haruto，則爲npm install live2d-widget-model-haruto。
從新運行hexo clean && hexo d -g則可在主頁看到了。

haruto
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程