全站通知：
模板:Gallerygrid
刷
历
编
跳到导航
跳到搜索
模板：[刷新此页面] [编辑] [页面历史]
文档：[查看] [编辑] [页面历史]
生成一个使用CSS3 Grid布局的画廊，用于取代传统的<gallery>写法。
参数格式
- 编号参数
- 输入文件名和注释文本。编号本身可以省略。
- 每个编号参数对应一个图片及其注释。所有参数需要在一个字符串中书写。
- 字符串应当以文件全称开头（
file:或文件:）。文件名称结束后，使用双英文冒号::分隔。该符号后的部分将被视为该图片的注释。 - 字符串中不得包含英文等号。如果有包含等号的需求，请在该参数前声明编号，如
|1=file:xxxx.jpg::我=是一张=图是正确的写法，而|file:xxxx.jpg::我=是一张=图会导致该图片无法识别。 - 字符串中不得包含pipe符号（|）。
- template
- 需要用于输出画廊元素的子模板。见下文“二次开发”一节。默认值为default。
- widths
- 图片的宽度。每个画廊中图片的宽度是统一的。默认值为240px。
- heights
- 图片的高度。每个画廊中图片的高度是统一的。默认值为120px。
- thumbsize
- 图片缩略图的宽度。默认值与widths相等。
- 在默认输出模板中，图片将按照上述参数规定的widths和heights画出的容器显示，因此大于widths的缩略图实际上将无谓消耗带宽。
- gap
- 控制网格的间隙。该参数会造成图片实际宽度比widths稍小。
- fit
- 由于widths和heights参数限制死了图片显示区域的尺寸，fit参数用于控制图片的实际内容在显示区域的适应方式。
- cover：默认值。使图片其中一个方向填满区域，另一个方向居中显示（并裁切掉超出显示区域的部分）。
- contain：使图片保持比例显示在区域中心，超出比例的区域留空。
示例
默认参数
{{gallerygrid
|widths=180px
|文件:卡拉彼丘手游.jpg::我是一段注释文本。
|文件:卡拉彼丘手游.jpg::我们强烈推荐您前往以下页面进行基础学习：
*[http://www.runoob.com/css/css-tutorial.html CSS教程]
|文件:卡拉彼丘手游.jpg::我是一段注释文本。
|文件:卡拉彼丘手游.jpg::我是一段注释文本。
|文件:卡拉彼丘手游.jpg::请参阅[[帮助:零件]]学习如何编写高扩展性的前端模块。
|文件:卡拉彼丘手游.jpg::* 请不要使用CSS修改属于灰机wiki的皮肤区域
|文件:卡拉彼丘手游.jpg::*'''无冲突原则'''：申请的主题不能是灰机wiki平台上已有的内容，申请的域名前缀不能是已被使用的
|文件:卡拉彼丘手游.jpg::请在建站前浏览[[特殊:站点排行|站点排行榜]]或[[灰机wiki:灰机停机坪|推荐站点列表]]或者在[[club:首页|灰机club]]查找，确认您申请的领域无人创建，当然，您也可以向我们发邮件求证（<code>support@huiji.wiki</code>或者<code>ga@huiji.wiki</code>）。
}}
我是一段注释文本。
我们强烈推荐您前往以下页面进行基础学习：
我是一段注释文本。
我是一段注释文本。
请参阅帮助:零件学习如何编写高扩展性的前端模块。
- 请不要使用CSS修改属于灰机wiki的皮肤区域
- 无冲突原则：申请的主题不能是灰机wiki平台上已有的内容，申请的域名前缀不能是已被使用的
全参数
{{gallerygrid
|widths=160px
|heights=160px
|thumbsize=160px
|gap=8px
|文件:卡拉彼丘手游.jpg::我是一段注释文本。
|文件:卡拉彼丘手游.jpg::我们强烈推荐您前往以下页面进行基础学习：
*[http://www.runoob.com/css/css-tutorial.html CSS教程]
|文件:卡拉彼丘手游.jpg::我是一段注释文本。
|文件:卡拉彼丘手游.jpg::我是一段注释文本。
|文件:卡拉彼丘手游.jpg::请参阅[[帮助:零件]]学习如何编写高扩展性的前端模块。
|文件:卡拉彼丘手游.jpg::* 请不要使用CSS修改属于灰机wiki的皮肤区域
|文件:卡拉彼丘手游.jpg::*'''无冲突原则'''：申请的主题不能是灰机wiki平台上已有的内容，申请的域名前缀不能是已被使用的
|文件:卡拉彼丘手游.jpg::请在建站前浏览[[特殊:站点排行|站点排行榜]]或[[灰机wiki:灰机停机坪|推荐站点列表]]或者在[[club:首页|灰机club]]查找，确认您申请的领域无人创建，当然，您也可以向我们发邮件求证（<code>support@huiji.wiki</code>或者<code>ga@huiji.wiki</code>）。
}}
我是一段注释文本。
我们强烈推荐您前往以下页面进行基础学习：
我是一段注释文本。
我是一段注释文本。
请参阅帮助:零件学习如何编写高扩展性的前端模块。
- 请不要使用CSS修改属于灰机wiki的皮肤区域
- 无冲突原则：申请的主题不能是灰机wiki平台上已有的内容，申请的域名前缀不能是已被使用的
fit参数
本节展示的是fit参数不同时图片的显示规律。
fit参数不填或为cover时：
{{gallerygrid
|widths=200px
|heights=200px
|fit=cover
|文件:卡拉彼丘手游.jpg::fit参数为cover。
}}
fit参数为cover。
fit参数为contain时：
{{gallerygrid
|widths=200px
|heights=200px
|fit=contain
|文件:卡拉彼丘手游.jpg::fit参数为contain。
}}
fit参数为contain。
二次开发
使用新的输出模板
template参数指定了所需加载的模板。默认值default代表图像元素将通过模板:gallerygrid/default进行输出。你可以复制该模板到另一个模板子页面并在此基础上进行开发。
沪公网安备 31011002002714 号