置顶公告:【置顶】关于临时开启评论区所有功能的公告(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網站可能不同。縮略圖默認尺寸可以在登錄後在參數設置中修改。