建立图册
原理：就是html写道md文档中，完后就能显示了
网页显示，弄一个原图文件夹（/img）和缩略图文件夹(img/s)
来个示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <center>这里相册名字比较好</center>
<style type="text/css">
.post-block {
opacity: 1;
}
</style>
<center>********************************************************************</center>
<div class="gallery-page">
<div class="img-list">
<div class="img-column">
<a href="img/原图1.jpg" target="_Blank"><img src="img/s/缩略图1.jpg"></a>
<a href="img/原图2.jpg" target="_Blank"><img src="img/s/原图2.jpg"></a>
</div>
</div>
<center>********************************************************************</center>
</div>
|
配上一个css样式
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
| .gallery-page {
margin-top: -50px;
opacity: 1;
}
.img-list,
.gallery-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
.img-column {
display: flex;
flex-direction: column-reverse;
}
.img-column a,
.gallery-column a {
border-bottom: 0px;
}
.gallery-item {
margin-bottom: -50px
}
.gallery-item p {
margin: -25px auto -10px;
max-width: 50%;
text-align: center;
font-size: 15px;
color: $black-deep;
background: rgba(255,255,255,.3);
border-radius: 7px;
border: 1px solid $black-deep;
box-shadow: 0 8px 20px -8px rgba(0,0,0,.3);
}
.posts-expand .post-body .gallery-column a img {
height: 250px;
width: 300px;
object-fit: cover;
}
@media (max-width: 767px){
.gallery-item p {
min-width: 75px;
font-size: 13px;
}
}
|
这个css自我感觉不怎么好用，会的请在next/source/css/main.style（next8.6.1）中自行添加.
/source/_data/styles.styl这里也可以加css