學(xué)習(xí)目標(biāo)
本文主要學(xué)習(xí)的內(nèi)容如下:
如何去獲取到 NexT 主題
如何去安裝和配置 NexT 主題
設(shè)置菜單,如分類尸红,標(biāo)簽歹撒,關(guān)于我等簡單配置
獲取開源的 Hexo 主題
在上節(jié)介紹如何快速去搭建 Hexo 榨呆,最終展示的效果如下圖所示:
這是 hexo 默認(rèn)的主題荒给,我們需要修改這個(gè)主題,那么我們可以去找一些符合我們個(gè)人愛好的一些主題選擇一個(gè)自己喜歡的 Hexo 主題
這個(gè)網(wǎng)站有很多主題可以供我們?nèi)ミx擇显沈,如下圖所示软瞎。每一個(gè)主題都有對(duì)應(yīng)網(wǎng)站可以預(yù)覽,并且都有 Github 地址拉讯,我們可以照著 Github 的 wiki 就可以安裝了涤浇,過程都比較簡單。
我們這次安裝主題也是上面這些主題中其中一個(gè)魔慷,它就是 NexT 只锭。
安裝 NexT 主題
NexT 入門
官方文檔 NexT 入門
下載 NexT 主題
將主題克隆到 themes 目錄下,以下截圖就是 clone 之后的結(jié)果院尔。
$ cd <博客存放的目錄>
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
- 使用 NexT 主題
第一步:打開 _config.yml 文件蜻展,該文件為站點(diǎn)配置文件,存放位置如下圖所示:
第二步:將主題修改為 next
theme: next
部署到服務(wù)器
hexo g -d
hexo s
設(shè)置菜單
菜單配置包括三個(gè)部分邀摆,第一是菜單項(xiàng)(名稱和鏈接)纵顾,第二是菜單項(xiàng)的顯示文本,第三是菜單項(xiàng)對(duì)應(yīng)的圖標(biāo)
設(shè)定菜單項(xiàng)的名稱和鏈接
menu:
home: /
archives: /archives
about: /about
categories: /categories
tags: /tags
設(shè)定菜單項(xiàng)的顯示文本
在設(shè)置 菜單項(xiàng)的名稱和鏈接 中的名稱并不會(huì)直接顯示在網(wǎng)頁上栋盹,而是會(huì)通過 NexT 主題目錄下的 languages/{language}.yml 找到對(duì)應(yīng)的顯示文本施逾。
設(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 來去掉圖標(biāo)蠕搜。
menu_icons:
enable: true
# Icon Mapping.
home: home
about: user
categories: th
tags: tags
archives: archive
處理菜單的點(diǎn)擊跳轉(zhuǎn)
出現(xiàn)的問題
按照上面的方式設(shè)置的菜單之后怎茫,點(diǎn)擊標(biāo)簽,分類讥脐,或者關(guān)于我都會(huì)出現(xiàn) 404 頁面遭居,意思就是沒有找到對(duì)應(yīng)的頁面,那這是怎么回事呢旬渠?
在默認(rèn)情況,source 目錄只有 _posts 一個(gè)文件夾的端壳,并沒有生成對(duì)應(yīng)的 tags,categories,about 等文件夾告丢,所以就會(huì)出現(xiàn) 404 的情況。
生成菜單文件夾
- 生成 tags 標(biāo)簽頁
hexo new page tags
將 source/tags/index.md 的內(nèi)容修改為如下:
---
date: 2017-07-10 16:36:26
type: "tags"
comments: false
---
- 生成 categories 分類頁
hexo new page categories
將 source/categories/index.md 的內(nèi)容修改為如下:
---
date: 2018-03-11 16:17:14
type: "categories"
comments: false
---
- 生成 about 關(guān)于我頁面
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é)果圖:
現(xiàn)在再重新部署一下項(xiàng)目损谦,就不會(huì)出現(xiàn) 404 問題了岖免。好了,以上就是本文要介紹的一些關(guān)于 Hexo 更換主題的知識(shí)了照捡。