如果你看到本段文字，说明该页面未正常加载全局JS，部分功能将无法使用，请点击 刷新 重新加载页面。

全站通知：

模板:Gallerygrid

来自咸鱼之王WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

生成一个使用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
}}
立绘·咸鱼之王.png

我是一条咸鱼。

立绘·咸鱼之王.png

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

立绘·咸鱼之王.png

我是一条咸鱼。

立绘·咸鱼之王.png

我是一条咸鱼。

立绘·咸鱼之王.png

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

立绘·咸鱼之王.png
  • 请不要创建无意义的页面
立绘·咸鱼之王.png
  • 无冲突原则：申请的主题不能是BILIGAME WIKI平台上已有的内容，申请的域名前缀不能是已被使用的
立绘·咸鱼之王.png

请在开始编辑前浏览帮助: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
}}
立绘·咸鱼之王.png

我是一条咸鱼。

立绘·咸鱼之王.png

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

立绘·咸鱼之王.png

我是一条咸鱼。

立绘·咸鱼之王.png

我是一条咸鱼。

立绘·咸鱼之王.png

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

立绘·咸鱼之王.png
  • 请不要创建无意义的页面
立绘·咸鱼之王.png
  • 无冲突原则：申请的主题不能是BILIGAME WIKI平台上已有的内容，申请的域名前缀不能是已被使用的
立绘·咸鱼之王.png

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

fit参数

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

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

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

fit参数为cover。

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

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

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中。新增或修改的样式建议统一放在该文件中。

  • 修改该文件可能需要开发者权限。
所有模板列表
取自“https://wiki.biligame.com/xyzwgame/index.php?title=模板:Gallerygrid&oldid=11652”