tranquilpeak主题的配置

之前讲了如何利用Hexo在github上建立blog,以及如何更换主题，步骤并不复杂，但是配置主题可是就没那么简单了，博主在配置的过程中遇到了许许多多的问题，网上查阅了大量的资料，重新配置几次，还好最终被博主征服了.

---

一、个性化配置

1.头像:
在主题的_config.yml文件内设置picture属性

2.地址信息:
在主题的_config.yml文件内设置location属性

3.弹出框和侧栏的简介:
主题目录的layout/_partial/sidebar.ejs和about.ejs文件，只修改markdown括号引号内的信息即可。
sidebar.ejs文件

sidebar.ejs

• js

<% if (__('author.bio')) { %>
    <h5 class="sidebar-profile-bio"><%- markdown(__('一只热爱探索，热爱生活的快乐小极客(๓´˘`๓)')) %></h5>
<% } %>

about.ejs文件

about.ejs

• js

<% if (__('author.bio')) { %>
    <div id="about-card-bio"><%- markdown(__('一只热爱探索，热爱生活的快乐小极客(๓´˘`๓)')) %></div>
<% } %>

4.职业信息:
主题目录的layout/_partial/about.ejs

about.ejs

• js

<% if (__('author.job')) { %>
    <div id="about-card-job">
        <i class="fa fa-briefcase"></i>
        <br/>
        <%- markdown(__('前端工程师')) %>
    </div>
<% } %>

5.名字:
根目录的_config.yml文件修改author即可。

二、功能增强

1.配置分类、标签、存档:

$  hexo new page "all-categories"

$  hexo new page "all-tags"

$  hexo new page "all-archives"

eg:
修改生成的三个模板文件source/all-tags/index.md

index.md

• markdown

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

2.搜索
此主题其实是内置了Algolia的，只需要简单配置下即可但是免费用户有限制。

$  npm install hexo-algoliasearch --save

在根目录的_config.yml文件内添加以下内容,将前三项换成自己的，需要去algolia官网注册。

_config.yml

• yml

algolia:
  appId: "Z7A3XW4R2I"
  apiKey: "12db1ad54372045549ef465881c17e743"
  adminApiKey: "40321c7c207e7f73b63a19aa24c4761b"
  chunkSize: 5000
  indexName: "tranquilpeak"
fields:
    - title
    - date
    - permalink
    - thumbnailImageUrl
    - tags
    - categories
    - excerpt
    - excerpt:strip

3.RSS

$  npm install hexo-generator-feed --save

在根目录_config.yml文件内添加以下代码:

_config.yml

• yml

feed:
	type: atom
	path: atom.xml
	limit: 20

4.侧栏添加新的项目

在主题的_config.yml文件中 解注释 掉想要的功能。

三、写文章

1.显示摘要

要想首页每篇文章只显示摘要需要在每篇文章的内容开始之前写上以下内容：

title.md

• markdown

我是摘要内容--此方法只在首页显示摘要。
<!-- excerpt -->

或者

title.md

• markdown

我是摘要内容--此方法除了在首页显示摘要还会在文章页的文章最前面显示一遍。   
<!-- more -->

2.文章的属性配置

title.md

• markdown

title: 博客建设分享及博客计划
date: 2017-01-02 17:12:21
categories: '建站'
tags: ['计划','建站','Hexo']
keywords:
- '博客'
- hexo
- '建站'
clearReading: true  //在文章页隐藏侧栏，以更好地阅读。
thumbnailImage: http://upyun.geekap.com/gitblog-img/car-6-140.jpg  //首页文章列表显示的缩略图
thumbnailImagePosition: left  //缩略图显示的位置，上下左右都可以
autoThumbnailImage: true  // 开启后如果没有设置缩略图，会自动设置为图片画廊里的第一张，或者其他文章的图。
metaAlignment: center  //文章页图片上的文字居中显示
coverImage: http://upyun.geekap.com/gitblog-img/cover-v1.2.0.jpg  //文章页最上面的那个大图
coverCaption: "Hexo建站分享"  //大图下面的小标题
coverMeta: in  //图片上的文字显示在图片上，或者显示在图片外面
coverSize: full  //大图显示的尺寸，full是全屏展示
comments: false  //评论功能是否开启

四、遇到的问题及解决方案:

1.设置头像后文章页面的左上角一直显示一张头像的原图，影响阅读。

解决方法:

在主题目录的layout/_partial/header.ejs吧文件内唯一的的一个img删掉，1.9.1版本是在倒数第五行。