模板:Gallerygrid/文档

MediaWiki:Prism

MediaWiki:Prism-default

零件内容

• 模板:Gallerygrid
• 模板:Gallerygrid/default
• 模板:Gallerygrid/文档
• 模块:Arguments
• 模块:Gallerygrid
• MediaWiki:Common.css

生成一个使用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
|文件:立绘·咸鱼之王.png::我是一条咸鱼。
|文件:立绘·咸鱼之王.png::我们强烈推荐您前往以下页面进行基础学习：
*

[/‌/www.runoob.com/css/css-tutorial.html CSS教程]

|文件:立绘·咸鱼之王.png::我是一条咸鱼。
|文件:立绘·咸鱼之王.png::我是一条咸鱼。
|文件:立绘·咸鱼之王.png::请参阅

[[帮助:WIKI编辑教程]]

学习如何编写WIKI。
|文件:立绘·咸鱼之王.png::* 请不要创建无意义的页面
|文件:立绘·咸鱼之王.png::*无冲突原则：申请的主题不能是BILIGAME WIKI平台上已有的内容，申请的域名前缀不能是已被使用的
|文件:立绘·咸鱼之王.png::请在开始编辑前浏览

[[帮助:WIKI编辑教程]]

学习如何编写WIKI。
 |widths=180px
}}

我是一条咸鱼。

我们强烈推荐您前往以下页面进行基础学习：

• CSS教程

我是一条咸鱼。

我是一条咸鱼。

请参阅帮助:WIKI编辑教程学习如何编写WIKI。

• 请不要创建无意义的页面

• 无冲突原则：申请的主题不能是BILIGAME WIKI平台上已有的内容，申请的域名前缀不能是已被使用的

请在开始编辑前浏览帮助:WIKI编辑教程学习如何编写WIKI。

全参数

{{gallerygrid
|文件:立绘·咸鱼之王.png::我是一条咸鱼。
|文件:立绘·咸鱼之王.png::我们强烈推荐您前往以下页面进行基础学习：
*

[/‌/www.runoob.com/css/css-tutorial.html CSS教程]

|文件:立绘·咸鱼之王.png::我是一条咸鱼。
|文件:立绘·咸鱼之王.png::我是一条咸鱼。
|文件:立绘·咸鱼之王.png::请参阅

[[帮助:WIKI编辑教程]]

学习如何编写WIKI。
|文件:立绘·咸鱼之王.png::* 请不要创建无意义的页面
|文件:立绘·咸鱼之王.png::*无冲突原则：申请的主题不能是BILIGAME WIKI平台上已有的内容，申请的域名前缀不能是已被使用的
|文件:立绘·咸鱼之王.png::请在开始编辑前浏览

[[帮助:WIKI编辑教程]]

学习如何编写WIKI。
 |widths=160px
 |heights=160px
 |thumbsize=160px
 |gap=8px
}}

我是一条咸鱼。

我们强烈推荐您前往以下页面进行基础学习：

• CSS教程

我是一条咸鱼。

我是一条咸鱼。

请参阅帮助:WIKI编辑教程学习如何编写WIKI。

• 请不要创建无意义的页面

• 无冲突原则：申请的主题不能是BILIGAME WIKI平台上已有的内容，申请的域名前缀不能是已被使用的

请在开始编辑前浏览帮助:WIKI编辑教程学习如何编写WIKI。

fit参数

本节展示的是fit参数不同时图片的显示规律。

fit参数不填或为cover时，图片将保持比例填满可显示区域：

{{gallerygrid
|文件:立绘·咸鱼之王.png::fit参数为cover。图片的左右实际上被裁切了一部分。
 |widths=200px
 |heights=200px
 |fit=cover
}}

fit参数为cover。

fit参数为contain时，图片将全部展示在显示区域内（并对不符合比例的区域留白）：

{{gallerygrid
|文件:立绘·咸鱼之王.png::fit参数为cover。图片的左右实际上被裁切了一部分。
 |widths=200px
 |heights=200px
 |fit=contain
}}

fit参数为contain。

移植模板

在https://wiki.biligame.com/你管理的wiki/MediaWiki:Common.css里引入以下代码

/*用于gallerygrid模板的样式表。*/
.gallerygrid-item {
    display: flex;
    flex-direction: column;
    height: 100%
}
 
.gallerygrid-imagebox img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit:var(--gallerygrid-fit);
}

二次开发

使用新的输出模板

template参数指定了所需加载的模板。默认值default代表图像元素将通过{{gallerygrid/default}}进行输出。你可以复制该模板到另一个模板子页面并在此基础上进行开发。

更改样式

两个基础样式位于MediaWiki:Common.css中。新增或修改的样式建议统一放在该文件中。

• 修改该文件可能需要开发者权限。