3、hexo+github搭建我的博客的主題配置

更換博客主題

主題可參考：https://hexo.io/themes/

hexo默認主題：Landscape

示例主題：Next

下載Next主題

1. 進入Blog所在目錄，輸入下載命令

   #進入Blog所在目錄
   d:
   cd Blog
   #下載
   git clone https://github.com/iissnan/hexo-theme-next themes/next

2. 啓用Next主題

   在Blog文件夾下打開配置文件_config.yml,找到theme字段，將默認的landscape修改成next。

   # Extensions
   ## Plugins: https://hexo.io/plugins/
   ## Themes: https://hexo.io/themes/
   theme: next

   保存。

3. 驗證

   命令行窗口輸入：

   hexo s --debug

   瀏覽器輸入：localhost:4000查看界面主題。

主題配置

1. 主題配置文件在：/Blog/themes/next/_config.yml

2. 打開主題配置文件，選擇next提供的4種子主題,示例啓動Mist

   # ---------------------------------------------------------------
   # Scheme Settings
   # ---------------------------------------------------------------
   
   # Schemes
   #scheme: Muse
   scheme: Mist
   #scheme: Pisces
   #scheme: Gemini

菜單設置

1. 打開主題配置文件，/Blog/themes/next/_config.yml；

2. 找到menu settings

   # ---------------------------------------------------------------
   # Menu Settings
   # ---------------------------------------------------------------
   
   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
   
   # Enable/Disable menu icons.
   #icon name(和http://fontawesome.io/icons/ 上面圖標name對應) 
   #上方||後面的即爲menu_icon名稱，不準在下面重複定義
   menu_icons:
     enable: true

   關閉註釋便可打開博客菜單。

3. 建立菜單文件目錄，打開菜單後須要建立菜單文件存放的目錄；

   一下命令是在命令窗口，Blog目錄下執行：D:\Blog>

   #標籤菜單
   hexo new page tags
   #分類菜單
   hexo new page categories
   #關於菜單
   hexo new page about

   執行完上面的命令後，會在Blog/source目錄下多出tags和categories文件夾，文件夾下的makedown文件即爲標籤和分類菜單的展現頁面內容，下面爲標籤和分類添加配置。

   打開/tags/index.md

   ---
   title: tags
   date: 2019-05-30 14:07:09
   type: "tags"
   ---

   打開/categories/index.md

   ---
   title: categories
   date: 2019-05-30 14:07:09
   type: "categories"
   ---

   保存後，便可在新的文章撰寫前添加標籤和分類。

   標籤分類示例：（新建文件參考上一篇start my blog）

   ---
   title: my first blog
   date: 2019-05-30 14:07:09
   tags:
   - hexo
   - example
   categories:
   - Example
   ---
   
   the blog content.

   上面新建文件標籤爲：hexo,example;分類爲：Example.

   其餘菜單相似。

側邊欄設置

1. 打開主題配置文件，/Blog/themes/next/_config.yml；

2. 找到sidebar settings

   # ---------------------------------------------------------------
   # Sidebar Settings
   # ---------------------------------------------------------------
   
   # Social Links.
   #取消註釋便可打開社交網絡連接
   social:
     GitHub: https://github.com/yourname || github
     #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
   
   #上方||後面的即爲social_icon名稱，不準在下面重複定義
   social_icons:
     enable: true
     GitHub: github
     icons_only: false
     transition: false

3. 頭像設置

   在Blog/source目錄下新建images文件夾，將本身喜歡的頭像放在文件夾下，

   Blog/source/head.jpg，

   在主題配置文件中找到avatar，

   # Sidebar Avatar
   # in theme directory(source/images): /images/avatar.gif
   # in site  directory(source/uploads): /uploads/avatar.gif
   avatar: /images/head.jpg

4. 做者和簡述及語言

   打開hexo配置文件，/Blog/_config.yml

   # Site
   title: Tassel   #網站標題
   description: welcome to my blog. #描述
   author: tassel #做者
   language: zh-Hans #語言：簡體中文

首頁文章設置

​ 控制在首頁文章顯示字數，next主題默認顯示文章全部內容，能夠經過如下配置實現縮略顯示，並給出顯示更多按鈕。

1. 方法一：

   在每一篇文章任意位置添加

   <!-- more -->

2. 方法二：

   在文章的front-matter（即頭部添加標籤和分類的地方）中添加description，並提供文章摘錄。

3. 方法三：

   自動造成摘要，在主題配置文件中(/Blog/themes/next/config.yml)修改以下配置

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

修改完配置後須要從新生成並部署到github

hexo clean
hexo generate
hexo deploy

其餘更多更高級配置參考next主題官方網站：Next