User: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条规定签名应

包含指向您的用户页、用户讨论页和（或）贡献页的内部链接（以上三个中的一个或多个）；

还请在设计签名时注意。

User:GuoPC/签名设计那点事

目录

前言

更改链接颜色

添加文字描边

添加头像

添加其他语言文本

渐变颜色文本

添加ruby

使用折叠

初级版

进阶版

加个ID？

其他事项

导航菜单