Hexo主题换成Tranquilpeak

Tranilpeak主题美观,较多的自定义图片显示,适合图文并茂的博客。如何搭建Hexo博客请查看我另外一篇博客——在Github上搭建一个免费的Hexo博客系统

主题安装

方式一:下载主题:hexo-theme-tranquilpeak-built-for-production-1.7.1,解压缩之后重命名为tanilpeak复制到你的博客themes目录下。

方式二:采用git的方式获取,这样可以随时pull最新的版本,当时不是直接git clone就行了,还需要自己build。参考Sven Flickinger的文章

cd <your hexo dir>
git submodule add https://github.com/LouisBarranqueiro/tranquilpeak-hexo-theme themes/tranquilpeak
cd themes/tranquilpeak

# install bower and grunt if not already installed
npm install -g bower grunt-cli
npm install
bower install
grunt build

Hexo的设置

hexo目录下的_config.yml修改如下设置:

theme: tranquilpeak
post_assert_folder: true

设置post_asset_folder可以使用封面,缩略图功能。

tranquilpeak设置

theme/tranquilpeak的详细配置文件_config.yml可以定制更加多的详细内容,下面进行讲解。

image_dir

默认的图片存储位置

siderbar

左侧的菜单项和作者链接设置在这里完成,菜单包括:home,categories,tags,archives,search,about,可以根据自己的需求增删菜单内容

sidebar:
    menu:
        home:
            title: global.home
            url: /
            icon: home
        categories:
            title: global.categories
            url: /all-categories
            icon: bookmark
        tags:
            title: global.tags
            url: /all-tags
            icon: tags
        archives:
            title: global.archives
            url: /all-archives
            icon: archive
        search:
            title: global.search
            url: /#search
            icon: search
            # `st-search-show-outputs` classes are used to open swiftype search window
            class: st-search-show-outputs
        about:
            title: global.about
            url: /#about
            icon: question
    author_links:
        github:
            title: global.github
            url: https://github.com/wenjunoy
            icon: github
  • title: title只显示的题目,全局已经设定了,也可以设定自己想要的内容。
  • url: url是指链接,可以是其他链接,也可以是本网站下的目录。
  • icon: icon是指显示的图标。可以在Font Awesome找到你所需要的icon。
菜单和作者链接

Author

author:
    email: 
    location: 
    picture:
    twitter:
    google_plus:

上述内容会显示在如下的作者信息中

Customization

sidebar_behavior: 1 #siderbar的样式,1-4的选择
clear_reading: true 
thumbnail_image: true #是否显示缩略图
thumbnail_image_position: right #显示缩略图的位置,有right,left,bottom
auto_thumbnail_image: true #自动选择文章中第一幅图片为缩略图
cover_image: cover.jpg #背景图片
favicon: favicon.png #你的头像
image_gallery: true
archive_pagination: true #使用archives
category_pagination: true #使用分类
tag_pagination: true #使用标签

使用page页面

使用all-categories页面

如果你对文章有分类的话,可以使用all-categories页面,更方便的查找你的文章.
hexo new page "all-categories",在source产生一个新的文件夹all-categories,文件夹内的文件index.md修改成如下:

---
title: "all-categories"
layout: "all-categories"
comments: false
---

在siderbar的categories的url就可以设置成/all-categories

categories
使用all-tags页面

如果你对文章有标签,可以使用all-tags页面。
hexo new page "all-tags",在source产生一个新的文件夹all-tags,文件夹内的文件index.md修改成如下:

---
title: "all-tags"
layout: "all-tags"
comments: false
---

在siderbar中tags的url就可以设置成/all-tags

tags
使用all-archives页面

archives是对所有的文章按月份分类的,添加archives页面的方式如下:hexo new page "all-archives",在source产生一个新的文件夹all-archives,文件夹内的文件index.md修改成如下:

---
title: "all-archives"
layout: "all-archives"
comments: false
---

在siderbar中tags的url可以设置成/all-archives

archives

个性化的文章内容

除了文章的基本内容之外,Tranquilpeak还添加了个性化的内容,例如:

title: 认识Markdown
date: 2016-04-14 09:47:13
tags:
    - Markdown
categories:
    - 技术
##tranquilpeak添加的属性
keywords:
- javascript
- hexo
clearReading: true
thumbnailImage: image-1.png
thumbnailImagePosition: right
autoThumbnailImage: yes
metaAlignment: center
coverImage: image-2.png
coverCaption: "A beautiful sunrise"
coverMeta: out
comments: false

thumbnailImage设置的是文章的缩略图,让文章更加有吸引力。thumbnailImagePosition是设置缩略图显示的位置,默认是right。autoThumbnailImage是设置是否默认的缩略图,选取文章中第一幅图作为缩略图。


coverImage是设置文章内顶部覆盖一张图片。官网给出的例子coverCaption是图片的描述。

可以设置文章在首页显示的内容,``可以设置文章的目录。

参考内容:

官方文档——User documentation

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容