Next主題(Hexo)

Hexo 有三種默認(rèn)布局:post 溜在, page 和 draft
它們分別對(duì)應(yīng)不同的路徑,而您自定義的其他布局和post
相同,都將儲(chǔ)存到 source/_posts文件夾。
也同時(shí)只有這個(gè)會(huì)被發(fā)布到服務(wù)器

配置文件_config.yml 有兩個(gè)
前者稱為 站點(diǎn)配置文件鳄抒, 后者稱為 主題配置文件。

添加頭像
編輯 站點(diǎn)配置文件椰弊, 新增字段 avatar许溅, 值設(shè)置成頭像的鏈接地址。其中秉版,頭像的鏈接地址可以是:

  • 方式1
    將頭像放置主題目錄下的 source/uploads/ (新建uploads目錄若不存在)
    配置為:avatar: /uploads/avatar.png

或者 放置在 source/images/ 目錄下
配置為:avatar: /images/avatar.png

  • 方式2


    Paste_Image.png

設(shè)置語(yǔ)言

修改后網(wǎng)站圖標(biāo)都變成了中文字體

Paste_Image.png

編輯站點(diǎn)配置文件
English en language: en
簡(jiǎn)體中文 zh-Hans language: zh-Hans
如:

Paste_Image.png

作者昵稱贤重,站點(diǎn)描述

均為編輯站點(diǎn)配置文件

Paste_Image.png
Paste_Image.png

next還有主題可以設(shè)置

Muse - 默認(rèn) Scheme,這是 NexT 最初的版本清焕,黑白主調(diào)并蝗,大量留白
Mist - Muse 的緊湊版本,整潔有序的單欄外觀
Pisces - 雙欄 Scheme秸妥,小家碧玉似的清新

Scheme 的切換通過(guò)更改 主題配置文件

#scheme: Muse
#scheme: Mist
scheme: Pisces

設(shè)置 下面 側(cè)欄 的位置

通過(guò)修改 主題配置文件 中的 sidebar
字段來(lái)控制側(cè)欄的行為

Paste_Image.png

注意 目前僅 Pisces Scheme 支持 position

sidebar:
  # Sidebar Position, available value: left | right
  #position: left            //控制sideba的位置
  position: right

  # Sidebar Display, available value:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggler.
  display: post               //控制sidebar的顯示時(shí)機(jī) 
  #display: always
  #display: hide
  #display: remove


post 
- 默認(rèn)行為滚停,在文章頁(yè)面(擁有目錄列表)時(shí)顯示
always
 - 在所有頁(yè)面中都顯示
hide
 - 在所有頁(yè)面中都隱藏(可以手動(dòng)展開)
remove
 - 完全移除

設(shè)置 菜單(重點(diǎn))

菜單配置包括兩個(gè)部分,

  • 第一是菜單項(xiàng)(名稱和鏈接)

  • 第二是菜單項(xiàng)的顯示文本

  • 第三是菜單項(xiàng)對(duì)應(yīng)的圖標(biāo)

NexT 使用的是 Font Awesome 提供的圖標(biāo)

一 菜單映射的鏈接

修改主題配置文件

menu:
  home: /
  archives: /archives
  #about: /about
  #categories: /categories
  tags: /tags
  #commonweal: /404.html

二 菜單顯示文本

(第一步中設(shè)置的菜單的名稱并不直接用于界面上的展示粥惧。Hexo 在生成的時(shí)候?qū)⑹褂?這個(gè)名稱(如home) 查找對(duì)應(yīng)的語(yǔ)言翻譯铐刘,并提取顯示文本)

這些翻譯文本放置在 NexT 主題目錄下的 languages/{language}.yml
({language}
為你所使用的語(yǔ)言)。

menu:
  home: 首頁(yè)
  archives: 歸檔
  categories: 分類
  tags: 標(biāo)簽
  about: 關(guān)于
  search: 搜索
  commonweal: 公益404
  something: 有料

自定義菜單

以簡(jiǎn)體中文為例影晓,若你需要添加一個(gè)菜單項(xiàng)镰吵,比如 something。

1. menu
  something : /something 
 2. menu (比如主題目錄下的language目錄下的zh-Hans.yml)
  something: 有料
