 |
摘要 | 在帖子中添加图片轮播（或多个） |
 |
仓库 | GitHub - NateDhaliwal/discourse-post-image-carousel: Adds a image carousel in posts |
 |
安装指南 | 如何安装主题或主题组件 |
 |
初次使用 Discourse 主题？ | Discourse 主题使用入门指南 |
安装此主题组件
此组件在帖子中添加了一个由 Splide/Swiper 驱动的图片轮播。Swiper 轮播具有更多功能，例如缩略图和不同的动画。
Swiper：
带缩略图启用的 Swiper：
Splide：
在编辑器工具栏中添加了一个按钮来添加轮播，并带有一个占位符图像：
轮播的标记如下：
[wrap="Carousel" autoplay=true/false interval=<持续时间（毫秒）>/false loop=true/false thumbs=true/false thumbs_loop=true/false]
![image1]()
![image2]()
![image3]()
...
[/wrap]
为了简化创建轮播的过程，点击编辑器工具栏中的按钮将打开一个模态框（感谢 Discourse GIFs TC！），您可以在其中选择轮播的配置：
然后，您可以在 [wrap] 中添加更多图片。
（每个轮播的）设置如下：
enable_thumbnails: 显示轮播下方的图片缩略图。
enable_loop: 使轮播在到达末尾时循环到开头。
enable_thumbnail_loop: 使轮播的缩略图在到达末尾时循环。
如果图片太少，启用此设置可能会导致轮播出现故障、抖动。建议在启用此设置之前添加更多图片。
enable_autoplay: 让轮播自动播放。
autoplay_interval: 播放下一张幻灯片之前等待的毫秒数。与 enable_autoplay 结合使用。如果留空，则默认为 5000。
设置
（全局）设置如下：
carousel_software: 轮播将使用的软件（Swiper/Splide）；Swiper 是首选，也是默认设置。
image_carousel_placeholder: 创建轮播时的默认图像。它默认为包含的常规占位符图像：
show_pagination_buttons: 显示轮播下方的分页点，以便更轻松地在图像之间导航。
image_transition_animation: [仅适用于 Swiper] 图像过渡到下一张的动画；默认为“slide”，选项包括：
- cube
- fade
- cards
- flip
- slide (默认)
pagination_button_color: 分页点的颜色；留空则使用 Swiper/Splide 的默认设置。
active_pagination_button_color: 当前处于该幻灯片时分页点的颜色；留空则使用 Swiper/Splide 的默认设置。
注意事项
此 TC 对 Splide 的当前支持不允许使用缩略图和过渡动画。我很乐意接受有关 Splide 缩略图的 PR（这更复杂）。
如果有人想实现垂直缩略图，我仓库中有（已注释掉的）代码，但效果不太好。我很乐意接受 PR 来添加此功能（或在此基础上进行改进）。
还有一件事，我目前正在探索一种方法，在创建模态框中添加轮播的图片，但遇到了 此处 描述的问题。如果有人能在那里回复，我将不胜感激！
感谢
感谢 @Arkshine 的启发 此处。我知道他创建了仓库 此处（然而，我选择不在此 TC 中引用该仓库）。
希望这对某人有所帮助！
我还没有发布，因为我正在处理富文本编辑器（prosemirror）视图，理解所有这些新东西需要时间。