建立图册
原理:就是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