Hexo-theme-next: Support gallery feature by default

[SimpCosm]

作为一个 个人博客，很多时候大家都有搭建自己的相册的需求。

对于相册，期待实现的效果与豆瓣相册类似，具体如下

• 主界面
  
  
  
  • 可以有分类的子相册，每个相册可以自定义自己的相册名和相册描述
  
  
  • 可以自动建材封面为等尺寸
  
  
• 分类子相册界面
  
  
  
  • 可以用类似photoswipe插件来浏览相册
  
  
  • 加载时候可以有缩略图，点击可以看大图
  
  
  • 按图片原长宽比平铺
  
  
  • 插入的图片源可以来自本地，也可以来自图床外链
  
  
  • 点击看大图时，每张图片可以有自己的文字描述
  
  
• 其他
  
  
  
  • 相册也可以插入视频
  
  
  • 自动化每次新加如图片的流程
  
  
  • 每个子相册内部可以按照时间线将图片排序
  
  

对于上述需求，经过Google搜索可以看到很多博主已经做出过这方面的尝试与实践，但是总是感觉在某些方面还差了一点

• https://asdfv1929.github.io/2018/05/26/next-add-photos 没有子相册功能，流程不够自动化
• https://co5.me/2018/181112-gallerry2.html 没有photoswipe的效果
• https://timding.top/2017/09/18/Hexo-NexT-%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E7%9B%B8%E5%86%8C-%E4%BA%8C/ 没有子相册功能
• https://liyangzone.com/2019/07/22/hexo%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0%E4%B8%80%E7%BA%A7%E5%88%86%E7%B1%BB%E7%9B%B8%E5%86%8C/ 使用的不是Next主题

前端小白这两天一直都在折腾这个，但是还是感觉有些乏力，如果Next主题能够自带相册功能，真的是非常棒了

[welcome[bot]]

Thanks for opening this issue, maintainers will get back to you as soon as possible!

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label Feature Request to this issue, with a confidence of 0.95. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[stevenjoezhang]

目前有Group Pictures tag： https://theme-next.org/docs/tag-plugins/group-pictures
其它主题的实现： https://louisbarranqueiro.github.io/hexo-theme-tranquilpeak/2013/02/18/Image-gallery-showcase/
此前也有相关的讨论： https://github.com/theme-next/hexo-theme-next/issues/230
https://github.com/theme-next/awesome-next/issues/7
https://github.com/theme-next/awesome-next/issues/9

NexT

Group Pictures

NexT User Docs – NexT Supported Tags – Group Pictures

[SimpCosm]

非常感谢回复， 之前也看到过关于Group Pictures Tag的文档，但是仍然觉得对于上述需求不是能够很直接的满足，而且Group Pictures插入的图片效果似乎也略显死板。不知道是不是我对Group Pictures的理解还不够到位，是否有利用Group Pictures生产photowall的示例呢，谢谢！

之前的几次讨论，单独添加相册的选项似乎没有具体的结论，如果能够把这个feature加到roadmap里面感觉是一个不错的选择。

非常感谢社区各位的努力，制作出这么优秀的Next主题。如果上述讨论有任何不妥的地方，欢迎指出！

[stevenjoezhang]

不客气，感谢您的支持。整理了一下，其实您提到的大部分功能NexT都已经实现了：

主界面

• [x] 可以有分类的子相册，每个相册可以自定义自己的相册名和相册描述（使用sub-menu，在_config.yml中设置）

• [ ] 可以自动剪裁封面为等尺寸

  分类子相册界面

• [x] 可以用类似photoswipe插件来浏览相册（NexT已经内置了fancybox和mediumzoom）

• [x] 加载时候可以有缩略图，点击可以看大图（Hexo有插件可以实现，在 https://github.com/hexojs 下）
• [x] 按图片原长宽比平铺（这是默认的）
• [x] 插入的图片源可以来自本地，也可以来自图床外链（自己设置链接就行）

• [x] 点击看大图时，每张图片可以有自己的文字描述（自己设置image title caption就行）

  其他

• [ ] 相册也可以插入视频（这是个好建议，可以实现一下）

• [x] 自动化每次新加入图片的流程（NexT作为Hexo主题无法实现此功能）
• [ ] 每个子相册内部可以按照时间线将图片排序

能够把这个feature加到roadmap里面感觉是一个不错的选择

它曾经在v7的roadmap中，但是后来删除了。事实上，它更适合作为一个独立的插件存在，而不是主题的一部分。

是否有利用Group Pictures生产photowall的示例呢

官方文档就是一个很好的示例。把Group Pictures tag放到一个自定义的页面中，然后在侧栏中增加这个链接就行。

GitHub

Hexo

A fast, simple & powerful blog framework, powered by Node.js. - Hexo

[stevenjoezhang]

group-pictures可以加上一个相册名参数。

按照时间线将图片排序听上去很cool。

另一个有趣的想法是用exif.js来显示图片的元信息。

[gapplef]

them-next/awesome-next#9是我提的
其实我想要的并不是一个手动，比如使用group-pictures，创建的用于展示作品的相册，而是一个全自动的图片索引页面。

使用场景是：我正常的发布博客，在博客中会插入各种图片：普通的博文配图也好、手机随拍也好、专业摄影也好，所有这些图片都会被自动汇总到一个索引页面，并按时间顺序展示。一个非常好的例子是微博的图片墙

最简单粗暴的做法是直接索引指定的图片资源目录(如/images)下的所有图片，同时过滤掉favicon,二维码之类的小尺寸图片。但仔细想下问题还挺多的：

• 博文中发布的图片可能只是引用的外部链接，并没有存在images下；
• 图片所在博文的发布时间和图片的最终修改时间可能并不一致，如何建立时间线；
• 是否有可能将图片关联到发布图片的博文，类似微博图片墙的做法；
  ......

越想越复杂:man_facepalming: ，不知道是否能实现。

[stevenjoezhang]

全自动对于一个主题来讲并不现实。比较可靠的方式是让 Hexo 去实现，然后 NexT 主题调用相关的API。如果确实认为这是一个重要的功能，可以到 Hexo 那边发一个 Feature Request，NexT主题会跟进的。

[stevenjoezhang]

这个 Issue 先关了。因为大部分要求的功能NexT都已经实现了，而其它的都难以进行操作。例如

按照时间线将图片排序

「时间线」三个字当然很简单，但具体以哪个时间为准？本地图片的创建时间、修改时间；Web服务器提供的时间；还是 EXIF 给出的拍摄时间？

即使这样做了，也难以对图库中的所有照片统一。这已经超出了 NexT 主题的解决范围。我们仍然倾向于让 Hexo 提供相关的接口。

欢迎提一些更加具体、可操作的建议。

[SimpCosm]

Hi, 各位，后来我自己实现了上述的功能，在我看来大体还可以用。

• 具体实现过程如下 Hexo NexT主题添加多级相册功能。
• 具体效果参见我的相册
  欢迎各位提出意见和建议。

[stevenjoezhang]

谢谢，如果您有兴趣的话，可以在这里发一个Pull request: https://github.com/theme-next/awesome-next
让更多的人看到这个实现方法

GitHub

theme-next/awesome-next

:sunglasses: Theme NexT, AWESOME NexT! Contribute to theme-next/awesome-next development by creating an account on GitHub.

[SimpCosm]

Hi, steven, 我刚刚在awesome-next的repo下提交了相关的实现方法。
对于实现一个类似于 hexo-generator-album 的插件也是很感兴趣的，但是可能最近没多少时间了，期待下次能够补上。

[stevenjoezhang]

好的，非常感谢！