Help:Images/zh

From MediaWiki.org
Jump to: navigation, search
PD 注意:当你编辑本页面时,你将表示同意以CC0协议授权你的贡献。你可以在公有领域帮助文档找到更多信息。
PD

本文解释了维基编辑中的图片语法。一般来说,你(或某位其他用户)需要先上传图片,然后才能在页面中使用它。

存储在 MediaWiki 服务器上图片通常都是作为一个 MediaWiki 链接的目标、使用 File: 命名空间前缀显示出来的(但传统的 Image: 命名空间前缀仍可以作为别名使用)。此外,还可以使用 Media: 命名空间前缀来引用原始的媒体文件(以便在 MediaWiki 页面之外单独显示或下载它)。

支持的图像媒体类型[edit | edit source]

默认情况下支持下列几种文件格式:

  • .jpg 或 .jpeg : 采用标准 JPEG 格式(这种有损压缩格式最适合照片)压缩的位图图像。
  • .png : 采用便携式网络图像格式(由 W3C 提出)的位图图像。
  • .gif : 采用传统的图像交换格式的位图图像。

以下是在 Wikimedia 中使用的其它格式,通常是在其它地方启用的(可能需要在默认值之外进行额外的设置):

  • .svg : 采用可缩放矢量图形格式的可缩放图像(由 W3C 提出)。参见 Manual:Image Administration#SVG
  • .tiff : 标记图像格式。常被用来存储高分辨率档案照片。通常与 Extension:PagedTiffHandler 一起使用。
  • .ogg, .oga, .ogv : Ogg 多媒体(音频或视频)。它不是图像格式,但处理方式类似。通常与 Extension:OggHandler 一起使用。
  • .pdf : 采用便携式文档格式的多页面文档(最初由 Adobe 提出)。通常与 Extension:PdfHandler 一起使用。
  • .djvu : 采用 DejaVu 格式的多页面位图文档(常见于扫描的图书)。参见 Manual:How to use DjVu with MediaWiki
    .pdf 和 .djvu 文件一次只能显示一页。

其它媒体类型也可以被支持,但它们可能无法直接显示在页面中。

显示单张图片[edit | edit source]

语法[edit | edit source]

显示一张图片的完整语法是:

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