3. 設(shè)置圖標(biāo)

那么就需要修改簡(jiǎn)體中文對(duì)應(yīng)的翻譯文件 languages/zh-Hans.yml挂签,在 menu
字段下添加一項(xiàng):
something: 有料

三 設(shè)置菜單的圖標(biāo)

此設(shè)定格式是 item name: icon name

icon name 是 Font Awesome 圖標(biāo)的 名字

menu_icons:
  enable: true   // 是否顯示圖標(biāo)
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat

item name 這3步驟都會(huì)用到 也就是鍵

設(shè)置社交鏈接

Paste_Image.png
Paste_Image.png

和設(shè)置Menu類似
因?yàn)閮H僅配置了一個(gè) Github鏈接疤祭,故僅僅顯示一個(gè)

建立頁(yè)面

直接在根目錄的source路徑下,新建一個(gè)404.html文件饵婆,就可以了
直接在根目錄的source路徑下勺馆,新建一個(gè)404.html文件,就可以了
然后可以配置 menu 映射下就可以在 上面顯示

love: /404.html

Paste_Image.png

當(dāng)然 通過(guò)
hexo new page "love"
會(huì)在source目錄下生成一個(gè)文件夾
source/love/index.md
這也是建立頁(yè)面的一種方式

添加Menu時(shí)候映射
love: /love 即可(localhost:4000/love 實(shí)際上訪問(wèn)是localhost:4000/love/index.html)

友情鏈接

Paste_Image.png
# Blogrolls
links_title: 友情鏈接
#links_layout: block
#links_layout: inline
links:
  Java學(xué)習(xí)天地: https://wangli0.github.com
  ruulai.com: https://wangli0.github.com
  視聽中國(guó): https://wangli0.github.com


絢麗的圖片文章

可能有人對(duì)這個(gè)
Reading頁(yè)面中圖片的fancybox
效果感興趣侨核,這個(gè)是怎么做的呢草穆。
很簡(jiǎn)單,只需要在你的文章*.md文件的頭上添加 photos 項(xiàng)即可搓译,然后一行行添加你要展示的照片:

layout: photo
title: 我的閱歷
date: 2085-01-16 07:33:44
tags: [hexo]
photos:
 - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
 - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg

經(jīng)過(guò)測(cè)試悲柱,文件頭上的layout: photo可以省略。

不想每次都手動(dòng)添加怎么辦些己?同樣的豌鸡,打開您的
hexo/scaffolds/photo.md

---
layout: {{ layout }}
title: {{ title }}
date: {{ date }}
tags: 
photos: 
---

然后每次可以執(zhí)行帶layout的new命令生成照片文章:
hexo new photo "photoPostName" #新建照片文章

如 :

---
layout: photo
title: girls
date: 2016-12-21 14:58:55
tags:
photos:
  - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
  - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg

## girls looks well
測(cè)試...

小問(wèn)題

Paste_Image.png

此列表的多少與 文章編寫時(shí)候添加的標(biāo)簽和分類有關(guān)嘿般,自動(dòng)添加
無(wú)需我們操心

文章中添加標(biāo)簽或分類
在文章中點(diǎn)擊或者標(biāo)簽或分類跳轉(zhuǎn)沒(méi)問(wèn)題
但是自己配置顯示menu的分類和標(biāo)簽跳轉(zhuǎn)找不到路徑的問(wèn)題

注意點(diǎn)

布局(Layout)
Hexo 有三種默認(rèn)布局:post、page 和 draft涯冠,
它們分別對(duì)應(yīng)不同的路徑炉奴,而您自定義的其他布局和post
相同,都將儲(chǔ)存到 source/_posts
文件夾蛇更。

模版(Scaffold)
在新建文章時(shí)瞻赶,Hexo 會(huì)根據(jù) scaffolds
文件夾內(nèi)相對(duì)應(yīng)的文件來(lái)建立文件,例如:
$ hexo new photo "My Gallery

在執(zhí)行這行指令時(shí)派任,Hexo 會(huì)嘗試在 scaffolds
文件夾中尋找 photo.md共耍,并根據(jù)其內(nèi)容建立文章

以下是您可以在模版中使用的變量:

