置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。
本页使用了标题或全文手工转换

帮助:图像

萌娘百科,万物皆可萌的百科全书!转载请标注来源页面的网页链接,并声明引自萌娘百科。内容不可商用。
跳到导航 跳到搜索
Commons-emblem-notice.svg
这个页面“Help:图像”是萌娘百科的帮助文档
  • 本文用于介绍萌娘百科中一些特定功能的操作方法;
  • 本文仅是一篇论述,不属于方针或指引。如果本指南与相关方针或指引发生冲突或存在不一致的情况,请以方针或指引的条文为准。

这篇指南介绍如何将萌娘共享的图像(也称“内部图像”)嵌入萌娘百科的页面。

基本语法

萌娘百科使用的维基标记语言提供了嵌入图片的语法。只需要在源代码中加入以下代码:

[[File:文件名|选项|标题]]

就可以在相应位置插入图像。编辑页面时,你可以点按编辑框上方工具栏的嵌入文件按钮来方便地插入图像。

图像的语法和一般链接类似,只不过链接到的是文件页面而非内容页面。此外图片链接还有更多的选项。这是一个应用了多个选项的例子:

[[File:Moegirlpedia-logo.png|thumb|center|120px|link=首页|alt=萌娘百科Logo|可爱的[[萌百娘]]~]]
萌娘百科Logo
可爱的萌百娘

文件名写在最前,一般形如主文件名.扩展名。文件名前面的File:也可换成Image:[1],取决于你的个人习惯。

标题是图像的说明文字,也被叫做图片注释。对于缩略图会显示在图像下方,并且可以包含维基链接或者其它格式。

选项可以有多个,先后顺序没有影响。如果参数无法解析成选项,就会被当作标题。下表列出了常见的选项[2]

类型 参数
格式 边框 / border无框 / frameless有框 / frame / framed缩略图 / thumb / thumbnail
尺寸 宽度pxx高度px宽度x高度pxupright / 右上[3]
水平对齐 / none居中 / center / left / right
垂直对齐 middle / 中间baseline / 基线sub / super / top / 顶部text-top / 文字顶部bottom / 底部text-bottom / 文字底部
链接 link=内部链接 或 外部链接 或 空值 / 链接=
替代文本 alt=替代文本 / 替代文本= / 替代=
class=HTML类 / 类=
语言代码 lang=语言代码 * 一般无需使用。

如果两个不能组合使用的参数同时存在,后一个会被当作标题。

下面通过一些示例来展示参数的用法。演示中主要使用可爱的萌百娘,实际应用时你可以将其替换为你想要展示的图像。

在手机等小屏幕设备上,显示效果可能与预期的有差异。

对齐

对齐参数:

  • left(或):左侧浮动
  • right(或):右侧浮动
  • none(或):无浮动
  • center(或居中):居中对齐

提示:在MoeSkin皮肤窄屏(显示区域宽度≤576px)下,元素的浮动会被取消。

(不指定)

代码:[[File:ZhMoegirl15.2.png]]。图像作为行内元素显示(嵌入型布局)。这种方式适用于图像较小的情形,比如{{表情}}。ZhMoegirl15.2.png萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~

left / 左

代码:[[File:ZhMoegirl15.2.png|left]]。图像显示为块状元素,在文档流左侧浮动,文字环绕在图像周围。

ZhMoegirl15.2.png

萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~

萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~

right / 右

代码:[[File:ZhMoegirl15.2.png|right]]。图像显示为块状元素,在文档流右侧浮动,文字环绕在图像周围。

ZhMoegirl15.2.png

萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~

萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~

none / 无

代码:[[File:ZhMoegirl15.2.png|none]]。图像显示为块状元素,不浮动,文字环绕在图像上下侧。

ZhMoegirl15.2.png

萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~

萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~

center / 居中

代码:[[File:ZhMoegirl15.2.png|center]]。图像显示为块状元素,不浮动,居中对齐。文字环绕在图像上下侧。

ZhMoegirl15.2.png

萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~

萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~

以上设置的是图像的水平位置,还可以设置图像的垂直对齐方式,这里不再详述。

格式缩略图

如果想给图像配一个标题或者一段说明文字,可以使用缩略图thumb)格式。[4]设置为缩略图的图像会被框起来,添加白色的背景,并在右下角显示一个链接到图像页面的 magnify-clip-ltr.png 标记。

[[File:ZhMoegirl15.2.png|thumb|萌娘百科Logo]]
萌娘百科Logo

