# 瓷砖图片库 **URL:** \ **Category:** Theme component\ **Tags:** deprecated\ **Created:** [2018年三月2日 06:56 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950 "2018-03-02T06:56:34Z")\ **Posts on this page:** 1\ **Showing post:** 1
**Author:** ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)\ **Post date:** [2018年三月2日 06:56 UTC](https://meta.discourse.org/t/tiles-image-gallery/81950/1 "2018-03-02T06:56:34Z")
⚠ 此组件已弃用。Discourse 现已内置平铺画廊功能： > [@Introducing image grids in posts](https://meta.discourse.org/t/introducing-image-grids-in-posts/268664?u=canapin): > > If you have many images in a Discourse post, you can now have them automatically arranged into a nice grid. All you need to do is wrap them in [grid] ... [/grid] tags, and the images will be neatly arranged. This is a core feature as of [this commit](https://github.com/discourse/discourse/commit/f89b5680cb4cc28003133e0095393b78d4b87460), enabled on all Discourse instances. Here’s an example in action: * * * 响应式网格画廊！ ![Capture](https://global.discourse-cdn.com/meta/original/3X/2/b/2b9d0b16e0eb32cf72afcf0e0cbcd604e28bb2a8.jpg) ![Capture2](https://global.discourse-cdn.com/meta/original/3X/8/9/898536d985ff3b3819786de57222a98c2d2dca42.jpg) ![Capture3](https://global.discourse-cdn.com/meta/original/3X/a/f/af2ec16d2ca127099ceeee9f4fcb23dae9922bf8.jpg) ![Capture44](https://global.discourse-cdn.com/meta/original/3X/e/a/ea410d869fa1b2e668475fcc8c97863350a10756.jpg) ![Capture4](https://global.discourse-cdn.com/meta/original/3X/e/2/e2c06edd3d45b23e373749809a047e926a7daebf.jpg) * * * 基于 [David Desandro](https://github.com/desandro) 的开源库 [Masonry](https://masonry.desandro.com/) 和 [ImagesLoaded](https://imagesloaded.desandro.com/) 构建 - [MIT 许可](https://desandro.mit-license.org/) _“… 在 MIT 许可下发布。请随意使用。”_ * * * #### 我该如何使用此组件？ 此组件会在编辑器中添加一个按钮。 ![Untitled](https://global.discourse-cdn.com/meta/original/3X/f/9/f9ff84e7fcdc01634e77c6248bfa0b9ab09742ba.png) 因此，您只需： 1. 使用默认的 Discourse 上传按钮上传一批图片，然后选中这些代码： ![Capture6](https://global.discourse-cdn.com/meta/original/3X/5/3/534daf36de827ac6934219830923aedc595306ad.PNG) 1. 点击画廊按钮。 您将在预览窗格中看到所选图片的 **静态预览** ： ![Capture8](https://global.discourse-cdn.com/meta/original/3X/f/7/f72dfce1742410ca46731a24336706f6aca19f93.PNG) 完成！ * * * #### 还有其他需要注意的事项吗？ 此组件不包含任何颜色或背景样式。它将继承当前主题的样式。 以下是该主题组件在不同主题上的运行效果： ![Capture5](https://global.discourse-cdn.com/meta/original/3X/a/7/a7d4afec515e56c1ba91d59b7998bdd819688e1f.jpg) 此主题组件还 **保留了默认的 Discourse 灯箱行为** ，这意味着点击任何图片都会在 **原生灯箱查看器** 中打开它们。 ![Capture9](https://global.discourse-cdn.com/meta/original/3X/0/a/0a67632575a5971e0b63e8398ab711d38de44a2e.jpg) #### 我可以同时使用 Slick 和 Tiles 吗？ 当然可以！😄 ![Capture999](https://global.discourse-cdn.com/meta/original/3X/a/1/a1b14744165035f183b7473e81e094052628ac84.jpg) 这是通过将 Slick 和 Tiles 都作为主题组件来实现的。 如下所示： ![Capture](https://global.discourse-cdn.com/meta/original/3X/d/6/d6b7f2957b6486135d00c0b2ff72180a9c019c40.PNG) 然后，您可以将上述示例中的“我的主题”设为默认主题，或设为用户可选主题，这样它就会同时包含 Slick 和 Tiles。 * * * 衷心感谢所有在此过程中提供帮助的人们：😋 @dax - 编辑器按钮 @cpradio - 按钮翻译 @Mittineague - `ajaxComplete` 处理程序 @simon - `api.onPageChange` 处理程序 @vinothkannans - 主题页面 URL 正则表达式 @sam - 将 `data-theme-*` 添加到白名单属性中 * * * 欢迎提交错误报告、建议或拉取请求。🍷 | | | | | --- | --- | --- | | 🛠 | **仓库** | [github.com/discourse/Discourse-Tiles-Image-Gallery](https://github.com/discourse/Discourse-Tiles-image-gallery) | | 📖 | **Discourse 主题新手？** | [Discourse 主题使用入门指南](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) | 安装此主题组件 --- _[View the full topic](https://meta.discourse.org/t/tiles-image-gallery/81950)._