使用者:GuoPC/簽名設計那點事

在討論版以及其他各種討論頁逛（摸魚）得多了，發現有不同用戶做出來的各種高級或者有特色的簽名。建立本頁面主要是想來淺談一下簽名設計時需要注意的事項以及一些技巧，也希望能幫助有設計需要的讀者更快設計出有自己風格的簽名。

前言

注意到Project:討論區管理方針#簽名下2.1條規定簽名應

1. 包含指向您的用戶頁、用戶討論頁和（或）貢獻頁的內部連結（以上三個中的一個或多個）；

在設計時請牢記這點。另出於設計角度，注意到4.1第一條的規定：

1. 不應存在未使用替換引用（subst:）而直接嵌入的任何頁面；

什麼是「替換引用」？看看Help:替換引用裡是怎麼定義的：

替換引用是頁面保存時維基文本的自動轉換，以使維基文本引用一個或多個模板、變量或解析器函數。

作為基礎知識，這裡我想強調的是：簽名裡不能含有沒有被替換（或者稱為「展開」）的模板。對於展開模板，有下面幾種方法：

1. 使用subst:，顯而易見；
2. 使用Special:展開模板：在「輸入wiki文本」下方的文本框中輸入尚未被展開的wiki文本即可。

另外，由於可能會涉及到HTML等相關內容，如果在閱讀過程中有任何不理解的詞語或代碼片段，可考慮使用搜尋引擎或查閱專門網站，如MDN Web Docs。

同時，建議在Help:沙盒或者個人沙盒頁測試自己設計的簽名，確認無誤後填入參數設置的「新簽名」一欄中，並勾選「將簽名視為維基文本（不自動生成連結）」，或者參考#其他事項單獨創建頁面存放簽名。

此外，為方便檢查設計過程中可能出現的語法錯誤，建議開啟編輯代碼高亮小工具，並在MoeSkin皮膚側欄「自定義工具」下（Vector皮膚搜索框左側的「更多」中）的「CodeMirror插件」中勾選「語法檢查」並保存。對於Wikiplus用戶，還建議開啟Wikiplus代碼高亮小工具。

下面是幾個常見的簽名設計需求。

更改連結顏色

比如，現在我想給自己的簽名中指向用戶頁的連結換成紫色，根據上面的分析，我不能直接寫成{{coloredlink|purple|User:GuoPC|GuoPC}}或者[[User:GuoPC|{{color|purple|GuoPC}}]]。而應當寫成{{subst:coloredlink|purple|User:GuoPC|GuoPC}}或者[[User:GuoPC|{{subst:color|purple|GuoPC}}]]。

點擊「顯示更改」之後可以看到，上面的wiki文本變成了類似於下面的形式：[[User:GuoPC|<span style="color:purple;">GuoPC</span>]]

從這裡就能看出來，如果我希望對這個連結添加一些樣式，那麼就可以直接在style裡添加。比如再加個背景色：[[User:GuoPC|<span style="color:purple;background:cornsilk;">GuoPC</span>]]。

添加文字描邊或發光

文字描邊

考慮替換引用{{文字描邊}}實現，注意到模板需放在style屬性中使用。

