站點優化

首頁顯示文章摘要

主題默認設置，首頁將會顯示每一篇文章的全文，如果想只顯示文章摘要，可以在主題配置文件（/themes/next/_config.yml）中這樣修改：

# 自動摘要提取設定
auto_excerpt:
	enable: true
	length: 150 # 摘要長度

用戶可以在文章中使用標記來精確劃分摘要信息，標記之前的墮落將作爲摘要顯示在首頁。

如果文章的Front-Matter(文章開頭的配置信息）中有非空的description字段，則該字段的內容會被作爲摘要顯示。

修改站點頁腳

在主題配置文件中修改網站頁腳信息：

footer:  # 底部信息區
  since: 2018  # 建站時間
  icon:
    name: heart   # 圖標名稱
    animated: true   # 開啓動畫
    color: "#ff0000"   # 圖標顏色

  powered:
    enable: true  # 顯示由 Hexo 強力驅動
    version: false  # 隱藏 Hexo 版本號

  theme:
    enable: true  # 顯示所用的主題名稱
    version: false  # 隱藏主題版本號

修改網站 Favicon

Favicon 即瀏覽器標籤左側的圖標。下載自己喜歡的圖標置於 themes\next\source\images\ 目錄下，命名方式參考主題配置文件中的 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  # safari瀏覽器標籤頁圖標

添加社交鏈接

用戶可以在主題配置文件中根據樣例提示添加個人社交軟件鏈接：

social:
  GitHub: https://github.com/yourname || 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  # 顯示圖標的同時顯示文字

站點添加版權協議

在主題配置文件中設置相關字段並選擇知識共享協議：

creative_commons: by-nc-sa

文章底部添加版權信息

在目錄/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 type="text/javascript"   src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>  <script   src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">  <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);    clipboard.on(success, $(function(){      $(".fa-clipboard").click(function(){        swal({             title: "",             text: 複製成功,             html: false,          timer: 500,             showConfirmButton: false        });      });    }));  </script>{% endif %}`

在目錄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;
}

修改next/layout/_macro/post.swig，在代碼

<div>
      {% if not is_index %}
        {% include wechat-subscriber.swig %}
      {% endif %}
</div>

之前添加增加如下代碼：

<div>
      {% if not is_index %}
        {% include my-copyright.swig %}
      {% endif %}
</div>

修改next/source/css/_common/components/post/post.styl文件，在最後一行增加代碼：

@import "my-post-copyright"

如果要在該博文下面增加版權信息的顯示，需要在 Markdown 中增加copyright: true的設置，類似：

---
title: 
date: 
tags: 
categories: 
copyright: true
---

修改菜單及創建分類頁

修改主題配置文件下的menu，按需打開菜單。

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 tags新建出標籤頁。

同樣的道理，開啓分類頁的時候要輸入hexo new page categories來新建出分類頁。

添加頂部加載條

根目錄打開命令行，輸入如下命令：

git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace

然後主題配置文件搜索pace字段，修改pace: false爲pace: true即可開啓加載條功能，修改下方的pace-theme字段還可以修改加載條的樣式。

pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: mac-osx

添加動態背景

根目錄打開命令行，輸入：

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

主題配置文件搜索canvas-nest字段，enable項設置爲true。

canvas_nest:
  enable: false
  # 是否在手機端顯示。
  onmobile: true # Display on mobile or not
  # 線條顏色, 默認: `'0,0,0'`；三個數字分別爲(R,G,B)
  color: "0,0,255" # RGB values, use `,` to separate
  # 線條透明度（0~1）, 默認: `0.5
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  # count`: 線條的總數量, 默認: `150`
  count: 99 # The number of lines

增加回到頂部按鈕及顯示當前瀏覽進度

主題配置文件搜索b2t字段，將b2t字段的false修改爲true即可，（注意此功能只能用於Pisces和Gemini主題）。

# 返回頂部按鈕
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

爲博客加上萌萌的

首先安裝插件，根目錄命令行輸入npm install --save hexo-helper-live2d
主題配置文件或者博客配置文件最下方添加如下代碼：

注意：實測了一下在主題配置文件下用比較好使，但是官方文檔中說明在博客配置文件中也可以，可能我配置有問題。

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-<模型名>   
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

修改模型，參考live2d-widget-models目前可用的模型如下：

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

增加本地搜索功能

首先安裝插件，根目錄命令行輸入

npm install hexo-generator-searchdb --save

編輯博客配置文件，新增以下內容到任意位置：

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

主題配置文件搜索local_search字段，設置enable爲true

`# Local searchlocal_search:  enable: true`

配置完成後保存，hexo g、hexo s查看。

404頁面

原來的主題沒有404頁面，加一個也不是什麼難事。首先在/source/目錄下新建一個404.md，內容如下：

---
title: 404
date: 2019-07-19 16:41:10
type: "404"
layout: "404"
description: "你來到了沒有知識的荒原 :("
---

然後在/themes/matery/layout/目錄下新建一個404.ejs文件，內容如下：

<style type="text/css">
    /* don't remove. */
    .about-cover {
        height: 75vh;
    }
</style>

<div class="bg-cover pd-header about-cover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">
                        404
                    </div>
                    <div class="description center-align">
                        <%= page.description %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在網站底部加上訪問量

打開\themes\next\layout\_partials\footer.swig文件,在copyright前加上畫紅線這句話：

文章頁面優化

修改文章目錄導航

取消數字編號

在主題配置文件中關閉目錄中的數字編號：

`toc:  number: false  # 關閉目錄中的數字編號`

修改文章meta信息

默認主題配置中，標題下方會顯示文章的創建時間、文章的修改時間、文章分類信息等元數據，用戶可以在主題配置文件中自定義設置需要顯示的 meta 元信息：

post_meta:
  item_text: true  # 顯示文字說明
  created_at: true  # 顯示文章創建時間
  updated_at:
  enabled: false  # 隱藏文章修改時間
  another_day: true  # 只有當修改時間和創建時間不是同一天的時候才顯示
  categories: false  # 隱藏分類信息

設置代碼高亮主題

NexT 使用 Tomorrow Theme作爲代碼高亮，共有5款主題供你選擇。 NexT 默認使用的是白色的 normal 主題，可選的值有 normal，night， night blue， night bright， night eighties

更改 主題配置文件中的highlight_theme 字段，將其值設定成你所喜愛的高亮主題即可。

全站及文章字數統計及閱讀時長

根目錄執行：

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

博客配置文件底部添加如下內容，保存。

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

使用hexo-abbrlink 製作永久連結

https://david6686.github.io/blog/silentink/54803/

參考文章

基礎搭建

Yearito’s Blog

超詳細Hexo+Github博客搭建小白教程

進階設置

這應該是最全的hexo博客搭建以及next美化教程

Github Pages + Hexo 博客搭建，Next主題個性化修改

Hexo-NexT配置超炫網頁效果(主要配置leancloud)

Hexo-Next搭建個人博客（添加統計訪客量以及文章閱讀量）

LeviDing 的博客

hexo的next主題個性化教程:打造炫酷網站

Hexo博客與Next主題的高級應用

文章目錄