hexo博客添加相册页面 - Sanarous的博客

hexo博客添加相册页面

Hexo 博客目前是不自带相册功能的,所以需要自己手动制作一个,在「Hexo博客+Next主题深度优化与定制」文中简单的写了一下相册的制作,但是原文作者写的比较模糊,所以我重新写一个比较详细的版本,希望大家都能有一个 perfect 的个人相册😄 !

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

创建腾讯云存储桶

使用腾讯云在「使用腾讯云存储博客图片」文中描述的比较详细,可以进行参考。

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

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

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

然后按下图所示进行填写

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

然后记住这个地方访问域名,这里就是我们动态生成相册,获取链接时需要用到的xml链接,下面要用到。

复制这个访问域名,看能不能在浏览器中打开,如果可以打开并且没有显示error节点,那么就可以继续下面的操作,否则查看上面哪一步出错并进行改正。

新建相册页面

首先在 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
---
title: 光影流年
date: 2019-04-01 19:10:05
type: "photos"
categories: 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%;
margin-top: unset;
}

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

/*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;
}

xmlDoc=loadXMLDoc("https://hexo-blog-1258928558.cos.ap-guangzhou.myqcloud.com");

var urls = xmlDoc.getElementsByTagName('Key');
var date = xmlDoc.getElementsByTagName('LastModified');
var wid = 350;
var showNum = 21; //每个相册一次展示多少照片
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(https://hexo-blog-1258928558.cos.ap-guangzhou.myqcloud.com/" + title + "封面.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) != "封面"){
item.innerHTML="<div class=imgbox id=imgbox style=height:"+wid+"px;><img class=imgitem src=https://hexo-blog-1258928558.cos.ap-guangzhou.myqcloud.com/" + 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=https://hexo-blog-1258928558.cos.ap-guangzhou.myqcloud.com/"+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
xmlDoc=loadXMLDoc("https://hexo-blog-1258928558.cos.ap-guangzhou.myqcloud.com");

其中修改为你的访问域名,然后将三处 innerHTML 修改为你的访问域名,此处也可以定义变量名进行代替,但是之前忘了修改,为了避免产生其它 BUG,还是建议依次进行修改,懂 js 的小伙伴也可以自行定义简化代码。

1
item.innerHTML="<button class=title style=background:url(https://hexo-blog-1258928558.cos.ap-guangzhou.myqcloud.com/" + title + "封面.jpg"+");background-repeat:no-repeat;><span style=display:inline;><strong style=color:#f0f3f6; >" + title.substring(0,title.length - 1) + "</strong></span></button>";

上传图片

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

  1. 上传图片前,需要先在存储桶中建立一个文件夹,文件夹名字就是相册名字,当然可以建立多个文件夹
  2. 文件夹里不能再建文件夹,不然会出 BUG
  3. 每个文件夹中需要一张名为封面 的图片,它会自动作为该文件夹相册的的封面
  4. 确保存储桶的 xml 域名能在浏览器上访问
  5. 尽量自己修改样式以满足自己的需求
  6. CSS 样式直接写在 md 文件中,不用写在全局 custom.styl 文件中

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

如果这篇文章对您很有帮助,不妨
-------------    本文结束  感谢您的阅读    -------------
0%