[[User:GuoPC|<span style="color:white;{{subst:文字描邊|salmon}}>GuoPC</span>]]

→[[User:GuoPC|<span style="color:white;text-shadow:1px 0 salmon, 0 1px salmon, -1px 0 salmon, 0 -1px salmon, {{#expr:1/2}}px {{#expr:1/2}}px salmon, {{#expr:1/2}}px -{{#expr:1/2}}px salmon, -{{#expr:1/2}}px {{#expr:1/2}}px salmon, -{{#expr:1/2}}px -{{#expr:1/2}}px salmon;">GuoPC</span>]]

注意到Project:討論區管理方針#簽名下4.3條的規定：

3. 除不帶參數和非高開銷的系統變量外，不應包含任何魔術字；

發現替換引用後的代碼仍包含解析器函數{{#expr:}}，屬於魔術字，不符合要求，可考慮再對其使用subst:（即{{subst:#expr:1/2}}）或直接複製出其結果0.5（實際上直接寫.5效果相同，還能減少長度）。再刪去不必要的空格後得到：

→[[User:GuoPC|<span style="color:white;text-shadow:1px 0 salmon,0 1px salmon,-1px 0 salmon,0 -1px salmon,.5px .5px salmon,.5px -.5px salmon,-.5px .5px salmon,-.5px -.5px salmon;">GuoPC</span>]]

文字外發光

替換引用{{文字外發光}}即可，實際上同樣是利用text-shadow屬性。

[[User:GuoPC|{{subst:文字外發光|GuoPC|發光寬度=.8em|文字顏色=steelblue|發光顏色=lightsteelblue}}]]

→[[User:GuoPC|<span style="color:steelblue;text-shadow:1px 1px .8em lightsteelblue,1px -1px .8em lightsteelblue,-1px 1px .8em lightsteelblue,-1px -1px .8em lightsteelblue;">GuoPC</span>]]

添加頭像

現在知道{{User Avatar small}}這個模板用於顯示頭像，事情就簡單多了。只需要{{subst:User Avatar small|GuoPC}}即可。

保存之後可以看到，上面的wiki文本變成了類似於下面的形式：<span style="display:inline-block;vertical-align:middle;border-radius:50%;overflow:hidden;box-shadow:1px 1px 2px 0px #0000008C;width:2.5em;height:auto;"><img src="http://commons.moegirl.tw/extensions/Avatar/avatar.php?user=GuoPC" style="width:100%;height:auto;" /></span>

注意到Project:討論區管理方針#簽名下6.1及6.2條的規定：

1. 允許使用不多於2個位於萌娘百科及其姊妹站點的圖像（通常以<img>標籤形式引用img.moegirl.tw開頭的外鏈）；
2. 由於技術限制，引用的圖片的原始尺寸最長邊不超過128px、實際顯示尺寸最長邊不超過50px，且不影響頁面排版；

6.1條這裡說到要用img.moegirl.tw開頭的外鏈，但是上面方法裡的圖像是以commons.moegirl.tw開頭的。雖然使用以commons.moegirl.tw開頭的連結並不違反討論區管理方針，但考慮到共享站WAF的存在，還是強烈建議進行替換。實際上，在瀏覽器中查看上面方法中得到的圖像連結，會發現跳轉到了img.moegirl.tw開頭的外鏈，這裡將跳轉後的連結複製過來替換。跳轉後的連結形式應類似於http://img.moegirl.tw/common/avatars/一串ID/128.png（實際上,這裡的「一串ID」就是你的用戶ID）。

對於6.2條，「原始尺寸」即在瀏覽器中查看該圖像的尺寸，上傳的頭像默認尺寸是128px×128px；「實際顯示尺寸」即在簽名中指定的尺寸。可以看到上面方法中指定的大小是2.5em×2.5em，請看下面的示意圖：

示意圖外部陰影是規定的圖像最大顯示尺寸（50px），左下的小框則是上面圖像的顯示尺寸（2.5em），符合規定。

現在我們可以修改和添加頭像的樣式了。比如：

邊框

<span style="display:inline-block;vertical-align:middle;border:#ddb463 3px solid;border-radius:50%;overflow:hidden;width:2.5em;height:auto;"><img src="http://img.moegirl.tw/common/avatars/572538/128.png" style="width:100%;height:auto;" /></span>

陰影

<span style="display:inline-block;vertical-align:middle;border-radius:50%;overflow:hidden;box-shadow:0 0 8px 0 #d95e3d99;width:2.5em;height:auto;"><img src="http://img.moegirl.tw/common/avatars/572538/128.png" style="width:100%;height:auto;" /></span>

圓角

<span style="display:inline-block;vertical-align:middle;border-radius:8px;width:2.5em;height:auto;"><img src="http://img.moegirl.tw/common/avatars/572538/128.png" style="width:100%;height:auto;" /></span>

添加其他語言文本

對於日文，可以直接替換引用{{lj}}。對於其他語言文本，鑑於{{lang}}模板本身較複雜，使用<span lang="語言標籤"></span>即可實現，參見Help:語言標籤。

出於對繁簡轉換的考慮，在涉及到日文、朝鮮文/韓文中的漢字，或者特意強調中文的簡體或繁體時，應使用-{}-防止被轉換，參見Help:繁簡轉換和Help:日語。例如：

[[Special:Contribs/GuoPC|<span lang="ja">-{淺き夢見じ　酔ひもせず}-</span>]]

漸變顏色文本

替換引用{{Gradient Text}}，保證效果正常實現的基礎上稍作精簡即可。比如：

{{subst:Gradient Text|90deg,red,blue|GuoPC}}

→<span title="" style="background:-webkit-linear-gradient(90deg,red,blue);background:linear-gradient(90deg,red,blue);-webkit-background-clip:text;background-clip:text;-webkit-box-decoration-break:clone;box-decoration-break:;-webkit-text-fill-color:transparent;text-fill-color:transparent;">GuoPC</span>

→<span style="background:linear-gradient(90deg,red,blue);-webkit-background-clip:text;background-clip:text;-webkit-box-decoration-break:clone;-webkit-text-fill-color:transparent;">GuoPC</span>

添加ruby

替換引用{{RawRuby}}即可。比如：

{{subst:RawRuby|閒逛|摸魚}}

→<ruby>閒逛<rp>（</rp><rt>摸魚</rt><rp>）</rp></ruby>

感覺上方文字有些小了，可以添加樣式：

<ruby>閒逛<rp>（</rp><rt style="font-size:.75em;">摸魚</rt><rp>）</rp></ruby>

對於日文等，與前文#添加其他語言文本的操作類似，指定lang屬性並選擇性添加-{}-即可。比如：

<ruby lang="ja">-{奇跡}-<rp>（</rp><rt style="font-size:.75em;">きせき</rt><rp>）</rp></ruby>

使用摺疊

簽名加了顏色之後確實更好看了，但一條連結孤零零地在那裡總感覺還是太單調、沒意思？不如再來點好玩的互動設計吧！

由於簽名方針之規定，不能用外部樣式表來給您的簽名實現諸如:hover、:active等樣式效果？

使用摺疊吧！請看以下內容：

初級版

關於摺疊，您在站內最常見到的或許是{{Hide}}模板，它一般由摺疊標題、摺疊按鈕和被摺疊內容組成。在簽名設計中使用摺疊也考慮類似的結構。

示例：

<span class="mw-customtoggle-ZXYYJsign" style="color:#FFA500;">'''在下羊羽君'''</span><span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ZXYYJsign"> （ [[用戶:在下羊羽君|主頁]] • [[用戶討論:在下羊羽君|討論]] • [[用戶討論:在下羊羽君/Signature|簽名版]] ）</span>

進階版

以上效果是將一部分內容「從無到有」展示出來。那想要摺疊一部分內容的同時展示出另一部分內容呢？

示例：

<span class="mw-customtoggle-ZXYYJsign" style="color:#FFA500;">'''在下羊羽君'''</span><span class="mw-collapsible" id="mw-customcollapsible-ZXYYJsign">'''Official'''</span><span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ZXYYJsign">（ [[用戶:在下羊羽君|主頁]] • [[用戶討論:在下羊羽君|討論]] • [[用戶討論:在下羊羽君/Signature|簽名版]] ）</span>

您可以不斷按下按鈕，看著它們開開合合，其實也挺解壓的

加個ID？

相信您一定已經發現，當您按下上面其中一個簽名的按鈕時，另一個也會有所反應。如果一個頁面中多處您的簽名同時展開/收起，那場面一定蔚為壯觀。這是因為上面兩個簽名的摺疊按鈕和被摺疊內容的自定義名字處都指定為ZXYYJsign。它們的摺疊ID相同，自然都受具有同一ID的摺疊按鈕控制。

如果不想這樣的情況發生，您需要保證每次簽名的ID與之前的均不相同。好在我們還有魔術字來幫忙。

示例：

<span class="mw-customtoggle-ZXYYJsign{{ {{{|subst:}}}LOCALTIMESTAMP}}" style="color:#FFA500;">'''在下羊羽君'''</span><span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ZXYYJsign{{ {{{|subst:}}}LOCALTIMESTAMP}}"> （ [[用戶:在下羊羽君|主頁]] • [[用戶討論:在下羊羽君|討論]] • [[用戶討論:在下羊羽君/Signature|簽名版]] ）</span>

<span class="mw-customtoggle-ZXYYJsign{{ {{{|subst:}}}LOCALTIMESTAMP}}" style="color:#FFA500;">'''在下羊羽君'''</span><span class="mw-collapsible" id="mw-customcollapsible-ZXYYJsign{{ {{{|subst:}}}LOCALTIMESTAMP}}">'''Official'''</span><span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ZXYYJsign{{ {{{|subst:}}}LOCALTIMESTAMP}}">（ [[用戶:在下羊羽君|主頁]] • [[用戶討論:在下羊羽君|討論]] • [[用戶討論:在下羊羽君/Signature|簽名版]] ）</span>

請注意，以上做法原理是以提交編輯時的時間戳作為ID的一部分。如果在一次編輯中有不止一處簽名，它們會使用相同的時間戳，導致這幾處簽名的ID相同，點擊任一簽名時會使這些簽名同時展開/收起。所以請每次僅進行一次簽名。

其他事項

由於Special:參數設置中輸入新簽名的文本框有字符長度限制，所以如果設計出來的簽名過長，可以考慮單獨建立用戶子頁面來存放簽名，比如我的簽名存放在User:GuoPC/Signature。

您可以在下面的輸入框中填入要存放簽名的用戶子頁面的名稱（不需要User:您的用戶名/），然後點擊下面的「創建頁面」按鈕即可創建：

在新創建的頁面設計好籤名後，再在Special:參數設置中新簽名一欄輸入{{subst:頁面名稱}}，並勾選「將簽名視為維基文本（不自動生成連結）」。

當然，Project:討論區管理方針#簽名下5.4條規定：

4. 原始碼不應多於1000位元組，且實際顯示長度不影響界面排版；

還請在設計簽名時注意。