User:GuoPC/签名设计那点事
在讨论版以及其他各种讨论页
前言
出于设计角度,注意到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|<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>]]
显示效果
添加头像
现在知道{{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
开头的。实际上上面方法中的图像在浏览器中查看会发现跳转到了img.moegirl.org.cn
开头的外链。如果不放心,可以将跳转后的链接复制过来替换。
对于6.2条,“原始尺寸”即在浏览器中查看该图像的尺寸,上传的头像默认尺寸是128px×128px;“实际显示尺寸”即在签名中指定的尺寸。可以看到上面方法中指定的大小是2.5em×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://commons.moegirl.org.cn/extensions/Avatar/avatar.php?user=GuoPC" 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://commons.moegirl.org.cn/extensions/Avatar/avatar.php?user=GuoPC" 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://commons.moegirl.org.cn/extensions/Avatar/avatar.php?user=GuoPC" 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字节,且实际显示长度不影响界面排版;
2.1条规定签名应
- 包含指向您的用户页、用户讨论页和(或)贡献页的内部链接(以上三个中的一个或多个);
还请在设计签名时注意。