不想拥有相册的blog不是好网站(
关于next主题下的相册搭建网上教程挺多的,但是很多都是那种瀑布流式,emmmmm…..
不符合我审美,我还是喜欢QQ空间式的(逃-
Google第一篇出来的是css+markdown 实现 hexo 相册【进阶篇】讲真的挺好看的,可能因为人家是自己画的 –
大体内容跟大佬的差不多,不过她用的是加载服务器上的图片,而我用的是图床。同时利用next已经整合的fancy box,达到点击图片放大查看的效果,而不是跳转到图片原页面。
布局
步骤
步骤的话与上述教程基本一致,只是修改了部分css样式,同时,因为要使得相册页面下的图片调用fancybox,需要修改\next\source\js\utils.js
的部分代码
1 2 3 4 5
| if ($image.is('.img-row img')){ $imageGalleryLink.addClass('post-gallery-img'); $imageGalleryLink.attr('data-fancybox', 'gallery').attr('rel', 'gallery'); }
|
修改缩略图
因为fancybox会自动生成缩略图,但实际上缩略图的src还是原图,所以加载的时候比较慢,这样也会造成资源浪费.所以还是在\next\source\js\utils.js
中修改了下下,将缩略图地址转换为原图;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| wrapImageWithFancyBox: function() { document.querySelectorAll('.post-body :not(a) > img, .post-body > img, .gallery-page > img').forEach(element => { var $image = $(element); var imageLink = $image.attr('data-src') || $image.attr('src'); var $imageWrapLink = $image.wrap(`<a class="fancybox fancybox.image" href="${imageLink}" itemscope itemtype="http://schema.org/ImageObject" itemprop="url"></a>`).parent('a'); var $imageGalleryLink = $image.wrap(`<a class="fancybox fancybox.image" href="${imageLink.replace(".th.",".")}" itemscope itemtype="http://schema.org/ImageObject" itemprop="url"></a>`).parent('a'); if ($image.is('.post-gallery img')) { $imageWrapLink.addClass('post-gallery-img'); $imageWrapLink.attr('data-fancybox', 'gallery').attr('rel', 'gallery'); } else if ($image.is('.group-picture img')) { $imageWrapLink.attr('data-fancybox', 'group').attr('rel', 'group'); } else { $imageWrapLink.attr('data-fancybox', 'default').attr('rel', 'default'); }
if ($image.is('.img-row img')){ $imageGalleryLink.addClass('post-gallery-img'); $imageGalleryLink.attr('data-fancybox', 'gallery').attr('rel', 'gallery'); }
|
这里并不适用所有,因为我的图床是通过Chevereto自建的,在上传图片之后,会给你多个图片格式的链接,包括缩略图\中等图以及原图,他们的格式是酱紫的:
1 2 3
| 原图: xxx.jpg 中等: xxx.md.jpg 缩略图: xxx.th.jpg
|
所以,只要在相册内容页面的图片地址填入缩略图,然后utils.js中会将th.
去掉,变成原图地址,这样点开之后就是原图了.写了一个简单的java来做这件事
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
| public class TransUrl { public static void main(String[] args) throws IOException { FileInputStream fis = new FileInputStream("url.txt"); BufferedReader bis = new BufferedReader(new InputStreamReader(fis));
List<String> strings = transUrl(bis); for (String str : strings) { System.out.print(str); } }
private static List<String> transUrl(BufferedReader bis) throws IOException { String line = null; List<String> pics = new ArrayList<>(); while ((line = bis.readLine()) != null) { String pattern = "<img.*?>"; Pattern compile = Pattern.compile("<img.*?>"); Matcher matcher = compile.matcher(line); while (matcher.find()) { String img = matcher.group(); pics.add(img); } } return pics; } }
|
路过图床也可以提供这种多格式链接,同时免费注册用户可以无限传图,对于小用户来说很棒啦,完全够用.
页面布局
页面布局采用flex,这里有一篇详细介绍的
简单来说,flex布局会让你的div按照你的需求,从左到右从上到下依次排列,同时还可以按照指定方式进行对齐;
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
| .gallery-page { margin-top: -50px; } .gallery-column, .img-row { display: flex; flex-direction: row ; flex-wrap: wrap; justify-content: space-between; } .img-row 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; } .posts-expand .post-body img { max-width: 180px; } @media (max-width: 767px){ .gallery-item p { min-width: 75px; font-size: 13px; } .posts-expand .post-body img { max-width: 150px; }
|
另外
如果嫌麻烦的话,图片直接放博客静态文件就好了,github暂时速度还是可以的,也不用担心流量问题;
记录的很简陋,因为只要自己能看懂 - - ,到时候动手修改还能记起来改哪里- -
具体的还是请参考:
css+markdown 实现 hexo 相册【进阶篇】