hexo+github搭建个人博客主题篇

上期我们讲了hexo搭建博客的基础篇，将一个博客从无到有搭建出来并部署到github上。但是hexo有个重点部分没有讲到，那就是主题。hexo允许你定制自己的主题，这就是为什么hexo可以做出丰富的界面效果。因为主题是十分重要的一部分，所以单独拿来讲讲。

hexo的主题放在themes文件夹下，一个主题就是一个文件夹，hexo的默认主题是landscape。这里有一些好的主题推荐，传送门都是github上比较火的，第一个都到8000多star了。

修改主题：

修改_config.yml文件 里的主题配置，找到文件里的theme字段，将landscape改为你要使用的主题。

主题相关配置主要是修改主题文件下的_config.yml文件配置，配置详情请查阅相关主题文档。好看实用的主题有很多，每个人的爱好也不同，可以去看看各种主题，选择自己喜欢的主题。
今天我要讲的是一个我非常喜欢的主题hexo-theme-yilia。该主题简洁漂亮，并且提供了我非常喜欢的相册模块。github地址,作者的文档写的很详细，我这里就不啰嗦了。

注意：在主题theme同目录的_config.yml文件中要加入如下字段：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true                  // 放在配置文件的最下方。

如果配置中有什么问题可以看作者博客的备份文件传送门,虽然下载的主题文件没有相册模块，但是作者提供的备份文件中有相册模块。于是拿来分析一波，发现改一下配置，我也能使用相册功能。

1、修改source/photos文件夹下index.ejs

作者相册里有两块，一块是Ins，一块是摄影。摄影是个独立的项目，我这里只是把Ins这块留下了。

删除这段代码

<div class="photos-btn-wrap">
    <a class="photos-btn active" href="javascript:void(0)">Ins</a>
    <a class="photos-btn" target="_blank" href="http://litten.me/gallery/">摄影</a>
</div>

<a href="https://www.instagram.com/litten225/" target="_blank" class="open-ins">图片来自instagram，正在加载中…</a>            
// 去掉href 、target属性，将提示文字改为你自己提示如：图片加载中。。。。

2、接下来修改source/photos文件夹下ins.js

当时查看作者ins模块下的图片，发现这个模块的文件都来自http://litten.me这个域名下。于是在photos文件夹下文件中搜索这个域名，就在ins.js中大约119行找到了域名。看了一下正好是作者的图片配置信息。作者图片都放在http://litten.me/域名对应服务器的ins-min和ins文件夹下。ins-min是小图，ins对于的是大图。

如果我们把图片的链接地址换成我们的链接地址，不久可以使用相册模块了。我们虽然没有服务器，但是图片也可以放在github上啊。于是我在github建了个picture的项目，在项目下建了个picture文件夹，传了几张图片上去了。打开图片后，只是在页面中看到图片，并不是图片的连接，右键在新标签中代开图片，这时就能获取到图片的链接地址了。

如：https://raw.githubusercontent.com/keenjaan/pictrue/master/picture/1.jpg

keenjaan改为你的github名称

第一个picture改为你的仓库名称

第二个picture改为你的文件夹名称。

1.jpg几位图片名称

修改这段代码

var minSrc = 'http://litten.me/ins-min/' + data.link[i] + '.min.jpg';
          var src = 'http://litten.me/ins/' + data.link[i];
          
 修改为：
var minSrc = 'https://raw.githubusercontent.com/github名称/仓库名称/master/文件夹名称/' + data.link[i] + '.jpg';
          var src = 'https://raw.githubusercontent.com/github名称/仓库名称/master/文件夹名称/' + data.link[i];

作者这里用了大图和小图，你也可以学作者一样建两个文件夹，分别放不同尺寸图片。我这里只使用一种图片。

3、最后修改source/photos文件夹下ins.json

"list": [{
        "date": "2017-07",
        "arr": {
            "year": 2017,
            "month": 7,
            "src": ["", ""],
            "link": ["1", "2"],
            "text": ["picture1", "picture2"],
            "type": ["image", "image"]
        }
    }]

数据是按时间分的，按月份来划分。

date 代表时间

year 年份

month 月份

src  可以填空""

link代表图片的名字

text 图片底下的文字

type 文件格式，image和video代表图片和视频。

如果是视频的话，要在图片文件夹里放一个视频文件和一个同名的jpg缩略图。如果分大小图的话，缩略图放小图文件夹，视频放大图文件夹。

到此一个相册功能就改好了，你现在也拥有自己的相册了，快去试试吧。