这篇指南介绍如何将萌娘共享的图像(也称“内部图像”)嵌入萌娘百科的页面。
萌娘百科使用的维基标记语言提供了嵌入图片的语法。只需要在源代码中加入以下代码:
[[File:文件名|选项|标题]]
就可以在相应位置插入图像。编辑页面时,你可以点按编辑框上方工具栏的嵌入文件按钮来方便地插入图像。
图像的语法和一般链接类似,只不过链接到的是文件页面而非内容页面。此外图片链接还有更多的选项。这是一个应用了多个选项的例子:
文件名写在最前,一般形如主文件名.扩展名
。文件名前面的File:
也可换成Image:
[1],取决于你的个人习惯。
标题是图像的说明文字,也被叫做图片注释。对于缩略图会显示在图像下方,并且可以包含维基链接或者其它格式。
选项可以有多个,先后顺序没有影响。如果参数无法解析成选项,就会被当作标题。下表列出了常见的选项[2]。
类型 | 参数 |
---|---|
格式 | 边框 / border 、无框 / frameless 、有框 / frame / framed 、缩略图 / thumb / thumbnail
|
尺寸 | 宽度px 、x高度px 、宽度x高度px 、upright / 右上 [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]]
。图像作为行内元素显示(嵌入型布局)。这种方式适用于图像较小的情形,比如{{表情}}。萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~
代码:[[File:ZhMoegirl15.2.png|left]]
。图像显示为块状元素,在文档流左侧浮动,文字环绕在图像周围。
萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~
萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~
代码:[[File:ZhMoegirl15.2.png|right]]
。图像显示为块状元素,在文档流右侧浮动,文字环绕在图像周围。
萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~
萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~
代码:[[File:ZhMoegirl15.2.png|none]]
。图像显示为块状元素,不浮动,文字环绕在图像上下侧。
萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~
萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~
代码:[[File:ZhMoegirl15.2.png|center]]
。图像显示为块状元素,不浮动,居中对齐。文字环绕在图像上下侧。
萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~
萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~萌娘百科,万物皆可萌的百科全书☆~
以上设置的是图像的水平位置,还可以设置图像的垂直对齐方式,这里不再详述。
如果想给图像配一个标题或者一段说明文字,可以使用缩略图(thumb
)格式。[4]设置为缩略图的图像会被框起来,添加白色的背景,并在右下角显示一个链接到图像页面的 标记。
[[File:ZhMoegirl15.2.png|thumb|萌娘百科Logo]]
未指定对齐时,缩略图默认右侧浮动,这一点与前面不同。缩略图也可以按上一节的方法调整定位,这里不再演示。
除thumb
(或缩略图
)外,其他的显示格式还有border
、frameless
、frame
等,你可以自己尝试它们的效果。
未指定图像的显示大小时,无格式图像的默认尺寸就是原始图像的尺寸;缩略图的默认尺寸是300像素宽[5]。但更多时候我们希望自己调整图像的显示大小。
可以给图像设置宽度或(和)高度来限制图像的尺寸,单位是px
(像素
)。
无论是同时设置宽度和高度还是只设置其中一项,图像都不会被拉伸变形,而是等比例缩放,使宽度和高度不超过设定值。
对于缩略图,除了设置固定尺寸,也可以使用upright
参数调整的大小:
[[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:首页]]
不设置链接时,图像会链接到媒体查看器(查看图片界面)。设置一个空的link=
可以禁用链接:
常用的选项还有:
<img />
标签的alt="..."
。替代文本的作用是,当图像无法打开(网速过慢、浏览器禁用图像等原因)时,图像应有的位置会显示 alt=
之后的内容。<img />
标签的class="..."
。这在某些以class为触发的模板中十分有用。这一节介绍一些条目排版中的技巧。
通过交替设置图片左右浮动,可以避免图片大量堆积在同一侧。
清除浮动是为了避免浮动内容溢出到规定区域外从而影响(甚至破坏)布局的现象。这里的例子显示了在新段落开始前未清除浮动和清除了浮动的对比。
清除浮动通过层叠样式表(CSS)属性clear
实现,有清除左侧浮动、清除右侧浮动和同时清除左右两侧浮动三种。在萌娘百科,你可以在需要清除浮动的位置添加{{clear}}
或{{-}}
模板(两者都是在需要清除浮动的位置额外添加一个空白标签,但后者会额外多空出一行(1em)的高度)。
(事实上这篇帮助文档中就大量使用了{{clear}}。)
对于大小相近的一组图片,把它们并列在一起最简便的办法是使用表格。
{| | [[File:Moegirlpedia-logo.png|200px]] | [[File:Moegirlpedia-logo.png|200px]] | [[File:Moegirlpedia-logo.png|200px]] |}
模板{{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>
会被格式化为:
除萌百支持的全局属性(id
、class
、style
等)以外,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}}
来显示宽高比悬殊的图片:
{{Image}}、{{image-clip}}等模板可以高度定制图片的样式,实现更复杂的效果。相应地也会增加代码的阅读难度和展开长度。
如果要生成一组雪碧图,可以试试{{链接图组}}和{{sprites}}。
{{Image label}}模板可以在图片中添加带文字、链接的标签。在萌娘百科条目中的使用例可参考废都物语条目。
条目背景图片和侧边栏底图是萌娘百科的特色。它们分别由对应的模板{{背景图片}}和{{替换侧边栏底图}}实现。你可以阅读相应的说明文件了解它们的使用方法。
为文中一部分添加背景,可以使用{{背景图片区域}}。
|