Hexo博客添加相册页面

发表于 | 分类于 ， | 评论数：

摘要：Hexo 博客并没有自带的相册功能，所以我们需要自己动手来创建一个相册，其中修改了一些原作者的问题。

我的个人相册目前不适配低分辨率，建议在 1920*1080 及以上访问效果最好哦，需要自己进行适配的，可以在我的代码基础上自行进行修改~

创建腾讯云存储桶（cos）

跳转：「腾讯云」–>产品（左上角）–>存储–>对象存储

我们先新建一个专门存放相册图片的存储桶，在对象存储页面左边点击存储桶列表 -> 新建存储桶

然后在存储桶页面，名称可以自己任意填写，需要选择下图中标注的公有读私有写，然后点击确定。

然后我们点击这个存储桶，选择左侧的基础配置 -> 跨域访问CORS设置 -> 添加规则

然后按下图所示进行填写

域名以 http://或 https:// 开头，每行一个，一行最多一个通配符 *

如果填写域名后遇到跨域问题，可以将 origin 这里填写为 * 就可以解决

点击权限管理–>Policy权限设置–>添加策略

按照下面图片进行设置

然后记住基础配置中的访问域名，这里就是我们动态生成相册，获取链接时需要用到的xml链接，下面要用到。

新建相册页面

首先在 hexo 博客本地新建一个页面（菜单栏）：

hexo博客根站点目录下

1
hexo new page "photos"

然后在hexo/source/photos/index.md中编辑页面如下：

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
---
title: 光影流年
date: 2019-12-05 13:00:00
type: "photos"
---
<style type="text/css">
	.posts-expand .post-body img{
		padding: 1px;
	}

	.footer{
		display: none !important;
	}

 	/*不展示底部*/
 	.footer-inner{
 		display: none !important;
 	}

	.v * {
    	color: #f4f4f4 !important;
	}

	.v .vwrap .vmark .valert .vcode {
    	background: #00050b !important;
	}

 	/*不展示侧栏*/
 	.sidebar-toggle{
 		display: none !important;
 	}

    /*修改相册页面内容宽度为全屏*/
	.main-inner{
		width: 100%;
	}

	/*修改主体页面样式*/
	.main {
    	padding-bottom: 150px;
    	margin-top: 0px;
    	background: #121212;
	}
	.main-inner{
		margin-top: unset;
	}

	/*body体样式*/
	body {
		background-image: unset;
		background-attachment: unset;
		background-size: 100%;
	}

	.header{
		background: rgba(28, 25, 25, 0.6);
		border-bottom: unset;
	}

	.menu .menu-item a{
		font-weight: 300;
   		color: #222;
	}

    .imgbox{
	  width: 100%;
	  overflow: hidden;
	  border-right: 0px solid #bcbcbc;
    }

	.box{
		visibility: visible;
		overflow: auto; 
		zoom: 1;
	}

	.box li{
		float: left;
    	width: 25%;  /*每个框占25%*/
    	position: relative;
    	overflow: hidden;
    	text-align: center;
    	list-style: none;
    	margin: 0;
    	/*display: inline;*/
    	padding: 0;
    	height: 400px;   /*固定高度*/
	}

	.box li span{
		display: block;
    	padding: 4% 7% 10% 7%;
    	min-height: 80px;
    	background: #fff;
    	color: #fff;
    	font-size: 16px;
    	background: #121212;
    	font-weight: 600;
    	line-height: 26px;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
	}

    img.imgitem{
		padding: unset;
		padding: unset;
		border: unset;
		position: relative;
		padding: 0px;
		width: 100%;
		height: 350px;
	}

	div#comments.comments.v {
    	border: 0px;
    	margin: auto !important;
    	margin-top: unset;
    	margin-left: unset;
    	margin-right: unset;
    	width: 60%;
    	padding-top: 50px;
	}

	div#posts.posts-expand {
    	border: unset;
    	padding: unset;
    	margin-bottom: 10px;
	}

	.valine .vlist .vcard .vcomment-body .vhead .vname{
		color: #fff;
	}

	.valine .vlist .vcard .vcomment-body .text-wrapper .vcomment p{
		color: #fff;
	}

	.box p{
		display: block;
    	background: #121212;
    	color: #fff;
    	font-size: 12px;
    	font-family: 'SwisMedium';
    	text-align: center;
	}

	.box span strong{
		background: rgba(0,0,0,0.4);
		padding: 20px;
		font-family: serif, sans-serif;
	}

	.posts-expand .post-title {
		display: none;
	}
	.title{
    	display: inline-block;
    	vertical-align: middle;
    	font: 85px/250px 'ChaletComprimeMilanSixty';
    	background-position: left bottom !important;
    	color: #fff;
    	background-size: 100% auto !important; 
		-webkit-background-size: cover; 
		-moz-background-size: cover;
		-o-background-size: cover;
    	width: 100%;
    	text-align: center;
    	border: unset;
    	height: 580px;
    	cursor: unset !important;
    	-webkit-box-sizing: border-box;
    	box-sizing: border-box;
	}
	.btn-more-posts{
		display: inline-block;
    	vertical-align: middle;
    	font: 85px/250px 'ChaletComprimeMilanSixty';
    	color: #000;
    	width: 100%;
    	text-align: center;
    	border: unset;
    	height: 400px;
    	background-color: #121212;
    	/*-webkit-box-sizing: border-box;*/
    	/*box-sizing: border-box;*/
	}

