Hexo主题换成Tranquilpeak

Tranilpeak主题美观,较多的自定义图片显示,适合图文并茂的博客。

Tranilpeak主题美观,较多的自定义图片显示,适合图文并茂的博客。

主题安装

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

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

1
2
3
4
5
6
7
8
9
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修改如下设置:

1
2
theme: 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
33
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

1
2
3
4
5
6
author:
email:
location:
picture:
twitter:
google_plus:

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

Customization

1
2
3
4
5
6
7
8
9
10
11
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修改成如下:

1
2
3
4
5
---
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修改成如下:

1
2
3
4
5
---
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修改成如下:

1
2
3
4
5
---
title: "all-archives"
layout: "all-archives"
comments: false
---

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

archives

个性化的文章内容

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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是图片的描述。

<!-- excerpt --><!-- more -->可以设置文章在首页显示的内容,<!--toc-->可以设置文章的目录。

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
/*
* Block comment
*/
#include <vector>
using namespace std; // line comment
namespace foo {
typedef struct Struct {
int field;
} Typedef;
enum Enum {Foo = 1, Bar = 2};
Typedef *globalVar;
extern Typedef *externVar;
template<typename T, int N>
class Class {
T n;
public:
void function(int paramName) {
int *localVar = new int[1];
this->n = N;
label:
printf("Formatted string %d\n\g", localVar[0]);
printf(R"**(Formatted raw-string %d\n)**", 1);
std::cout << (1 << 2) << std::endl;
#define FOO(A) A
#ifdef DEBUG
printf("debug");
#endif
}
};
}

参考内容:

官方文档——User documentation