选项可以是以下列表中的零个或多个,用管道符号(|)分隔:

  • 格式选项:border 和/或 framelessframethumb(或 thumbnail)之一;
    控制显示的图片如何在页面中格式化和嵌入。
  • 大小选项。可以是下列选项之一:
    • {宽度}px - 将图片调整为指定的最大宽度,单位为像素,其高度不受限制;
    • x{高度}px - 将图片调整为指定的最大高度,单位为像素,其宽度不受限制;
    • {宽度}x{高度}px - 将图片调整为指定的宽度和高度,单位为像素;
    • upright - 根据用户设置,将图片调整为合适的大小(适用于高度大于宽度的图片)。
    请注意,图片将始终保持其宽高比,并且只能被缩小(而不能被放大),除非它是可缩放的媒体类型(位图图像不能被放大)。
    默认的最大尺寸取决于格式选项和内部图像大小(根据其媒体类型)。
  • 水平对齐选项:leftrightcenternone 之一;
    控制图片在文本中的水平对齐方式(以及嵌入/分块或浮动样式),没有默认值。
  • 竖直对齐选项:baselinesubsupertoptext-topmiddlebottomtext-bottom之一;
    控制非浮动的嵌入式图片与处于相同分块中的前后文本的竖直对齐方式(默认的竖直对齐方式为 middle)。
  • 链接选项。可以是下列选项之一:
    • link={目标} - 可以修改生成的链接目标(以指向任意的页面标题或 URL),可通过点击图片激活此链接。例如,[[File:Example.jpg|20px|link=http://www.wikipedia.org]] 显示为 Example.jpg(外部链接),或者 [[File:Example.jpg|20px|link=MediaWiki]] 显示为 Example.jpg(内部链接)。
    • link=(使用空值) - (MediaWiki 1.14+)可显示图片但不带有任何链接;例如,[[File:Example.jpg|20px|link=]] 显示为 Example.jpg
      • ! 如果你设置了 |link=|(空值),则不会显示标题。(参见 bugzilla:21454
  • 其他选项:
    • alt={备选文字} - (MediaWiki 1.14+)指定图片的备选文字(对应生成的 <img /> 元素的 HTML 属性 alt="..."),以便当引用的图片无法下载或嵌入时,或者支持的媒体必须使用备选描述文字时(例如,当使用一个盲文阅读器或者用户在浏览器中设置了辅助选项时),可以显示这些文字。
    • page={数字} - 显示指定的页码(目前仅在显示 .djvu 或 .pdf 文件时可用)。
    • class={html 类} - (MediaWiki 1.20+)指定类(对应生成的 <img /> 元素的 HTML 属性 class="...")。

如果一个参数不对应任何其它可能性,它就会被当作是标题文字。标题文字在 thumbframe 格式中显示在图片下方;在 borderframeless 格式中,或格式参数缺省时,将作为鼠标悬停文字。在 thumbframe 格式下显示的标题文字中可以包含维基链接和其它格式。在其它选项中,维基格式无效,但嵌入包含(transclusion)依然有效。

如果未指定标题文字,将会自动创建一个标题以显示文件名。要完全删除标题,将其设置为 <span title=""></span>。例如,[[File:Example.jpg|20px|<span title=""></span>]] 会显示为

格式[edit | edit source]

以下表格中显示了所有可用格式的效果:

当缩略图中的图片高度大于其宽度(也就是纵向而不是横向)、并且你发现它太大时,不妨试试 upright 选项,它会试着减少图片的高度而不是宽度,以将其大小调整得更合适。此外,还可以明确地指定所需的最大高度(以像素为单位)。

请注意,你可以加入 thumb={文件名} 选项,以使用另一张图片作为缩略图。

大小和边框[edit | edit source]

在不同的格式中,大小参数的效果可能会有所不同,如下所示。

  • 要知道未指定大小时的效果,参见上面的格式一节。
  • 当未指定格式、或仅使用了 border 时,可以随意缩小或放大至任意大小。
  • 在下面的示例中,原始图片大小为 400 × 267 像素。
  • 使用 frame 的图片总是忽略大小参数,如果原始图片大小超过了用户设置中定义的最大尺寸,它将被缩小。
  • 使用 thumb 的图片可以被缩小,但不能被放大至超过原始图片的尺寸。
格式 缩小 放大
(未指定)
[[File:Example.jpg|50px]]

Example.jpg

[[File:Example.jpg|200px]]

Example.jpg


border
[[File:Example.jpg|border|50px]]

Example.jpg

[[File:Example.jpg|border|200px]]

Example.jpg


frame
[[File:Example.jpg|frame|50px]]
Example.jpg
[[File:Example.jpg|frame|200px]]
Example.jpg


thumb
[[File:Example.jpg|thumb|50px]]
Example.jpg
[[File:Example.jpg|thumb|200px]]
Example.jpg


frameless
[[File:Example.jpg|frameless|50px]]

Example.jpg

[[File:Example.jpg|frameless|200px]]

Example.jpg

水平对齐[edit | edit source]

注意,当使用 frame 或者 thumb[nail] 格式时,默认的水平对齐方式将是 right

描述 你这样写 你得到的是
未指定水平对齐方式,或默认对齐方式
显示为浮动式:否
显示为嵌入式:是
... 文本 文本 文本
[[File:example.jpg|100px|标题]]
文本 文本 文本 ...
... 文本 文本 文本

标题 文本 文本 文本 ...

指定水平对齐方式为:none
显示为浮动式:否
显示为嵌入式:否
... 文本 文本 文本
[[File:example.jpg|none|100px|标题]]
文本 文本 文本 ...
... 文本 文本 文本
标题

文本 文本 文本 ...

指定水平对齐方式为:center
显示为浮动式:否
显示为嵌入式:否
... 文本 文本 文本
[[File:example.jpg|center|100px|标题]]
文本 文本 文本 ...
... 文本 文本 文本
标题

文本 文本 文本 ...

指定水平对齐方式为:left
显示为浮动式:是
显示为嵌入式:否
... 文本 文本 文本
[[File:example.jpg|left|100px|标题]]
文本 文本 文本 ...
... 文本 文本 文本
标题

文本 文本 文本 ...

指定水平对齐方式为:right
显示为浮动式:是
显示为嵌入式:否
... 文本 文本 文本
[[File:example.jpg|right|100px|标题]]
文本 文本 文本 ...
... 文本 文本 文本
标题

文本 文本 文本 ...

竖直对齐[edit | edit source]

竖直对齐选项仅在图片显示为嵌入式元素、而不是浮动时才有效。它们可以修改嵌入的图片与位于相同块、且显示在同一行中的前后文字在竖直方向上的对齐方式。

注意,嵌入的图片所在的行中的文本(以及当前行的下一行中的文本)可能会被下移(这会导致行高由于行间距增大而增大,就好象在一段文本中使用不同大小的字体、或上标和下标时可能发生的情况一样),以便在对齐约束下显示完整的图片高度。

切换源代码显示
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>文本</del>
'''top:''' [[File:Example.jpg|20px|top]] [[File:Example.jpg|40px|top]] [[File:Example.jpg|100px|top]]
<del>文本</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>文本</del>
'''text-top:''' [[File:Example.jpg|20px|text-top]] [[File:Example.jpg|40px|text-top]] [[File:Example.jpg|100px|text-top]]
<del>文本</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>文本</del>
<sup>'''super:'''</sup> [[File:Example.jpg|20px|super]] [[File:Example.jpg|40px|super]] [[File:Example.jpg|100px|super]]
<del>文本</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>文本</del>
'''baseline:''' [[File:Example.jpg|20px|baseline]] [[File:Example.jpg|40px|baseline]] [[File:Example.jpg|100px|baseline]]
<del>文本</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>文本</del>
<sub>'''sub:'''</sub> [[File:Example.jpg|20px|sub]] [[File:Example.jpg|40px|sub]] [[File:Example.jpg|100px|sub]]
<del>文本</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>文本</del>
'''default:''' [[File:Example.jpg|20px]] [[File:Example.jpg|40px]] [[File:Example.jpg|100px]]
<del>文本</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>文本</del>
'''middle:''' [[File:Example.jpg|20px|middle]] [[File:Example.jpg|40px|middle]] [[File:Example.jpg|100px|middle]]
<del>文本</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>文本</del>
'''text-bottom:''' [[File:Example.jpg|20px|text-bottom]] [[File:Example.jpg|40px|text-bottom]] [[File:Example.jpg|100px|text-bottom]]
<del>文本</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>文本</del>
'''bottom:''' [[File:Example.jpg|20px|bottom]] [[File:Example.jpg|40px|bottom]] [[File:Example.jpg|100px|bottom]]
<del>文本</del></u></span></p>

为了更清楚地显示对齐的结果,文本块加上了上划线和下划线,字体大小增加至 200%,并且段落块具有窄边框轮廓;此外还对齐了不同大小的图片:

文本 top: Example.jpg Example.jpg Example.jpg 文本

文本 text-top: Example.jpg Example.jpg Example.jpg 文本

文本 super: Example.jpg Example.jpg Example.jpg 文本

文本 baseline: Example.jpg Example.jpg Example.jpg 文本

文本 sub: Example.jpg Example.jpg Example.jpg 文本

文本 default: Example.jpg Example.jpg Example.jpg 文本

文本 middle: Example.jpg Example.jpg Example.jpg 文本

文本 text-bottom: Example.jpg Example.jpg Example.jpg 文本

文本 bottom: Example.jpg Example.jpg Example.jpg 文本

注意:

  1. 图片按照“middle”方式竖直对齐的位置(也是默认值)通常位于小写字母“x”的高度和文本基线的中点(图片竖直方向上的中心位置将对齐于此,通常这也是删除线的位置);但不是指字体行高(也就是“text-top”和“text-bottom”之间的间隔)的中点;字体高度包括:
    • 额外的行间距,通常被等分为两个行边界(此处为 0.5em,与 200% 的行高相对应),分别位于字体高度之外的上下两边。
    • 可能由上标和下标而导致的额外的行间距。
  2. 然而,如果图片的高度会导致其顶部或底部将超出文本的正常行高,中点的位置将在顶部和/或底部的边距增加之后作出调整,以便更适合图片和对齐。并且,所有的图片(包括那些高度较小的)都会在调整后的中点位置上竖直居中(每行中较高字体决定了该行的有效行高)。
  3. “text-top”和“text-bottom”的对齐位置也排除了上标和下标导致的额外的行间距,但包括了行高中定义的行间距。
  4. “top”和“bottom”的对齐位置包括了所有这些额外的行间距(包括上标和下标——如果它们显示在同一行中的话)。当图片的对齐方式限制了图片不能超出正常的行间距、并且图片没有使用绝对位置时,图片将使“top(顶部)”和“bottom(底部)”的位置也做出相应调整(就像上标和下标那样),因此最终显示的有效行高也会变得更大。
  5. “Underline(下划线)”、“overline(上划线)”以及“overstrike(删除线)”文本修饰的位置将位于这两个界限之间,并且还可能与使用的字体类型和高度有关(在某些浏览器中可能还会考虑到上标和下标的样式,但通常这些样式都会被忽略,也不会影响到这些修饰的位置);因此这些修饰通常都不会影响图片相对于文本的竖直位置。

阻止文本环绕[edit | edit source]

有时需要阻止文本(或其它嵌入式的非浮动图片)环绕在另一张浮动图片周围。出于 Web 浏览器的屏幕分辨率等原因,位于图片右侧的文本可能会导致一个段落标题(例如,== My Header ==)出现在图片右侧,而不是像用户所期望的那样位于其下方。要阻止文本环绕,可以在要显示在浮动图片下方的文本的开始处放置 <br clear=all>(或者你也可以写 <div style="clear:both"></div>)。(还可以将包含浮动图片的段落用 <div style="overflow:hidden">…</div> 包裹起来,这样就可以在 div 元素内部清除所有的浮动属性,而不必添加一个空行。)

所有以块方式显示的图片(包括非浮动且居中的图片,左对齐—或右对齐—的浮动图片,以及用有边框缩略图方式显示的浮动图片)都会隐式地中断同一行中的前后文字(结束图片之前的当前文本块,然后为图片之后的文本创建一个新段落)。随后它们会在竖直方向上整齐地排列在左侧或右侧的对齐边界上(或者,对于居中的图片来说,对齐在这两边的中线上)。

更改默认的链接目标[edit | edit source]

下表中显示了如何修改链接目标(默认指向图片描述页面)或如何移除它。修改链接并不会改变上一节中描述的格式。

警告:

你所在的维基上的许可协议有可能不允许你移除所有指向描述页面的链接,因为按照要求,描述页面上显示了作者的贡献、版权声明、适用的许可条款,或是相关图片的更完整的描述(包括它的修改历史)。
如果你修改或者移除了一张图片的链接目标,那么你应该在页面的其它地方提供一个指向此描述页面的明确的链接,或是显示出版权及作者声明,以及一个指向适用许可条款的链接,如果它们与页面中的其它内容所适用的条款不同的话。
你的维基中的策略有可能会限制使用其它链接参数,甚至禁止嵌入的媒体文件使用其它链接参数(这种情况下,链接参数将被忽略),或者仅当认证用户或管理员确认之后才能接受它们。

显示一个图片画廊[edit | edit source]

画廊语法[edit | edit source]

<gallery> 标签制作一个由缩略图组成的画廊是很简单的。语法是:

<gallery>
File:文件名.扩展名|标题|alt=替代语言
File:文件名.扩展名|标题|alt=替代语言
{...}
</gallery>

注意:当图片代码包括在画廊标签中时,是不必用方括号将其包裹起来的。

标题是可选的,也可包含维基链接或者其它格式。

如果图片位于 File 命名空间中,则可以省略 File: 前缀。

例如:

<gallery>
File:Example.jpg|第一项
File:Example.jpg|链接到[[Help:Contents/zh|帮助:目录]]
File:Example.jpg
File:Example.jpg|alt=一幅包含花朵的示例图片。
File:Example.jpg|''斜体的标题''
File:Example.jpg|位于页面“{{PAGENAME}}”
</gallery>

会被格式化为:

可选的画廊属性[edit | edit source]

gallery 标记自身接受几个额外参数,可通过成对的“名称-值”来指定:

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

示例:

代码:

<gallery widths=60px heights=60px perrow=7 caption="漂亮的向日葵">
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
</gallery>

结果:

链接行为[edit | edit source]

默认情况下,图片会链接到其自身的描述页面。可使用“link=”选项改变这种行为,以链接到另一个页面或网站,或关闭图片的链接行为。或者,你可以创建一个文本链接,以链接到图片的描述页面或图片自身。

链接到图片文件描述页面的文本链接[edit | edit source]

通过在 File: 之前加上一个冒号:),可以链接到图片文件的描述页面:

File:Example.jpg

[[:File:Example.jpg]]

向日葵

[[:File:Example.jpg|向日葵]]

链接到实际图片的文本链接[edit | edit source]

要使文本链接指向实际图片,可使用伪命名空间“Media”:

Media:Example.jpg

[[Media:Example.jpg]]

向日葵

[[Media:Example.jpg|向日葵]]

(如果你得到的是指向图片描述页面的文本链接,而不是实际图片的链接,那么可能是由于你的维基的命名空间配置与这个特性不兼容而引起的?)

显示图片并链接到另一个页面或网站[edit | edit source]

用“link=”选项将图片链接到另一个页面或网站:

点击下面的图片可将你带到 MediaWiki

[[File:Wiki.png|50px|link=MediaWiki]]

Wiki.png

点击下面的图片可将你带到 example.com

[[File:Wiki.png|50px|link=http://example.com]]

Wiki.png

显示图片并关闭链接[edit | edit source]

使用没有赋值的“link=”选项可以完全关闭链接;下面的图片不是一个链接:

[[File:Wiki.png|50px|link=]]

Wiki.png

必要条件[edit | edit source]

在你的页面中使用图片之前,你所在的维基的系统管理员必须已经启用了文件上传,并且必须有某位用户上传了文件。系统管理员还可以将维基设置为接受外部仓库中的文件,如:公共维基媒体。如果要实现在服务器端调整图片大小,还需要配置一个缩放程序(例如:GD2,ImageMagick 等等)。

其它网站上的文件[edit | edit source]

你可以用与链接外部页面相同的方法链接到一个外部文件。使用这些语法时,图片并不会被显示出来,只有链接到此图片的链接文本会被显示出来。

[http://url.for/some/image.png]

或者,显示不同的文本:

[http://url.for/some/image.png 此处是链接文本]

可以在此处显示的文本中使用其它的 MediaWiki 标记或 HTML/CSS 格式(用于嵌入的元素)。但不能使用嵌入链接,否则会破环正在描述的链接:

[http://www.example.com/some/image.png 这是'''<del>富文本</del>'''''<ins>链接</ins>''示例。]

将显示为:这是富文本链接示例。

如果在你的维基中允许的话(参见 Manual:$wgAllowExternalImages),你还可以嵌入外部图片。只需简单地插入图片的 URL 即可:

http://url.for/some/image.png

目前,嵌入的图片还不能被缩放,但可以通过前后的 MediaWiki 标记或 HTML/CSS 代码来格式化它们。

如果维基中没有启用这个选项,图片将不会被嵌入,而是显示为一个指向外部网站的文本链接,就像上面那样。

显示一张网站屏幕截图的缩略图[edit | edit source]

要在 MediaWiki 中显示一张网站屏幕截图的缩略图,你需要写一个完整的外部链接,并指向由 www.robothumb.com 提供的图片(以“.jpg”结尾)。

你还需要将 LocalSettings 中的 Manual:$wgAllowExternalImages 设置为 true。

语法很简单:

http://www.robothumb.com/src/[URL]@[大小](.jpg)

[URL] 是要显示的页面的 URL,例如: http://www.example.com

参数[大小]的有效值为:

  • 100x75
  • 120x90
  • 160x120
  • 180x135
  • 240x180
  • 320x240
  • 560x420
  • 640x480
  • 800x600

示例:

http://www.robothumb.com/src/http://example.com@160x120.jpg

包含一个外部链接:

[http://example.com http://www.robothumb.com/src/http://example.com@160x120.jpg]

注意在第一个 http://example.com 之后必须有一个空格。

你可以在此处查看示例。

語: English  • العربية • català • čeština • Deutsch • Zazaki • español • suomi • français • Bahasa Indonesia • italiano • 日本語 • 한국어 • português • português do Brasil • română • русский • slovenčina • Tiếng Việt • 中文