Hexo搭建GitHub博客—打造炫酷的NexT主題--高級(三)

簡介

上面兩篇文章讓咱們人識了Hexo是如何搭建GitHub博客、如何進行部署Hexo到GitHub上、如何進行一些經常使用的配置例如：Site、URL、Deployment、Date等配置、如何建立文章、建立文章時應該注意哪些事項等等。
在Hexo主題官網中有許多主題，你們喜歡什麼就進行部署和編輯就行了，大體的思路都是差很少的。
本篇讓咱們正在進入到高級篇學習，如何打造炫酷的Next主題，讓咱們的博客更加美化。

安裝

首先咱們先進入到Next主題官網，看看咱們如何安裝。這裏就直接進行了，你們有空本身能夠去看看，本篇主要說的是Next 6.0版本以上，6.0版本之前就不說了。

1.在項目根目錄下，個人項目是myblog,打開Git Bash Here執行如下命令

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

下載安裝完成

2.將Hexo的主題切換爲Next主題
在項目根目錄下打開_config.yml文件將theme設置爲next即：

3.運行命令

$ hexo clean
$ hexo s

看起來仍是有點難看啊，接下來進行配置吧。

主題配置

接下來就是進入咱們博客核心部分了，配置屬於本身的主題，讓咱們一塊兒進入學習吧。

• 注：這裏可能不能所有去設置，你們有屬於本身的，能夠去研究，歡迎一塊兒分享，可能在後期有遇到好的配置會在接下來的文章編寫。
• 注：通常配置都在theme/next/-config.yml文件下配置

1.修改總體佈局

在theme/next/-config.yml找到menu看看本身博客所需的分類

顯示以下

在menu_settings若是設置icon: false則無圖標，badges: true則標籤都會顯示數字

menu_settings:
  icons: true
  badges: true #默認是false

• 注：這裏咱們須要建立about頁面，很簡單，同理建立標籤tags、歸檔archives頁面同樣的方式，所須要建立的名稱要與menu相對應，舉例說明以下。

$ hexo new page about   #看看menu上還有什麼標籤沒建立就行建立
$ hexo new page tags   #建立標籤等

建立完成以後咱們在本身項目查找，如個人是myblog/source/目錄下查看新建立好的相關標籤頁面，裏面包含各自的index.md文件，你們能夠自行編輯了。

2. Schemes方案設置

# Schemes
#scheme: Muse  #這是 Nex默認版本，黑白主調，大量留白
scheme: Mist  #Muse 的緊湊版本，整潔有序的單欄外觀
#scheme: Pisces #雙欄 Scheme，小家碧玉似的清新
#scheme: Gemini  #雙子座，也是雙欄形式，和Pisces相似

咱們來一一測試一下吧，本身喜歡什麼風格自行選擇。

• scheme: Mist

• scheme: Pisces

• scheme: Gemini

3. social設置

使用方式: Key: permalink || icon Key表示標籤顯示，permalink 表示URI鏈接，icon表示圖標，本身添加所要顯示的，

• 注：圖標庫來源 [https://fontawesome.com/icons...]

social:
  GitHub: https://github.com/eirunye || github    
  E-Mail: mailto:yrungen@gmail.com || envelope
  簡書: https://www.jianshu.com/u/447fdef5fb8f || heartbeat
  Segmentfault: https://segmentfault.com/blog/iconye_vue || link
  知乎: https://www.zhihu.com/people/yi-ke-id/activities || ioxhost
  #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/ || 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: true 只顯示圖片
  transition: true
  exturl: false

• 注：在scheme: Pisces該效果不顯示？

4. avatar頭像設置

avatar:
  url: #/images/avatar.gif  #頭像圖片路徑 圖片放置在next/source/images
  rounded: false  #是否顯示圓形頭像，true表示圓形，false默認
  opacity: 0.7  #透明度0~1之間
  rotated: false  #是否旋轉 true表示旋轉，false默認

5. toc邊欄中的目錄設置

toc:
  enable: false #是否啓動側邊欄
  number: true  #自動將列表編號添加到toc。
  wrap: false #true時是當標題寬度很長時，自動換到下一行

6. Creative Commons 4.0國際許可設置

# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa

7. sidebar側邊欄配置這裏選擇默認吧。

你們能夠去看看裏面的屬性，有許多相對應的scheme而設置。

8. save_scroll配置

save_scroll: false # 是否在Cookie中自動保存每一個帖子/頁面上的滾動位置。

9. excerpt_description

excerpt_description: true #是否自動摘錄主頁中的描述做爲前導文本。

10. auto_excerpt配置

auto_excerpt:
  enable: true  #是否自動摘錄。不推薦。
  length: 150  #這裏是說文章開頭第一個字到第150個字就顯示"閱讀全文"

或者是在每篇文章須要顯示"閱讀全文",在Markdown裏面設置,可是enable: false表示不啓動。兩種方式選擇一個。

<!-- more -->

11. codeblock代碼塊配置

codeblock:
  copy_button: 
    enable: true  #是否添加複製按鈕
    show_result: true  #是否顯示文本複製結果

12. wechat_subscriber微信配置

wechat_subscriber:
  enabled: true #是否啓動微信訂閱
  qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg
  description: ex. subscribe to my blog by scanning my public wechat account

13. Code Highlight theme 代碼突出顯示主題

# Available values: normal | night | night eighties | night blue | night bright
highlight_theme: normal #設置喜歡的模式，默認：normal

14. footer 底部設置

footer
  icon:
    name: user  #設置圖標，想修改圖標從https://fontawesome.com/v4.7.0/icons獲取
    animated: true  #是否要爲圖標設置動畫，默認爲false
    color: "#66CDAA"  #圖標顏色
  copyright: ©2018 by Eirunye  #版權
  powered:
    enable: true  #是否顯示 Hexo link
    version: true  #是否顯示Hexo連接後的Hexo版本信息（vX.X.X）
  theme:
    enable: true   #是否顯示NexT Themelink
    version: true  #是否顯示NexT版本信息

15. favicon標籤頁圖標

favicon:
  small: /images/favicon-16x16-next.png   #小圖標 默認的NexT
  medium: /images/favicon-32x32-next.png  #中圖標 默認NexT
  apple_touch_icon: /images/apple-touch-icon-next.png #蘋果觸摸圖標
  safari_pinned_tab: /images/logo.svg   #safari固定標籤

總結

本篇主要講解的是NexT主題經常使用的一些配置，這裏還有一些經常使用配置好比字體大小、顏色等等，你們本身進行對本身博客配置吧。
接下來咱們繼續講解Hexo搭建GitHub博客—打造炫酷的NexT主題--高級(四)。

推薦

你們也能夠查看關於Hexo相關文章。

Hexo搭建GitHub博客--初級(一)
Hexo搭建GitHub博客--初級(二)
Hexo搭建GitHub博客—打造炫酷的NexT主題--高級(三)
Hexo搭建GitHub博客—打造炫酷的NexT主題--高級(四)