未指定对齐时,缩略图默认右侧浮动,这一点与前面不同。缩略图也可以按上一节的方法调整定位,这里不再演示。

thumb(或缩略图)外,其他的显示格式还有borderframelessframe等,你可以自己尝试它们的效果。

尺寸

未指定图像的显示大小时,无格式图像的默认尺寸就是原始图像的尺寸;缩略图的默认尺寸是300像素宽[5]。但更多时候我们希望自己调整图像的显示大小。

可以给图像设置宽度或(和)高度来限制图像的尺寸,单位是px像素)。

设置宽度:

[[File:Moegirl-wallpaper-spring-2018.png|thumb|none|280px|我有280像素宽]]
我有280像素宽

设置高度:

[[File:Moegirl-wallpaper-fall-2019.png|thumb|none|x150px|我有150像素高]]
我有150像素高

同时设置宽度和高度:

[[File:ZhMoegirl15winter.jpg|thumb|none|270x270px|猜猜我的大小?]]
猜猜我的大小?

无论是同时设置宽度和高度还是只设置其中一项,图像都不会被拉伸变形,而是等比例缩放,使宽度和高度不超过设定值。

对于缩略图,除了设置固定尺寸,也可以使用upright参数调整的大小:

我的大小是默认尺寸的0.4倍

[[File:ZhMoegirl15.2.png|thumb|upright=0.4]][[File:ZhMoegirl15.2.png|thumb|upright 0.4]] 会将图像缩放到默认尺寸的0.4倍,对于这个例子就是300px × 0.4 = 120px(300px宽是萌娘百科默认的缩略图尺寸)。

也可以只填upright而不填后面的数值,这相当于upright=0.75

还有一点需要注意,无论哪种方式,缩略图的尺寸都无法超过原始图像。

考虑到读者在不同设备上的浏览体验,内文中的图片不宜过大或过小。(作为参考,手机竖屏的浏览器宽度通常在320px到425px之间,而电脑屏幕宽度则大于1024px。)

注意:当前版本的MoeSkin皮肤视图下缩略图的宽度不会自动适应屏幕,且溢出屏幕的部分无法通过左右滑动来显示。

链接

link参数用来给图像添加链接,可以是内部链接、跨wiki链接或者外部链接。例如:

[[File:Moegirlpedia-logo.png|100px|link=首页]]
[[File:commonsMoegirl2016tmp.png|100px|link=萌娘共享:Mainpage]]
[[File:Wikipedia-logo.png|100px|link=https://zh.wikipedia.org/wiki/Wikipedia:首页]]

Moegirlpedia-logo.png CommonsMoegirl2016tmp.png Wikipedia-logo.png

以上三个图片分别链接至萌娘百科首页(内部链接)、萌娘共享的首页(跨wiki链接)和中文维基百科的首页(外部链接)。

不设置链接时,图像会链接到媒体查看器(查看图片界面)。设置一个空的link=可以禁用链接

[[File:ZhMoegirl15.2.png|100px|不设置link参数]]
[[File:ZhMoegirl15.2.png|100px|link=|link参数为空]]

不设置link参数 link参数为空

其他

常用的选项还有:

  • alt=:替代文本,映射到生成的<img />标签的alt="..."。替代文本的作用是,当图像无法打开(网速过慢、浏览器禁用图像等原因)时,图像应有的位置会显示 alt= 之后的内容。
  • class=:HTML类,映射到生成的<img />标签的class="..."。这在某些以class为触发的模板中十分有用。

图文排版

这一节介绍一些条目排版中的技巧。

左右交替

通过交替设置图片左右浮动,可以避免图片大量堆积在同一侧。

清除浮动

清除浮动是为了避免浮动内容溢出到规定区域外从而影响(甚至破坏)布局的现象。这里的例子显示了在新段落开始前未清除浮动和清除了浮动的对比。

清除浮动通过层叠样式表(CSS)属性clear实现,有清除左侧浮动、清除右侧浮动和同时清除左右两侧浮动三种。在萌娘百科,你可以在需要清除浮动的位置添加{{clear}}{{-}}模板(两者都是在需要清除浮动的位置额外添加一个空白标签,但后者会额外多空出一行(1em)的高度)。

(事实上这篇帮助文档中就大量使用了{{clear}}。)

用表格排版

对于大小相近的一组图片,把它们并列在一起最简便的办法是使用表格

{|
| [[File:Moegirlpedia-logo.png|200px]]
| [[File:Moegirlpedia-logo.png|200px]]
| [[File:Moegirlpedia-logo.png|200px]]
|}
Moegirlpedia-logo.png Moegirlpedia-logo.png Moegirlpedia-logo.png
由于表格的单元格不会自动换行,当图片较多时,这种方法的显示效果未必理想。

并列图像

参见:Template:Multiple image

模板{{Multiple image}}(又名:{{并列图像}}、{{并列图片}})可以把一组图像并列在一起,类似缩略图那样显示。

各种各样的死库水,从左上角开始,沿顺时针方向,分别为旧式,新式,竞赛式和分体式。
{{multiple image
| perrow = 2
| total_width = 300
| image1 = Pixiv_51872985.jpg | width1=850 | height1=1200
| image2 = Pixiv_58132562.png | width2=800 | height2=1200
| image3 = Pixiv_65682005.jpg | width4=566 | height4=729
| image4 = Pixiv_11112249.jpg | width3=429 | height3=764
| footer =各种各样的[[死库水]],从左上角开始,沿顺时针方向,分别为旧式,新式,竞赛式和分体式。
}}

横向并列多张图像也可以使用更简单的{{Image frame}}。

如果有大量图片需要并列展示,不妨试试下文介绍的画廊语法

画廊语法

<gallery> 标签可以很方便地创建一个由缩略图组成的图库(也称画廊)。编辑页面时点按编辑框上方工具栏中的“高级高级”,在下拉工具栏中点按图库按钮,即可插入一个示例画廊。画廊的语法是:

<gallery>
File:文件名|标题|alt=替代文本
File:文件名|标题|alt=替代文本
...
</gallery>

File:前缀可以省略。另外,缩略图的许多参数在这里也同样适用。

例如,

<gallery>
Moegirl is watching you.jpg|萌百娘[[抢镜脸]]
Moegirl is watching you.jpg|这篇文档''{{FULLPAGENAME}}''属于[[:分类:帮助]]
Moegirl is watching you.jpg|link=萌百娘|该图像链接至[[萌百娘]]条目
Moegirl is watching you.jpg|alt=萌百娘正在看着你
</gallery>

会被格式化为:

属性

除萌百支持的全局属性(idclassstyle等)以外,gallery 标记自身接受几个额外参数,可通过成对的“名称-值”来指定:

<gallery 参数1 参数2 ...>
图像1
图像2
...
</gallery>

参数:

  • caption="{标题}":(若标题文本中包含空格,应使用双引号将其包括起来)在画廊顶端中间位置显示一个标题。
  • widths={宽度}px:设置图像宽度,默认为120px。注意,是每张图像的宽度
  • heights={高度}px:设置图像的(最大)高度。
  • perrow={整数}:设置每行显示的图像数。
  • showfilename={任意值}:将每张图像的文件名显示为单独的标题

示例:

<gallery widths=60px heights=60px perrow=6 caption="萌百娘正在看着你">
File:Moegirl_is_watching_you.jpg
File:Moegirl_is_watching_you.jpg
File:Moegirl_is_watching_you.jpg
File:Moegirl_is_watching_you.jpg
File:Moegirl_is_watching_you.jpg
File:Moegirl_is_watching_you.jpg
File:Moegirl_is_watching_you.jpg
File:Moegirl_is_watching_you.jpg
File:Moegirl_is_watching_you.jpg
File:Moegirl_is_watching_you.jpg
File:Moegirl_is_watching_you.jpg
File:Moegirl_is_watching_you.jpg
</gallery>

模式

从MediaWiki 1.22版本开始,gallery标签新加入了模式参数功能mode=, 可选参数如下:

  • traditional: 标准默认的画廊模式。
  • nolines: 标准模式去掉了外围方框。
  • packed: 设置图像为统一高度,系统自动根据长宽比调整图像宽度,根据屏幕宽度调整每行图像数。
  • packed-overlay: packed模式外文字说明和半透明背景框。
  • packed-hover: packed模式,鼠标悬浮时显示文字说明+半透明背景框。
  • slideshow: 幻灯片模式,可以点击切换图像或查看所有画廊内的图像。(MediaWiki 1.23新增)
展开示例

mode="traditional" 标准模式

<gallery mode="traditional">
Image:Moegirl_Head.png|萌百娘
Image:Gengxinji.jpg|绿坝娘
Image:Wikitanface.png|维基娘
</gallery>

mode="nolines" 无框标准模式

<gallery mode="nolines">
Image:Moegirl_Head.png|萌百娘
Image:Gengxinji.jpg|绿坝娘
Image:Wikitanface.png|维基娘
</gallery>

mode="packed" 填充模式

<gallery mode="packed">
Image:Moegirl_Head.png|萌百娘
Image:Gengxinji.jpg|绿坝娘
Image:Wikitanface.png|维基娘
</gallery>

mode="packed-overlay" 带字幕的填充模式

<gallery mode="packed-overlay">
Image:Moegirl_Head.png|萌百娘
Image:Gengxinji.jpg|绿坝娘
Image:Wikitanface.png|维基娘
</gallery>

mode="packed-hover" 鼠标悬浮时显示文字的填充模式

<gallery mode="packed-hover" caption="萌娘百科历史Logo">
Image:2010-DEC-13MoeGirlWikiLogo.png|2010年Logo
Image:2011-JUN-7MoeGirlWikLogo.png|2011年Logo
Image:2013logo.png|2013年Logo
Image:2013logoEn.png|2013年Logo(英文版)
Image:2013logoJa.png|2013年Logo(日文版)
Image:Zh2014 moegirlpedia logo.png|2014年Logo
Image:ZhMoegirl15.2.png|2015年Logo
</gallery>

mode="slideshow" 幻灯片模式

注意:这个模式默认会让画廊占据所有可用空间,通常会使图像显示过大。由于高heights和宽widths参数在此模式被忽略,因此画廊的尺寸需要像下面一样手动限制。注意此处限制的是画廊可用的最大尺寸,而非画廊内图像的尺寸。

<div style="max-width:800px"><gallery mode="slideshow">
File:ISLAND_Anime_Mainvisual1.jpg
File:ISLAND_Anime_Mainvisual2.jpg
File:ISLAND_Anime_Mainvisual3.jpg
File:ISLAND_Anime_Mainvisual4.jpg
File:ISLAND_Anime_Mainvisual5.jpg
</gallery></div>

链接到图像但不显示图像

如果只是想链接到图像而不显示,主要有三种方法:

* [[Media:ZhMoegirl15.2.png]](利用[[Help:名字空间#虚拟名字空间|媒体名字空间]]创建一个指向文件本身的链接)
* [[:File:ZhMoegirl15.2.png]](链接到图像说明页)
* [[cm:File:ZhMoegirl15.2.png]](添加[[Help:跨wiki|跨wiki]]前缀,链接到萌娘共享上的图像说明页)

在讨论版请求文件操作时,应按照最后一种写法链接到萌娘共享页面,以便于维护人员处理。

常用模板

萌娘百科常用的图像模板分类:图像模板模板:图像模板列出。

长图

可以用模板{{wide image}}{{tall image}}来显示宽高比悬殊的图片:

{{Wide image}}
{{Wide image|碧蓝航线ED长图.png|1500px|碧蓝航线TV动画第11话ED的截图拼接版本|alt=Wide_image模板演示}}
Wide_image模板演示
碧蓝航线TV动画第11话ED的截图拼接版本
{{Tall image}}
{{Tall image|东方全家福.jpg|360|400|东方Project全家福,作者:八里 FKM|alt=Tall_image模板演示|center}}
Wide_image模板演示
东方Project全家福,作者:八里 FKM

图片裁切

{{Image}}、{{image-clip}}等模板可以高度定制图片的样式,实现更复杂的效果。相应地也会增加代码的阅读难度和展开长度。

如果要生成一组雪碧图,可以试试{{链接图组}}和{{sprites}}。

图片标注

主页面:模板:Image label

{{Image label}}模板可以在图片中添加带文字、链接的标签。在萌娘百科条目中的使用例可参考废都物语条目。

背景图片和侧边栏底图

参见:模板:背景图片模板:替换侧边栏底图

条目背景图片和侧边栏底图是萌娘百科的特色。它们分别由对应的模板{{背景图片}}和{{替换侧边栏底图}}实现。你可以阅读相应的说明文件了解它们的使用方法。

为文中一部分添加背景,可以使用{{背景图片区域}}。

参考

注释

  1. 当然File:也可换成文件:檔案:等文件命名空间的其他别名。
  2. 建议优先使用英文参数而非参数名的中文翻译(不支持繁体)。
  3. upright在这里的意思是“竖的,垂直的”,中文参数“右上”可能是望文生义的错译。
  4. 仅当图片设置为thumbframe格式时才会在图片下方显示标题,设置为其他格式则图片标题不会显示出来,而是映射到<img />标签的title。但frame格式会忽略尺寸属性,不便于调整大小,因此首选缩略图格式。
  5. 这是萌娘百科的默认设置,与其他MediaWiki网站可能不同。缩略图默认尺寸可以在登录后在参数设置中修改。