@media (max-width: 767px){
	.box li {
    	width: 100%;
    	height: auto;
	}
	.title {
    	height: 200px;
	}

	.posts-expand .post-body img{
		box-sizing: none;
		padding: 0px !important;
	}

	.box span {
    	min-height: 80px;
    	border-right: unset;
    	font-size: 17px;
	}
	.box p{
    	border-right: unset;
    	font-size: 12px;
	}

	.posts-expand {
    	margin: unset;
	}
	div#comments.comments.v {
    	width: 96%;
    	padding-top: 50px;
	}
}

@media (min-width: 1300px){
	.container .main-inner{
		width: 100%;
	}
}

</style>

<!-- 主体部分 -->
<div id="box" class="box"></div>

<script type="text/javascript">

function loadXMLDoc(xmlUrl) 
{
	try //Internet Explorer
	{
		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	}
	catch(e)
	{
	  try //Firefox, Mozilla, Opera, etc.
	    {
		  xmlDoc=document.implementation.createDocument("","",null);
	    }
	  catch(e) {alert(e.message)}
	}
	
	try 
	{
		  xmlDoc.async=false;
		  xmlDoc.load(xmlUrl);
	}
	catch(e) {
		try //Google Chrome  
		  {  
			var chromeXml = new XMLHttpRequest();
			chromeXml.open("GET", xmlUrl, false);
			chromeXml.send(null);
			xmlDoc = chromeXml.responseXML.documentElement; 				
			//alert(xmlDoc.childNodes[0].nodeName);
			//return xmlDoc;    
		  }  
		  catch(e)  
		  {  
			  alert(e.message)  
		  }  		  	
	}
	return xmlDoc; 
}

var xmllink="填写你的xml地址"
//访问域名链接就是我上面提到的那个访问域名xml链接

xmlDoc=loadXMLDoc(xmllink);
var urls = xmlDoc.getElementsByTagName('Key');
var date = xmlDoc.getElementsByTagName('LastModified');
var wid = 350;
var showNum = 13; //每个相册一次展示多少照片，为4的倍数+1
if ((window.innerWidth) > 1200) { wid = (window.innerWidth * 3) / 18;}
var box = document.getElementById('box');
var i = 0;

