上期我们讲了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缩略图。如果分大小图的话，缩略图放小图文件夹，视频放大图文件夹。
到此一个相册功能就改好了，你现在也拥有自己的相册了，快去试试吧。
网友评论