hexo 相册的搭建

hexo相册的创建

整体简介

hexo有很多开源主题,但是很少带相册功能的,hexo-theme-yilia包含了相册功能,示例博客示例1示例二

hexo-theme-yilia主题提供的相册方式很特别,是同步instagram的相册,首先instagram这款应用的确很不错,但是国内由于GFW的存在,你懂得,呵呵呵,访问要翻墙。所以寻找更好的解决方案,更换图床,可以使用七牛云作为存储解决方案,当然也有使用GitHubCoding来存储的,但不建议使用云盘工具作为存储解决方案。

将图片上传到七牛云等,然后博客去批量请求某个路径或工作空间下的图片资源即可,当然,下面有批量上传的介绍

图片上传到七牛云

七牛云有自己的文档介绍,可能后续有更改,这里先说一下我的批量上传操作及生成所有图片的json文件方法。

参考了文一文二,文一主要介绍了图片上传到GitHub的方式,文二是在文一的基础上进行修改,上传到七牛云,个人建议使用七牛云,这样访问速度会快一些。

上面两篇文章介绍的算是比较详细,这里说一下需要注意的地方:

  • 文一对文件夹类型检查不完善,类型检查建议使用文二,这样就只会上传图片资源了。
  • 注意路径,执行node xxx.js里面的相对路径不是该js文件所在路径,而是你当前所在路径。
  • 如果你的图片显示不出来,或者没有生产json文件,你可以调试一下js文件,我也没有接触Node.js,最简单的调试就是添加debugger来断点调试,看看进了哪里,从哪里跳出了,定位问题还是计较快的。
  • 使用七牛云本地调试的话需要本地安装node-qiniu

生成相册页

从上一步获取到的json文件,可以用来加载相册页了,按照文一方式即可。但是获取图片地址的链接要换成七牛云的拼接。

这样生成了相册文件,不过图片大小可能不是那么美观,可能过大过小,可以参考themes/yilia/source/js/instagram.js文件对图片大小进行限制。

七牛云js共享

我的相册资源是在本地根目录新建了node_modules文件夹,这样hexo g的时候图片自选不会生成到public文件中,这样使用七牛云的资源即可,不用git也上传了。我的七牛云批量上传js生成的json文件是在source/photo路径下,对应的相册页修改一下json路径指向即可。

如果你仔细看了下面的js代码,会发现有两个相同作用函数(文件类型的检查),暂时保留。js下载

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
const fs = require("fs");
// 相册相对路径
const path = "./photo_album/";

var qiniu = require("qiniu");


//需要填写你的 Access Key 和 Secret Key
qiniu.conf.ACCESS_KEY = '';
qiniu.conf.SECRET_KEY = '';

//要上传的空间
bucket = 'hexo';

//构建上传策略函数
function uptoken(bucket, key) {
var putPolicy = new qiniu.rs.PutPolicy(bucket+":"+key);
return putPolicy.token();
}

//构造上传函数
function uploadFile(uptoken, key, localFile) {
var extra = new qiniu.io.PutExtra();
qiniu.io.putFile(uptoken, key, localFile, extra, function(err, ret) {
if(!err) {
// 上传成功, 处理返回值
console.log('upload success : ',ret.hash, ret.key);
} else {
// 上传失败, 处理返回代码
console.log(err);
}
});
}

//读取文件后缀名称,并转化成小写
function getFilenameSuffix(file_name) {
if(file_name=='.DS_Store'){
return '.DS_Store';
}
if (file_name == null || file_name.length == 0)
return null;
var result = /\.[^\.]+/.exec(file_name);
return result == null ? null : (result + "").toLowerCase();
}

//获取文件名后缀名
String.prototype.extension = function(){
var ext = null;
var name = this.toLowerCase();
var i = name.lastIndexOf(".");
if(i > -1){
var ext = name.substring(i);
}
return ext;
}

//判断Array中是否包含某个值
Array.prototype.contain = function(obj){
for(var i=0; i<this.length; i++){
if(this[i] === obj)
return true;
}
return false;
};

// 类型匹配
function typeMatch(type, filename){
var ext = filename.extension();
if(type.contain(ext)){
return true;
}
return false;
}

fs.readdir(path, function (err, files) {
if (err) {
return;
}
var arr = [];
(function iterator(index) {
if (index == files.length) {
fs.writeFile("./source/photo/output.json", JSON.stringify(arr, null, "\t"));
return;
}
fs.stat(path + files[index], function (err, stats) {
if (err) {
return;
}
if (stats.isFile()) {
var imgExt = new Array(".png",".jpg",".jpeg",".bmp",".gif");//图片文件的后缀名
if(typeMatch(imgExt, files[index])){
var suffix = getFilenameSuffix(files[index]);
if(!(suffix=='.js'|| suffix == '.DS_Store')){
//要上传文件的本地路径
filePath = path + files[index];
console.log(files[index]);
//上传到七牛后保存的文件名
key = files[index];
//生成上传 Token
token = uptoken(bucket, key);

uploadFile(token, key, filePath);
arr.push(files[index]);
}
}
}
iterator(index + 1);
})
}(0));
});

愚人节快乐!希望我的整理能为你节省时间,这会是一件令人开心的事情。