var content = new Array();
var tmp=0;
var kkk=-1;
for (var t = 0; t < urls.length ; t++) {
	var bucket=urls[t].innerHTML;
	var length=bucket.indexOf('/');
	if(length===bucket.length-1){
		kkk++;
		content[kkk]=new Array();
		content[kkk][0]={'url':bucket,'date':date[t].innerHTML.substring(0,10)};
		tmp=1;
	}
	else {
		content[kkk][tmp++]={'url':bucket.substring(length+1),'date':date[t].innerHTML.substring(0,10)};
	}
}

for (var i = 0; i < content.length; i++) {
	var conBox=document.createElement("div");
	conBox.id='conBox'+i;
	box.appendChild(conBox);
	var item=document.createElement("div");
	var title=content[i][0].url;
	item.innerHTML="<button class=title style=background:url("+xmllink+'/' + title + "surface.jpg"+");background-repeat:no-repeat;><span style=display:inline;><strong style=color:#f0f3f6; >" + title.substring(0,title.length - 1) + "</strong></span></button>";
	conBox.appendChild(item);

        for (var j = 1; j < content[i].length && j < showNum+1; j++) {
	        var con=content[i][j].url;
		var item=document.createElement("li");
		if(con.substring(0,con.length-4) != "surface"){
			item.innerHTML="<div class=imgbox id=imgbox style=height:"+wid+"px;><img class=imgitem src="+xmllink+'/' + title + con +" alt=" + con + "></div><span>" + con.substring(0,con.length-4);
			conBox.appendChild(item);
		}
	}
	if(content[i].length > showNum){
		var moreItem=document.createElement("button");
		moreItem.className = "btn-more-posts";
		moreItem.id = "more" + i;
		moreItem.value = showNum + 1;
		let cur = i;
		moreItem.onclick = function (){
			moreClick(this,cur,content[cur],content[cur][0].url);
		}
		moreItem.innerHTML="<span style=display:inline;><strong style=color:#f0f3f6;>加载更多</strong></span>";
		conBox.appendChild(moreItem);
	}
}

function moreClick(obj,cur,cont,title){
	var parent = obj.parentNode;
	parent.removeChild(obj);
	var j=obj.value;
	var begin=j;
	for ( ; j < cont.length && j < Number(showNum) + Number(begin); j++) {
		var con=cont[j].url;
		var item=document.createElement("li");
		item.innerHTML="<div class=imgbox id=imgbox style=height:"+wid+"px;><img class=imgitem src="+xmllink+'/'+title+con+" alt="+con+"></div><span>"+con.substring(0,con.length-4);
		parent.appendChild(item);
		var v=item.getElementsByTagName('img');
		v[0].id=imgid;
		imgid++;
	}
	if(cont.length > j){
		obj.value=j;
		parent.appendChild(obj);
	}
}
</script>

其中我们只需要修改 xmllink 的值，就是上文提到的访问域名：

1
var xmllink="填写你的xml地址"

上传图片

上传图片推荐使用「使用腾讯云存储客户端」文中推荐的客户端软件哦，其中需要注意的地方如下：

①上传图片前，需要先在存储桶中建立一个文件夹，文件夹名字就是相册名字，当然可以建立多个文件夹

②文件夹里不能再建文件夹，不然会出 BUG

③每个文件夹中需要一张名为surface 的图片，它会自动作为该文件夹相册的的封面

④确保存储桶的 xml 域名能在浏览器上访问

⑤尽量自己修改样式以满足自己的需求

⑥CSS 样式直接写在 md 文件中，不用写在全局 custom.styl 文件中

然后就 ok 了！可以使用hexo clean && hexo g && hexo s重新渲染页面查看一下相册！如果有 BUG 也欢迎在评论区中留言，我尽量解决！

参考：

Sanarous：「hexo博客添加相册页面」

小鸡：「给hexo静态博客添加动态相册功能」

相关文章
-------　本文结束　　感谢您的阅读　-------