學(xué)習(xí)目標(biāo)

本文主要學(xué)習(xí)的內(nèi)容如下：

• 如何去獲取到 NexT 主題

• 如何去安裝和配置 NexT 主題

• 設(shè)置菜單，如分類(lèi)，標(biāo)簽，關(guān)于我等簡(jiǎn)單配置

獲取開(kāi)源的 Hexo 主題

在上節(jié)介紹如何快速去搭建 Hexo ，最終展示的效果如下圖所示：

image

這是 hexo 默認(rèn)的主題，我們需要修改這個(gè)主題，那么我們可以去找一些符合我們個(gè)人愛(ài)好的一些主題選擇一個(gè)自己喜歡的 Hexo 主題
這個(gè)網(wǎng)站有很多主題可以供我們?nèi)ミx擇，如下圖所示。每一個(gè)主題都有對(duì)應(yīng)網(wǎng)站可以預(yù)覽，并且都有 Github 地址，我們可以照著 Github 的 wiki 就可以安裝了，過(guò)程都比較簡(jiǎn)單。

image

我們這次安裝主題也是上面這些主題中其中一個(gè)，它就是 NexT 。

安裝 NexT 主題

NexT 入門(mén)

• 官方文檔 NexT 入門(mén)

• 下載 NexT 主題

將主題克隆到 themes 目錄下，以下截圖就是 clone 之后的結(jié)果。

$ cd <博客存放的目錄>
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

image

• 使用 NexT 主題

第一步：打開(kāi) _config.yml 文件，該文件為站點(diǎn)配置文件，存放位置如下圖所示：

image

第二步：將主題修改為 next

theme: next

部署到服務(wù)器

hexo g -d
hexo s

預(yù)覽

設(shè)置菜單

菜單配置包括三個(gè)部分，第一是菜單項(xiàng)（名稱(chēng)和鏈接），第二是菜單項(xiàng)的顯示文本，第三是菜單項(xiàng)對(duì)應(yīng)的圖標(biāo)

設(shè)定菜單項(xiàng)的名稱(chēng)和鏈接

menu:
  home: /
  archives: /archives
  about: /about
  categories: /categories
  tags: /tags

設(shè)定菜單項(xiàng)的顯示文本

在設(shè)置 菜單項(xiàng)的名稱(chēng)和鏈接 中的名稱(chēng)并不會(huì)直接顯示在網(wǎng)頁(yè)上，而是會(huì)通過(guò) NexT 主題目錄下的 languages/{language}.yml 找到對(duì)應(yīng)的顯示文本。

image

設(shè)定菜單項(xiàng)的圖標(biāo)

對(duì)應(yīng)的字段是 menu_icons。 此設(shè)定格式是 item name: icon name，其中 item name 與上一步所配置的菜單名字對(duì)應(yīng)，icon name 是 Font Awesome 圖標(biāo)的 名字。而 enable 可用于控制是否顯示圖標(biāo)，你可以設(shè)置成 false 來(lái)去掉圖標(biāo)。

menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive

處理菜單的點(diǎn)擊跳轉(zhuǎn)

出現(xiàn)的問(wèn)題

按照上面的方式設(shè)置的菜單之后，點(diǎn)擊標(biāo)簽，分類(lèi)，或者關(guān)于我都會(huì)出現(xiàn) 404 頁(yè)面，意思就是沒(méi)有找到對(duì)應(yīng)的頁(yè)面，那這是怎么回事呢？

image

在默認(rèn)情況，source 目錄只有 _posts 一個(gè)文件夾的，并沒(méi)有生成對(duì)應(yīng)的 tags,categories,about 等文件夾，所以就會(huì)出現(xiàn) 404 的情況。

生成菜單文件夾

• 生成 tags 標(biāo)簽頁(yè)

hexo new page tags

將 source/tags/index.md 的內(nèi)容修改為如下：

---
date: 2017-07-10 16:36:26
type: "tags"
comments: false
---

• 生成 categories 分類(lèi)頁(yè)

hexo new page categories

將 source/categories/index.md 的內(nèi)容修改為如下：

---
date: 2018-03-11 16:17:14
type: "categories"
comments: false
---

• 生成 about 關(guān)于我頁(yè)面

hexo new page about

將 source/about/index.md 的內(nèi)容修改為如下：

---
title: 關(guān)于我
type: "about"
date: 2018-03-11 16:18:54
comments: false
---

關(guān)于你的描述......

下面是生成的結(jié)果圖：

image

現(xiàn)在再重新部署一下項(xiàng)目，就不會(huì)出現(xiàn) 404 問(wèn)題了。好了，以上就是本文要介紹的一些關(guān)于 Hexo 更換主題的知識(shí)了。