利用Hexo+Github完成搭建個人博客（2-配置Next主題與發佈博客）

尋找模板

接上篇，之前已經把博客搭建好了，但是默認的肯定過於單調了些，需要我們進行完善。完善的第一步當然是需要去hexo官方主題找一箇中意的模板。裏面有很多的主題，點擊某個主題之後能進行預覽效果。選主題好看是一個方面，另一個是最好有文檔教程可以學習配置。不然拿來一個主題，也不能做得酷炫。在預覽主題界面一般會有一個GitHub的連接，點擊之後會跳轉到存放該主題的倉庫，裏面一般都會有主題的使用教程。我選的是Next主題，Next主題相對來說比較簡潔方便，主要是配置教程文檔比較詳細，在網上也能找到很多相關教程。
先來看看GitHub上大佬的示例，然後再確定我們自己的博客應該如何搭配。
Miaia，有Next最近使用教程。
uchuhimo
Acris
Dandy
以上幾個博客，也說明了Next還提供了不同的佈局模板，也就是說，我們選了Next之後，還可以再進行選擇。

下載主題

爲了能使用該主題，我們先在存放博客文件的目錄下進行Git Bash，將Next下載到本地。

git clone https://github.com/iissnan/hexo-theme-next themes/next

我們可以看到在themes文件夾下多了一個Next文件夾，這個就是我們下載的主題。下載過來先不急，Hexo和Next爲了讓用戶專注寫博客，減小對代碼的關注，大多都使用配置進行設置Next主題。所以我們先來了解兩個配置文件。

配置站點

站點配置文件：位於博客根目錄下的 _config.yml，對整個站點的基本內容進行更改。如標題、作者等等。
主題配置文件：位於themes\next下的_config.yml，對當前主題的相關設置。如圖標、佈局等等。
因爲它們的文件名是一樣的，所以用站點文件和主題文件來區分它們。
首先是站點文件配置：hexo官方文檔介紹得非常詳細，我們就對主要的幾個進行簡單介紹和配置。
# Site 下面:

然後繼續,或者直接搜索 ‘theme’ ，把字段改成next，表示使用next主題，如果是使用的其他主題的話，就改成其他主題名字：

修改之後，重新生成頁面和啓動服務，默認樣式如下：

可以看到我們修改的已經生效了，標題和副標題。如果中文顯示亂碼的話，記事本打開_config.yml，文件 -> 另存爲 -> 選擇編碼 UTF-8 -> 確定（默認是相同目錄，替換就ok）

配置主題

站點先暫時配置到這，其他的後面有需要再配置。下面進行主題配置。打開\themes\next下的_config.yml文件。其實如果英語比較好的話，裏面註釋都講的比較詳細了，一直往下設置就ok。不過英語不好的我，只能參考Next文檔進行配置。

首先配置整個網站的主題佈局等等，就按照Next使用文檔的配置順序來配置一下。

選擇主題[Scheme]

這個主題是Next的外觀，我們可以在主題文件裏面搜索 “scheme:”來找到設置位置：

這個配置還有一個好處就是：支持動態設定，也就是修改了配置之後不需要重新生成靜態文件，開啓服務。在之前預覽的頁面直接刷新就可以了。刷新以後主題外觀就改變了。

設置菜單

所謂菜單就提供一個按鈕，點擊之後跳轉到不同的地方。菜單設置就剛剛外觀設置的上面一個，找不到可以進行搜索”menu“，找到相關字段：

Next默認是隻有home 和 archives。其他的菜單都被註釋了，我們就把需要展示的菜單註釋去掉，然後保存並刷新我們的預覽頁面。就可以看到以下效果了：

