美观且全平台支持的响应式Hexo主题Tranquilpeak。

目录

  1. 获得Tranquilpeak主题
  2. Tranquilpeak主题配置
    1. 启用Tranquilpeak主题
    2. Tranquilpeak主题详细配置
      1. Sidebar
      2. Header
      3. Author
    3. Integrated services
  • 启用页面
    1. 启用 all-categories 页面
    2. 启用 all-tags 页面
    3. 启用 all-archives 页面
  • 参考

    • 获得Tranquilpeak主题

    git的方式获取的源代码需要build，否则无法正常显示。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #原作者的版本
    git clone https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak themes/tranquilpeak
    #本土化修改的版本
    git clone https://github.com/fevenor/hexo-theme-tranquilpeak.git themes/tranquilpeak

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

    npm install
    bower install
    grunt build

    Tranquilpeak主题配置

    启用Tranquilpeak主题

    修改hexo根目录下的 _config.yml：

    1
    2
    theme: tranquilpeak
    post_asset_folder: true

    post_asset_folder: true启用资源文件夹source\assets。

    Tranquilpeak主题详细配置

    不要修改变量名sidebar, title, url和icon。

    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
    sidebar:
        menu:
            home:
                title: Home
                url: /
                icon: home
            categories:
                title: Categories
                url: /all-categories
                icon: bookmark
            tags:
                title: Tags
                url: /all-tags
                icon: tags
            archives:
                title: Archives
                url: /all-archives
                icon: archive
            search:
                title: Search
                url: /#search
                icon: search
                # `st-search-show-outputs` classes are used to open swiftype search window
                class: t-search-show-outputs
            about:
                title: About me
                url: /#about
                icon: question
        author_links:
            # github:
            #     title: GitHub
            #     url: https://github.com/
            #     icon: github
            # stack_overflow:
            #     title: Stack Overflow
            #     url: http://stackoverflow.com/users/
            #     icon: stack-overflow
            # twitter:
            #     title: Twitter
            #     url: https://twitter.com/
            #     icon: twitter
            # facebook:
            #     title: Facebook
            #     url: https://www.facebook.com/
            #     icon: facebook
            # google_plus:
            #     title: Google +
            #     url: https://plus.google.com/
            #     icon: google-plus
            # linked_in:
            #     title: Linked In
            #     url: https://www.linkedin.com/profile/
            #     icon: linkedin
            # mail:
            #     title: Mail
            #     url: mailto:
            #     icon: envelope-o
        rss:
            rss:
                title: RSS
                url: /atom.xml
                icon: rss
    1
    2
    3
    4
    5
    header:
        right_link:
            url: /#search
            icon: search
            class: st-search-show-outputs

    Author

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

    picture 为 source/assets/images/目录下指定的图片。

    Integrated services

    1
    2
    3
    4
    5
    6
    7
    8
    # Integrated services
    disqus_shortname:
    duoshuo_shortname:
    gravatar_email: 
    google_analytics_id:  
    swiftype_install_key:
    fb_admin_ids:
    fb_app_id:

    启用页面

    启用 all-categories 页面

    1.运行hexo new page "all-categories"。

    2.编辑source/all-categories/index.md：

    1
    2
    3
    title: "all-categoris"
    layout: "all-categories"
    comments: false

    启用 all-tags 页面

    1.运行hexo new page "all-tags"。

    2.编辑source/all-tags/index.md：

    1
    2
    3
    title: "all-tags"
    layout: "all-tags"
    comments: false

    启用 all-archives 页面

    1.运行hexo new page "all-archives"。

    2.编辑source/all-archives/index.md：

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

    参考

    User documentation

    使用Hexo theme Tranquilpeak