在讨论版以及其他各种讨论页
目录
前言
注意到Project:讨论区管理方针#签名下2.1条规定签名应
- 包含指向您的用户页、用户讨论页和（或）贡献页的内部链接（以上三个中的一个或多个）；
在设计时请牢记这点。另出于设计角度，注意到4.1第一条的规定：
- 不应存在未使用替换引用（
subst:）而直接嵌入的任何页面；
什么是“替换引用”？看看Help:替换引用里是怎么定义的：
替换引用是页面保存时维基文本的自动转换，以使维基文本引用一个或多个模板、变量或解析器函数。
作为基础知识，这里我想强调的是：签名里不能含有没有被替换（或者称为“展开”）的模板。对于展开模板，有下面几种方法：
- 使用
subst:，显而易见； - 使用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条的规定：
- 除不带参数和非高开销的系统变量外，不应包含任何魔术字；
发现替换引用后的代码仍包含解析器函数{{#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="https://commons.moegirl.org.cn/extensions/Avatar/avatar.php?user=GuoPC" style="width:100%;height:auto;" /></span>
显示效果
注意到Project:讨论区管理方针#签名下6.1及6.2条的规定：
- 允许使用不多于2个位于萌娘百科及其姊妹站点的图像（通常以
<img>标签形式引用img.moegirl.org.cn开头的外链）；- 由于技术限制，引用的图片的原始尺寸最长边不超过128px、实际显示尺寸最长边不超过50px，且不影响页面排版；
6.1条这里说到要用img.moegirl.org.cn开头的外链，但是上面方法里的图像是以commons.moegirl.org.cn开头的。虽然使用以commons.moegirl.org.cn开头的链接并不违反讨论区管理方针，但考虑到共享站WAF的存在，还是强烈建议进行替换。实际上，在浏览器中查看上面方法中得到的图像链接，会发现跳转到了img.moegirl.org.cn开头的外链，这里将跳转后的链接复制过来替换。跳转后的链接形式应类似于https://img.moegirl.org.cn/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="https://img.moegirl.org.cn/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="https://img.moegirl.org.cn/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="https://img.moegirl.org.cn/common/avatars/572538/128.png" style="width:100%;height:auto;" /></span>
1 - 边框
2 - 阴影
3 - 圆角
添加其他语言文本
对于日文，可以直接替换引用{{lj}}。对于其他语言文本，鉴于{{lang}}模板本身较复杂，使用<span lang="语言标签"></span>即可实现，参见Help:语言标签。
出于对繁简转换的考虑，在涉及到日文、朝鲜文/韩文中的汉字，或者特意强调中文的简体或繁体时，应使用-{}-防止被转换，参见Help:繁简转换和Help:日语。例如：
[[Special:Contribs/GuoPC|<span lang="ja">-{浅き夢見じ 酔ひもせず}-</span>]]
显示效果
渐变颜色文本
替换引用{{Gradient Text}}即可，当然，需要去掉其中的注释以及没有使用到的内容。比如：
{{subst:Gradient Text|left,red,blue|GuoPC}}
→<span
title="" style="background:-webkit-linear-gradient(left,red,blue);-webkit-background-clip:text;<!--background:linear-gradient({{{1}}});-->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:-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</span>
显示效果
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>
显示效果
奇跡
使用折叠
签名加了颜色之后确实更好看了，但一条链接孤零零地在那里总感觉还是太单调、没意思？不如再来点好玩的交互设计吧！
由于签名方针之规定，不能用外部样式表来给您的签名实现诸如:hover、:active等样式效果？
使用折叠吧！请看以下内容：
初级版
关于折叠，您在站内最常见到的或许是{{Hide}}模板，它一般由折叠标题、折叠按钮和被折叠内容组成。在签名设计中使用折叠也考虑类似的结构。
<!-- 触发按钮 -->
<span class="mw-customtoggle-自定义名字">内容</span>
<!-- 默认折叠的内容 -->
<span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-自定义名字">内容</span>
您可以使用一个<span>标签作为触发折叠的按钮，指定其class为mw-customtoggle-自定义名字，即<span class="mw-customtoggle-自定义名字"></span>；
然后将您的用户页链接或其他您喜欢的内容放在另一个<span>标签中作为被折叠内容，指定其class为mw-collapsible mw-collapsed、id为mw-customcollapsible-自定义名字，即<span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-自定义名字"></span>。
注意，这两处的自定义名字需保持一致，且务必为英文或数字。
请看下方#加个ID？继续设计。
示例：
<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-自定义名字">内容</span>
<!-- 默认未折叠的内容 -->
<span class="mw-collapsible" id="mw-customcollapsible-自定义名字">内容</span>
<!-- 默认折叠的内容 -->
<span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-自定义名字">内容</span>
此时我们需要再加一个<span>标签。与默认折叠的内容的区别是，此处不需要mw-collapsed的class。
注意，这三处的自定义名字需保持一致，且务必为英文或数字。
请看下方#加个ID？继续设计。
示例：
<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与之前的均不相同。好在我们还有魔术字来帮忙。
使用{{LOCALTIMESTAMP}}：
在自定义名字中加入{{LOCALTIMESTAMP}}，保证ID中包含每次签名时的时间戳作为您这次签名的唯一ID。当然了，记得使用subst:对其进行替换引用，同时防止保存时就发生替换从而失效，可考虑写成{{ {{{|subst:}}}LOCALTIMESTAMP}}。
初级版
<!-- 触发按钮 -->
<span class="mw-customtoggle-自定义名字{{ {{{|subst:}}}LOCALTIMESTAMP}}">内容</span>
<!-- 默认折叠的内容 -->
<span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-自定义名字{{ {{{|subst:}}}LOCALTIMESTAMP}}">内容</span>
进阶版
<!-- 触发按钮 -->
<span class="mw-customtoggle-自定义名字{{ {{{|subst:}}}LOCALTIMESTAMP}}">内容</span>
<!-- 默认未折叠的内容 -->
<span class="mw-collapsible" id="mw-customcollapsible-自定义名字{{ {{{|subst:}}}LOCALTIMESTAMP}}">内容</span>
<!-- 默认折叠的内容 -->
<span class="mw-collapsible mw-collapsed" id="mw-customcollapsible-自定义名字{{ {{{|subst:}}}LOCALTIMESTAMP}}">内容</span>
示例：
<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条规定：
- 源代码不应多于1000字节，且实际显示长度不影响界面排版；
还请在设计签名时注意。