Paste_Image.png

添加 類別和tags列表 (wen)

添加標(biāo)簽


hexo new page tags
確認(rèn)站點(diǎn)配置文件里有tag_dir: tags
確認(rèn)主題配置文件里有tags: /tags
編輯站點(diǎn)的source/tags/index.md,添加

title: tags
date: 2015-10-20 06:49:50
type: "tags"
comments: false


  • 添加分類
    hexo new page categories
    確認(rèn)站點(diǎn)配置文件里有category_dir: categories
    確認(rèn)主題配置文件里有categories: /categories
    編輯站點(diǎn)的source/categories/index.md吨瞎,添加

title: categories
date: 2015-10-20 06:49:50
type: "categories"
comments: false

問(wèn)題解決:
http://www.zhihu.com/question/29017171

圖片資源的使用

Paste_Image.png

source 文件夾下面的文件在執(zhí)行 hexo g 后 會(huì)把source下的所有文件放在public 文件夾下面。
public相等于網(wǎng)站根目錄 \

Paste_Image.png

至于本地圖片如何使用,如下所示

---
layout: photo
title: girls
date: 2016-12-21 14:58:55
tags:
photos:
  - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-0.jpg
  - http://bruce.u.qiniudn.com/2013/11/27/reading/photos-1.jpg
---

## girls looks well

Paste_Image.png

如何刪除Hexo博客底部頁(yè)腳

如:

Paste_Image.png

找到/themes/next/layout/_partials/footer.swig文件
內(nèi)容如下:

<div class="copyright" >
  {% set current = date(Date.now(), "YYYY") %}
  ? {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
  <span itemprop="copyrightYear">{{ current }}</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
</div>

<div class="powered-by">
  {{ __('footer.powered', '<a class="theme-link" ) }}
</div>

<div class="theme-info">
  {{ __('footer.theme') }} -
  <a class="theme-link" >
    NexT.{{ theme.scheme }}
  </a>
</div>

刪除class 為powered-by的div和theme-info的div即可


最終內(nèi)容

<div class="copyright" >
  {% set current = date(Date.now(), "YYYY") %}
  ? {% if theme.since and theme.since != current %} {{ theme.since }} - {% endif %}
  <span itemprop="copyrightYear">{{ current }}</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">{{ config.author }}</span>
</div>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末穆咐,一起剝皮案震驚了整個(gè)濱河市颤诀,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌对湃,老刑警劉巖崖叫,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異拍柒,居然都是意外死亡心傀,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門拆讯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)脂男,“玉大人,你說(shuō)我怎么就攤上這事种呐≡壮幔” “怎么了?”我有些...
    開封第一講書人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵爽室,是天一觀的道長(zhǎng)汁讼。 經(jīng)常有香客問(wèn)我,道長(zhǎng)阔墩,這世上最難降的妖魔是什么嘿架? 我笑而不...
    開封第一講書人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮啸箫,結(jié)果婚禮上耸彪,老公的妹妹穿的比我還像新娘。我一直安慰自己忘苛,他們只是感情好搜囱,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開白布丑瞧。 她就那樣靜靜地躺著,像睡著了一般蜀肘。 火紅的嫁衣襯著肌膚如雪绊汹。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,441評(píng)論 1 310
  • 那天扮宠,我揣著相機(jī)與錄音西乖,去河邊找鬼。 笑死坛增,一個(gè)胖子當(dāng)著我的面吹牛获雕,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播收捣,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼届案,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了罢艾?” 一聲冷哼從身側(cè)響起楣颠,我...
    開封第一講書人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎咐蚯,沒(méi)想到半個(gè)月后童漩,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡春锋,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年矫膨,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片期奔。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡侧馅,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出呐萌,到底是詐尸還是另有隱情施禾,我是刑警寧澤,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布搁胆,位于F島的核電站弥搞,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏渠旁。R本人自食惡果不足惜攀例,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望顾腊。 院中可真熱鬧粤铭,春花似錦、人聲如沸杂靶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至垛吗,卻和暖如春凹髓,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背怯屉。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工蔚舀, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人锨络。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓赌躺,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親羡儿。 傳聞我的和親對(duì)象是個(gè)殘疾皇子礼患,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359

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