目录

  1. 安装
    1. 下载安装
    2. Git安装
  2. Hexo设置
  3. Tranquilpeak设置
  4. 自定义
    1. 设置thumbnailImage
    2. 增加Valine评论系统
    3. 设置语言

安装

下载安装

下载主题：hexo-theme-tranquilpeak，解压缩之后重命名为tranquilpeak复制到博客themes目录下。

Git安装

采用git的方式获取，这样可以随时pull最新的版本。

1
2
3
4
5
6
7
8
9
cd <hexo dir>
git submodule add https://github.com/LouisBarranqueiro/tranquilpeak-hexo-theme themes/tranquilpeak
cd themes/tranquilpeak

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

Hexo设置

修改Hexo的_config.yml。

1
theme: tranquilpeak

Tranquilpeak设置

修改Tranquilpeak的_config.yml。

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
# 图片存储路径
image_dir: assets/images 

# 侧边栏
sidebar:
    menu:
        home:
            title: global.home
            url: /
            icon: fa fa-home
        categories:
            title: global.categories
            url: /all-categories
            icon: fa fa-bookmark
        tags:
            title: global.tags
            url: /all-tags
            icon: fa fa-tags
        archives:
            title: global.archives
            url: /all-archives
            icon: fa fa-archive
        search:
            title: global.search
            url: /#search
            icon: fa fa-search
            class: open-algolia-search
        about:
            title: global.about
            url: /#about
            icon: fa fa-question
    author_links:
        github:
            title: global.github
            url: https://github.com/wangkuntian
            icon: fab fa-github
        mail:
            title: global.mail
            url: mailto:wangkuntian1994@163.com
            icon: fa fa-envelope
    rss:
        rss:
            title: global.rss
            url: /atom.xml
            icon: fa fa-rss

# 头
header:
    right_link:
        url: /#about
        icon:
        class:

# 作者
author:
    email: wangkuntian1994@163.com
    location: Beijing
    picture: faker.jpg

# 分享
sharing_options:
   weibo:
       title: "Weibo"
       icon: "fab fa-weibo"
       url: "http://service.weibo.com/share/share.php?&title={{post.permalink}}"
   qq:
       title: "QQ"
       icon: "fab fa-qq"
       url: "http://connect.qq.com/widget/shareqq/index.html?url={{post.permalink}}&title={{post.title}}"
   qzone:
       title: "Qzone"
       icon: "fa fa-star"
       url: "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{post.permalink}}"

# 评论系统
valine:
  enable: true
  appId: xxxxxxx
  appKey: xxxxxxx
  placeholder: ヾﾉ≧∀≦)o来啊，快活啊! 
  notify: false # mail notifier
  verify: false # Verification code
  avatar: wavatar
  pageSize: 10
  lang: zh-cn
  visitor: true
  highlight: true

# 谷歌分析
google_analytics_id: xxxxxxx

自定义

设置thumbnailImage

Tranquilpeak的thumbnailImage和coverImage的路径是相对路径，默认文章的thumbnailImage和coverImage只能从这篇文章的文件中加载，为了方便我把这个路径改为绝对路径。

修改Tranquilpeak目录layout/_partial/index.ejs

1
2
3
4
5
6
var thumbnailImageUrl = null;
if (post.thumbnailImage != null) {
    // 修改文章图片的路径
    // url_for在路径前加上根路径
    thumbnailImageUrl = url_for(post.thumbnailImage);
}

修改Tranquilpeak目录layout/_partial/post/header-cover.ejs

1
2
3
4
5
6
7
8
9
10
11
12
<%
    // Generate cover image url
    var coverImageUrl;

    if (post.coverImage) {
        if (is_remote_url(post.coverImage)) {
            coverImageUrl = post.coverImage;
        }
        else {
            coverImageUrl = url_for(post.coverImage);
        }
%>

增加Valine评论系统

Tranquilpeak没有适配Valine评论系统，为此添加Valine评论系统的适配。

修改Tranquilpeak目录layout/_partial/post.ejs

1
2
3
4
5
6
// 在文件最后面添加
<div class="main-content-wrap">
    <% if (theme.valine.enable) { %>
        <%- partial('post/valine') %>  
    <% } %>
</div>

新建文件layout/_partial/post/valine.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<div id="vcomments"></div>
<script>
    new Valine({
        el: '#vcomments',  
        appId: '<%= theme.valine.appId %>',
        appKey: '<%= theme.valine.appKey %>', 
        placeholder: '<%= theme.valine.placeholder %>' ,
        notify: '<%= theme.valine.notify %>',
        verity: '<%= theme.valine.verity %>',
        path: window.location.pathname,
        avatar: '<%= theme.valine.avatar %>',
        meta: ['nick','mail','link'],
        pageSize: '<%= theme.valine.pageSize %>',
        lang: '<%= theme.valine.lang %>',
        visitor: '<%= theme.valine.visitor %>',
        highlight: '<%= theme.valine.highlight %>'

    });
</script>

设置语言

Tranquilpeak提供的语言我都不是很喜欢，就新建了一个自己的语言文件。

在Tranquilpeak目录languages新建zh-en.yml文件。

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
# date format displayed everywhere in the blog
date_format: "MMM DD, YYYY"

global:
    home: "Home"
    categories: "Categories"
    category: "Category"
    tags: "Tags"
    tag: "Tag"
    archives: "Archives"
    search: "Search"
    about: "About"
    author_picture: "Author's picture"
    github: "GitHub"
    stack_overflow: "Stack Overflow"
    twitter: "Twitter"
    facebook: "Facebook"
    google_plus: "Google +"
    weibo: "Weibo"
    qq: "QQ"
    qzone: "Qzone"
    renren: "Renren"
    vk: "VK"
    odnoklassniki: "Odnoklassniki"
    linkedin: "LinkedIn"
    mail: "Mail"
    rss: "RSS"
    share_on_facebook: "Share on Facebook"
    share_on_twitter: "Share on Twitter"
    share_on_google_plus: "Share on Google+"
    share_on_weibo: "Share on Weibo"
    share_on_qq: "Share on QQ"
    share_on_qzone: "Share on Qzone"
    share_on_renren: "Share on Renren"
    share_on_vk: "Share on VK"
    share_on_odnoklassniki: "Share on Odnoklassniki"
    search_category: "Search category"
    search_tag: "Search tag"
    search_date: "Search date (YYYY/MM/DD)"
    posts_found:
        zero: "no post found"
        one: "1 post found"
        other: "{n} posts found"
    categories_found:
        zero: "no category found"
        one: "1 cartegory found"
        other: "{n} categories found"
    tags_found:
        zero: "no tag found"
        one: "1 tag found"
        other: "{n} tags found"

pagination:
    page: "page %d"
    of: "of %d"
    newer_posts: "上一页"
    older_posts: "下一页"
    previous: "PREVIOUS"
    next: "NEXT"

post:
    no_title : "no title"
    categorized_in: "in"
    tagged_in: "TAGGED IN"
    toc: "目录"
    back_to_top: "Back to top"
    read_more: "Continue reading"
    go_to_website: "Go to website"
    comment_and_share: "Comment and share"
    comment: "Leave a comment"
    share: "Share this post"
    gallery: "Gallery"
    image:
        one: "image"
        other: "%d images"

author:
    # Your biography (Markdown and HTML supported)
    bio: "Hi"
    # Your job
    job: "Software Engineer"

最后在Hexo的_config.yml设置一下语言。

1
language: zh-en