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)都變成了中文字體
編輯站點(diǎn)配置文件
English en language: en
簡(jiǎn)體中文 zh-Hans language: zh-Hans
如:
作者昵稱贤重,站點(diǎn)描述
均為編輯站點(diǎn)配置文件
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è)欄的行為
注意 目前僅 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è)置社交鏈接
和設(shè)置Menu類似
因?yàn)閮H僅配置了一個(gè) Github鏈接疤祭,故僅僅顯示一個(gè)
建立頁(yè)面
直接在根目錄的source路徑下,新建一個(gè)404.html文件饵婆,就可以了
直接在根目錄的source路徑下勺馆,新建一個(gè)404.html文件,就可以了
然后可以配置 menu 映射下就可以在 上面顯示
love: /404.html
當(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)
友情鏈接
# 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)題
此列表的多少與 文章編寫時(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)容建立文章
以下是您可以在模版中使用的變量:
添加 類別和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
圖片資源的使用
source 文件夾下面的文件在執(zhí)行 hexo g 后 會(huì)把source下的所有文件放在public 文件夾下面。
public相等于網(wǎng)站根目錄 \
至于本地圖片如何使用,如下所示
---
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
如何刪除Hexo博客底部頁(yè)腳
如:
找到/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>