Tranilpeak主题美观,较多的自定义图片显示,适合图文并茂的博客。
Tranilpeak主题美观,较多的自定义图片显示,适合图文并茂的博客。
主题安装
方式一:下载主题:hexo-theme-tranquilpeak-built-for-production-1.7.1,解压缩之后重命名为tanilpeak复制到你的博客themes目录下。
方式二:采用git的方式获取,这样可以随时pull最新的版本,当时不是直接git clone就行了,还需要自己build。参考Sven Flickinger的文章
1 | cd <your hexo dir> |
Hexo的设置
hexo目录下的_config.yml修改如下设置:1
2theme: tranquilpeak
post_assert_folder: true
设置post_asset_folder可以使用封面,缩略图功能。
tranquilpeak设置
theme/tranquilpeak的详细配置文件_config.yml可以定制更加多的详细内容,下面进行讲解。
image_dir
默认的图片存储位置
siderbar
左侧的菜单项和作者链接设置在这里完成,菜单包括:home,categories,tags,archives,search,about,可以根据自己的需求增删菜单内容1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33sidebar:
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
1 | author: |
上述内容会显示在如下的作者信息中
Customization
1 | sidebar_behavior: 1 #siderbar的样式,1-4的选择 |
使用page页面
使用all-categories页面
如果你对文章有分类的话,可以使用all-categories页面,更方便的查找你的文章.hexo new page "all-categories"
,在source产生一个新的文件夹all-categories,文件夹内的文件index.md修改成如下:1
2
3
4
5---
title: "all-categories"
layout: "all-categories"
comments: false
---
在siderbar的categories的url就可以设置成/all-categories
使用all-tags页面
如果你对文章有标签,可以使用all-tags页面。hexo new page "all-tags"
,在source产生一个新的文件夹all-tags,文件夹内的文件index.md修改成如下:1
2
3
4
5---
title: "all-tags"
layout: "all-tags"
comments: false
---
在siderbar中tags的url就可以设置成/all-tags
使用all-archives页面
archives是对所有的文章按月份分类的,添加archives页面的方式如下:hexo new page "all-archives"
,在source产生一个新的文件夹all-archives,文件夹内的文件index.md修改成如下:1
2
3
4
5---
title: "all-archives"
layout: "all-archives"
comments: false
---
在siderbar中tags的url可以设置成/all-archives
个性化的文章内容
除了文章的基本内容之外,Tranquilpeak还添加了个性化的内容,例如:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19title: 认识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
是图片的描述。
<!-- excerpt -->
和<!-- more -->
可以设置文章在首页显示的内容,<!--toc-->
可以设置文章的目录。
1 | /* |