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