在這裏值得我們注意的是，菜單的設置格式 ，如：” tags: /tags/ || tags “ ； 好在配置文件裏面也提供了註釋，大致就是說，”名稱:鏈接 || 圖標“ 。所謂的名稱並不會直接展示在網頁上，而是會去\next\languages目錄下，找到剛剛站點設置的語言文件，在裏面進行查找匹配。所以我們在配置文件中寫的是英文，但是我們網頁展示的卻是漢子。如果改成其他語言，自然也會替換成其他語言的文字展示。然後 || 之後的圖標，Next會自動到FontAwesome上進行匹配。有興趣的可以查看自己博客網頁的源代碼，圖標就是使用的fa fa-*格式。
在菜單這裏還有一點就是，目前我們只能看這個菜單，如果點擊的話，會出現404錯誤 或者是 Cannot GET /*/，這是因爲我們本地沒有相關的頁面提供給它。

那我們就需要新建頁面提供給主題進行訪問。回到存放博客的根目錄下，進行git bash（以標籤爲例）：

hexo new page tags

之後我們會發現在博客根路徑的source文件夾裏面多了一個tags文件夾，我們繼續打開就能發現一個index.md文件 ，然後需要編輯這個md文件，來讓Next來識別它。

我們需要添加一個type字段，添加tags (這個是對應了之前menu設置名稱，點擊tags菜單就能跳到這個頁面)。然後我們重新生成，啓動預覽就可以點擊菜單並且進去了。
其他菜單同理。

設置側邊欄

所謂側邊欄也就是我們展示我們剛剛菜單的那一欄，在配置文件中搜索Sidebar Settings，就可以看到相關設置。側邊欄可以展示的東西還挺多的，這裏我們按照配置文件從上到下進行設置：
1.社交鏈接（Social Links），用於展示其他的社交平。我們先把social的註釋去掉，然後把需要展示的選項註釋也去掉，在這裏的設定格式和之前菜單是一樣的，然後我們也可以添加自定義的社交連接。

後面也有關於圖標的設置，如果上面設置了圖標，下面就不用添加了。設置一下是否顯示圖標和僅顯示圖標就ok。

效果顯示：

2.友情連接（Blog rolls），這個功能就不多介紹了，主要看怎麼配置吧。

效果如下：

3.設置頭像（Sidebar Avatar）
設置頭像有三種方式：

• 將頭像放置主題目錄下的 source/uploads/ （新建 uploads 目錄若不存在）配置爲：avatar: /uploads/文件名
• 或者 放置在 source/images/ 目錄，配置爲：avatar: /images/文件名
• 還有就是直接使用網絡連接，配置爲：avatar: http://example.com/avatar.png
  

4.其他
還有幾個設定不是非常重要，但是也可以設置一下，不然就用默認的都可以。

• 設置文章內目錄

toc:  
  enable: true

• 設置側邊欄展示在哪邊

  position: left
  #position: right

• 側邊欄何時展示

  #display: post   #默認，存在目錄列表顯示
  display: always   #在所有頁面都顯示
  #display: hide    #在所有頁面都隱藏，需要手動展開
  #display: remove  #完全移除

• 添加一個內容已經查看的百分比，這個挺有意思的

scrollpercent: true

第三方服務

• 網站訪問統計，我們採用不蒜子提供的服務。進入不蒜子網頁，有手動設置方式。不過現在Next配置文件，已經集成了。手動配置可以更加個性化一點。配置文件就比較方便。直接在配置文件中搜索busuanzi_count ，將下面的enable改成true就可以了。

enable: true

• 文章閱讀統計，在文件中搜索leancloud_visitors，使用LeanCloud幫助我們統計。先進入LeanCloud進行註冊驗證，然後新建應用，獲取key 和id。隨後將其填入我們的配置文件。

leancloud_visitors:
  enable: true
  app_id: 
  app_key: 

更多功能

我的博客暫時配置到這裏就差不多了（主要是東西挺多的，有點麻煩）。有需要更多炫酷功能可以進行百度查找，其他相關設置。
如
https://www.jianshu.com/p/f054333ac9e6
https://www.jianshu.com/p/3a05351a37dc

---

新建博文

前面的工作做了那麼多，當然不僅僅是就搭建一個網站算了，書寫博客纔是我們的最終目的。
在博客根目錄下git bash ：

hexo new title  # title 文章標題

然後會提示:

Created: D:\CODE\bolg2\source_posts\title.md

那就說明已經新建了一個新文章，然後照着這個目錄找到剛剛新建的文件，打開之後會發現只有這一部分。官方文檔稱之爲Front-matter，用於指定個別文件的變量。

在這一部分，預先定義的內容有

• layout 佈局
• title 標題
• date 建立日期
• updated 更新日期
• comments 開啓文章的評論功能 true/false
• tags 標籤
• categories 分類
• permalink 覆蓋網站網址
  一般就設定標題、標籤、分類、時間就可以了，標題和時間hexo會自動幫我們加上，所以我們就手動添加標籤和分類上去。

---
title: test
date: 2019-04-06 20:45:51
tags:
- Blog
- Hexo
categories:
- learn,hexo 
---

這裏需要注意的是標籤和分類的寫法。然後還有分類只支持單分類，也就是說，如果你在分類下面寫上兩個，會用最後的一份分類指定給文章。不過分類雖然不支持平級，但是可以有從屬，也就是父子級分類，使用,分割分類的層次關係。

高級編輯

Hexo的博文使用MarkDown語法，多少會受到限制。爲了彌補標籤的不足，Hexo提供了標籤插件來支持博文的多樣化。
大致分爲以下幾類

• 引用塊，在文章中插入引言，可包含作者、來源和標題。語法如下：

{% blockquote [作者, 來源] [鏈接] [鏈接標題] %}
content
{% endblockquote %}

[]中的爲可選項，如引用歌詞：

{% blockquote [陳宏宇, 早春的樹] %}
臂彎做衣架
搖晃在庭前
腰桿做長椅
你輕靠,或躺下看書
{% endblockquote %}

{% blockquote [陳宏宇, 早春的樹] %}
臂彎做衣架
搖晃在庭前
腰桿做長椅
你輕靠,或躺下看書
{% endblockquote %}

• 代碼塊，相對使用反引號而言更加具體描述的引用。

{% codeblock [title] [lang:language] [url] [link text] %}
code snippet
{% endcodeblock %}

如：

{% codeblock [Thread] [lang:Java] [http://tool.oschina.net/apidocs/apidoc?api=jdk-zh] [java jdk] %}
PrimeThread p = new PrimeThread(143);
p.start();
{% endcodeblock %}

{% codeblock [Thread] [lang:Java] [http://tool.oschina.net/apidocs/apidoc?api=jdk-zh] [java jdk] %}
PrimeThread p = new PrimeThread(143);
p.start();
{% endcodeblock %}

• 引用外部資源（圖片、視頻）
  圖片：

{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

視頻：

{% youtube video_id %}  #插入youtube視頻
{% vimeo video_id %}  #插入vimeo視頻

資源文件（添加本地圖片）

統一管理

適合只有少量圖片或者需要重複使用的圖片。放在主題source/images 文件夾中，通過![](/images/image.jpg)的方法來訪問他們。

分散管理

適用於每篇博文使用的不同的圖片，更加組織化的方式來管理資源。可以非常方便的管理每篇博文的資源。

• 首先修改站點配置文件，找到post_asset_folder ，設置爲true

post_asset_folder: true

當資源文件管理功能打開後，Hexo將會在你每一次通過 hexo new

相對路徑引用的標籤插件

通過常規的 markdown 語法和相對路徑來引用圖片和其它資源可能會導致它們在存檔頁或者主頁上顯示不正確。在Hexo 2時代，社區創建了很多插件來解決這個問題。但是，隨着Hexo 3 的發佈，許多新的標籤插件被加入到了核心代碼中。這使得你可以更簡單地在文章中引用你的資源。

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

比如說：當你打開文章資源文件夾功能後，你把一個 example.jpg 圖片放在了你的資源文件夾中，如果通過使用相對路徑的常規 markdown 語法![](/example.jpg) ，它將不會出現在首頁上。（但是它會在文章中按你期待的方式工作）

正確的引用圖片方式是使用下列的標籤插件而不是 markdown ：
{% asset_img example.jpg This is an example image %}
通過這種方式，圖片將會同時出現在文章和主頁以及歸檔頁中。