Hexo-修改Hexo主題

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

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

  • 如何去獲取到 NexT 主題

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

  • 設(shè)置菜單,如分類尸红,標(biāo)簽歹撒,關(guān)于我等簡單配置

獲取開源的 Hexo 主題

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

image

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

image

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

安裝 NexT 主題

NexT 入門

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

$ cd <博客存放的目錄>
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
image
  • 使用 NexT 主題

第一步:打開 _config.yml 文件蜻展,該文件為站點(diǎn)配置文件,存放位置如下圖所示:

image

第二步:將主題修改為 next

theme: next

部署到服務(wù)器

hexo g -d
hexo s
預(yù)覽

設(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)的顯示文本施逾。

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 來去掉圖標(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)的頁面,那這是怎么回事呢旬渠?

image

在默認(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é)果圖:

image

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末颅湘,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子栗精,更是在濱河造成了極大的恐慌闯参,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,657評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件悲立,死亡現(xiàn)場離奇詭異鹿寨,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)薪夕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門脚草,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人原献,你說我怎么就攤上這事馏慨。” “怎么了姑隅?”我有些...
    開封第一講書人閱讀 164,057評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵写隶,是天一觀的道長。 經(jīng)常有香客問我粤策,道長樟澜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,509評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮秩贰,結(jié)果婚禮上霹俺,老公的妹妹穿的比我還像新娘。我一直安慰自己毒费,他們只是感情好丙唧,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著觅玻,像睡著了一般想际。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上溪厘,一...
    開封第一講書人閱讀 51,443評(píng)論 1 302
  • 那天胡本,我揣著相機(jī)與錄音,去河邊找鬼畸悬。 笑死侧甫,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蹋宦。 我是一名探鬼主播披粟,決...
    沈念sama閱讀 40,251評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼冷冗!你這毒婦竟也來了守屉?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,129評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤蒿辙,失蹤者是張志新(化名)和其女友劉穎拇泛,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體须板,經(jīng)...
    沈念sama閱讀 45,561評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡碰镜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評(píng)論 3 335
  • 正文 我和宋清朗相戀三年邑闲,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了寸潦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缰猴。...
    茶點(diǎn)故事閱讀 39,902評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡憎蛤,死狀恐怖害驹,靈堂內(nèi)的尸體忽然破棺而出捍掺,到底是詐尸還是另有隱情赏淌,我是刑警寧澤平匈,帶...
    沈念sama閱讀 35,621評(píng)論 5 345
  • 正文 年R本政府宣布课兄,位于F島的核電站牍氛,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏烟阐。R本人自食惡果不足惜搬俊,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評(píng)論 3 328
  • 文/蒙蒙 一紊扬、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧唉擂,春花似錦餐屎、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至空扎,卻和暖如春藏鹊,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背转锈。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評(píng)論 1 269
  • 我被黑心中介騙來泰國打工盘寡, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人黑忱。 一個(gè)月前我還...
    沈念sama閱讀 48,025評(píng)論 2 370
  • 正文 我出身青樓宴抚,卻偏偏與公主長得像,于是被迫代替她去往敵國和親甫煞。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 1. 設(shè)置主題風(fēng)格 打開 themes/next/_config.yml 文件冠绢,搜索 scheme 關(guān)鍵字抚吠,將你...
    遲道閱讀 21,130評(píng)論 10 47
  • 版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載弟胀。 閑聊 在大三的時(shí)候楷力,一直就想搭建屬于自己的一個(gè)博客,但由于各...
    Kerry202閱讀 1,854評(píng)論 0 2
  • Hexo版本是3.3.8 NexT.Pisces v5.1.2 1. 常用命令 Hexo的命令極簡單孵户,安裝后只需要...
    Devin_閱讀 12,697評(píng)論 16 24
  • 寫在前面 本文為個(gè)人前一篇文章hexo搭建個(gè)人博客--基礎(chǔ)篇的后續(xù)篇萧朝,前文主要介紹了如何搭建一個(gè)個(gè)人網(wǎng)站以及綁定域...
    Alvabill閱讀 33,813評(píng)論 10 34
  • 由于我們新搭建的基于Hexo的博客默認(rèn)的博客主題都為主題默認(rèn),系統(tǒng)默認(rèn)多多少少會(huì)有點(diǎn)不如人意夏哭,那么這就需要我們自己...
    松n_n鼠閱讀 1,878評(píng)論 0 1