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

✏

站內簽名相關方針見Project:討論區管理方針#簽名；簽名使用相關幫助文檔見Help:簽名使用指南。

閱讀本用戶子頁面的任何人都可以參與編輯。

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

前言

出於設計角度，注意到Project:討論區管理方針#簽名下4.1一條的規定：

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

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

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

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

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

當然，如果您清楚自己想要實現效果的HTML及CSS等內容如何書寫，則最好直接書寫這些內容。

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

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

更改連結顏色

比如，現在我想給自己的簽名中指向用戶頁的連結換成紫色，根據上面的分析，我不能直接寫成{{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|GuoPC]]

顯示效果

GuoPC

從這裡就能看出來，如果我希望對這個連結添加一些樣式，那麼就可以直接在style里添加。比如再加個背景色：[[User:GuoPC|GuoPC]]。

顯示效果

GuoPC

添加文字描邊

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

[[User:GuoPC|GuoPC]]

→[[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]]

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

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

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

→[[User:GuoPC|GuoPC]]

顯示效果

GuoPC

添加頭像

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

保存之後可以看到，上面的wiki文本變成了類似於下面的形式：<img src="https://commons.moegirl.org.cn/extensions/Avatar/avatar.php?user=GuoPC" style="width:100%;height:auto;" />

顯示效果

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

允許使用不多於2個位於萌娘百科及其姊妹站點的圖像（通常以<img>標籤形式引用img.moegirl.org.cn開頭的外鏈）；

由於技術限制，引用的圖片的原始尺寸最長邊不超過128px、實際顯示尺寸最長邊不超過50px，且不影響頁面排版；

6.1條這裡說到要用img.moegirl.org.cn開頭的外鏈，但是上面方法裡的圖像是以commons.moegirl.org.cn開頭的。實際上上面方法中的圖像在瀏覽器中查看會發現跳轉到了img.moegirl.org.cn開頭的外鏈。如果不放心，可以將跳轉後的連結複製過來替換。

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

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

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

邊框: <img src="https://commons.moegirl.org.cn/extensions/Avatar/avatar.php?user=GuoPC" style="width:100%;height:auto;" />
陰影: <img src="https://commons.moegirl.org.cn/extensions/Avatar/avatar.php?user=GuoPC" style="width:100%;height:auto;" />
圓角: <img src="https://commons.moegirl.org.cn/extensions/Avatar/avatar.php?user=GuoPC" style="width:100%;height:auto;" />

1 - 邊框

2 - 陰影

3 - 圓角

添加其他語言文本

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

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

[[Special:Contribs/GuoPC|-{浅き夢見じ　酔ひもせず}-]]

顯示效果

浅き夢見じ　酔ひもせず

漸變顏色文本

替換引用{{Gradient Text}}即可，當然，需要去掉其中的注釋以及沒有使用到的內容。比如：

{{subst:Gradient Text|left,red,blue|GuoPC}}

→background-clip:text;-webkit-box-decoration-break:clone;box-decoration-break:;-webkit-text-fill-color:transparent;text-fill-color:transparent">GuoPC

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

顯示效果

GuoPC

添加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>

顯示效果

奇跡（きせき）

使用摺疊

建議查閱Help:摺疊#自定義摺疊按鈕後再閱讀本章節內容。

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

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

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

初級版

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

 內容  內容

您可以使用一個標籤作為觸發摺疊的按鈕，指定其class為mw-customtoggle-自定义名字，即；
然後將您的用戶頁連結或其他您喜歡的內容放在另一個標籤中作為被摺疊內容，指定其class為mw-collapsible mw-collapsed、id為mw-customcollapsible-自定义名字，即。
注意，這兩處的自定义名字需保持一致，且務必為英文或數字。
請看下方#加個ID？繼續設計。

示例：

'''在下羊羽君''' （ [[用戶:在下羊羽君|主頁]] • [[用戶討論:在下羊羽君|討論]] • [[用戶討論:在下羊羽君/Signature|簽名版]] ）

顯示效果

在下羊羽君 （主頁 • 討論 • 簽名版）

進階版

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

 內容  內容  內容

此時我們需要再加一個標籤。與默認摺疊的內容的區別是，此處不需要mw-collapsed的class。
注意，這三處的自定义名字需保持一致，且務必為英文或數字。
請看下方#加個ID？繼續設計。

示例：

'''在下羊羽君''''''Official'''（ [[用戶:在下羊羽君|主頁]] • [[用戶討論:在下羊羽君|討論]] • [[用戶討論:在下羊羽君/Signature|簽名版]] ）

顯示效果

在下羊羽君Official（主頁 • 討論 • 簽名版）

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

加個ID？

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

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

使用{{LOCALTIMESTAMP}}：

在自定义名字中加入{{LOCALTIMESTAMP}}，保證ID中包含每次簽名時的時間戳作為您這次簽名的唯一ID。當然了，記得使用subst:對其進行替換引用，同時防止保存時就發生替換從而失效，可考慮寫成{{ {{{|subst:}}}LOCALTIMESTAMP}}。

初級版  內容  內容

進階版  內容  內容  內容

示例：

'''在下羊羽君''' （ [[用戶:在下羊羽君|主頁]] • [[用戶討論:在下羊羽君|討論]] • [[用戶討論:在下羊羽君/Signature|簽名版]] ）

顯示效果

在下羊羽君 （主頁 • 討論 • 簽名版）

'''在下羊羽君''''''Official'''（ [[用戶:在下羊羽君|主頁]] • [[用戶討論:在下羊羽君|討論]] • [[用戶討論:在下羊羽君/Signature|簽名版]] ）

顯示效果

在下羊羽君Official（主頁 • 討論 • 簽名版）

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

其他事項

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

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

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

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

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

2.1條規定簽名應

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

還請在設計簽名時注意。

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

目次

前言

更改連結顏色

添加文字描邊

添加頭像

添加其他語言文本

漸變顏色文本

添加ruby

使用摺疊

初級版

進階版

加個ID？

其他事項

導覽選單