用户:BearBin/InfoBox
本文档介绍如何在您自己的用户页中做出和我用户页一样的效果。如果您懂一些HTML和CSS的基础知识，也可以直接阅读User:BearBin/style.css里面的源代码，放入自己的模板样式表进行调用。如有疑问或建议，欢迎通过各类渠道向我咨询。
本用户页及其使用的用户页模板主要依赖于User:BearBin/style.css设置样式，你可以通过在用户页嵌入<templatestyles src="User:BearBin/style.css" />来使用其中的样式，或者只要您在用户页内使用了本页所介绍的任意模板之一后也无需再度嵌入此样式表。
- 本页最后更新时间：2023年1月02日18:24 (CST)。
基础容器
我的用户页使用容器对各部分进行块状分割，并对各块添加一定的样式。如果想要使用，请复制User:BearBin/style.css中“越改越窄的基础分块容器”和“目录”之间的代码（不含注释内容）至自己的模板样式表，然后嵌入到用户页使用即可。如果您不想另外创建自己的模板样式表，请在自己的用户页中加入如下代码：
<templatestyles src="User:BearBin/style.css"/>
然后即可在自己的用户页中使用如下代码进行分块：
<div class="bearbin-wrapper">
分块1内容
</div>
<div class="bearbin-wrapper">
分块2内容
</div>
...
- 请注意，我在设计时将容器内所有的内部和外部链接颜色进行了统一，如果您介意的话请直接使用模板样式表内的源代码而非嵌入。
信息栏
- 此部分对应的模板为{{User:BearBin/InfoBox}}。
明明可以用表格却非要用gird做的我是不是有什么毛病
您可以直接使用如下代码将其嵌入您的用户页中：
{{User:BearBin/InfoBox
|showscore=
|项目1=内容1
|项目2=内容2
|项目3=内容3
}}
其中，ShowScore用于控制是否显示编辑页面、总数和分数，默认显示，如果您不想显示则将其设置为no；项目n代表页面主体左栏内容，依序往下排列；内容n同理，为右侧内容。
例如，我的用户页信息栏源代码如下：
{{User:BearBin/InfoBox
|昵称=阿熊
|星座=射手座
|所属=[[Template:萌百视觉小说研究会|视研会]]
|状态={{UserStatus}}
}}
用户框
- 此部分对应的模板为{{User:BearBin/UserBox}}。
用户框的使用方式相对简单很多。源代码如下：
{{User:BearBin/UserBox|1=左侧|2=右侧}}
您可以在同一行多次使用此模板，它们会并列显示、与文字一样自动换行。
贡献表
贡献表没有太大的必要制作成模板，因此如果您想要复刻此部分则需要使用模板样式表。您可以直接在用户页嵌入<templatestyles src="User:BearBin/style.css"/>或使用本页面所介绍的任一模板，不会影响到您用户页的正常显示。
嵌入样式表后，在您的用户页按照以下格式写入您的贡献（或是其他您想写的内容）：
<div class="bearbin-contribution">
* a
** a1
** a1
** a1
* b
** b1
** b1<i></i>
** b1
* c
** c1
...
</div>
样式表内的内容会自动改变其中无序列表的布局和样式；在内容中添加一对空白的<i></i>标签则会自动生成一个“改”的下标。
- 请注意，本样式表内容仅支持二级无序列表，使用“#”开头的有序列表或者“;”开头的定义表没有额外样式支持，达不到它应有的效果。
签名版
签名版的样式构思逻辑和贡献表相似，用以下代码包裹您的有序列表（#开头）签名版即可：
<div class="bearbin-signboard">
#签名1
#签名2
#签名3
...
</div>
其实无序列表也能做到支持，但没必要（
歌曲框
- 此部分对应的模板为{{User:BearBin/MusicBox}}。
模板格式为：
{{User:BearBin/MusicBox
|1=播放框上方内容，比如我喜欢写<code>[[歌曲链接|歌手 - 歌曲]]</code>的格式，将其链接到对应歌曲条目。
|2=网易云音乐ID
|3=一句话评论
}}
此模板和用户框类似，可以一行显示多个，根据容器宽度自动换行。考虑到本模板相比用户框体积较大，我在模板样式表中加入了一部分支持flex布局的代码，您可通过如下格式使用：
<div class="bearbin-musiclist">
{{User:BearBin/MusicBox|1=|2=|3=}}
{{User:BearBin/MusicBox|1=|2=|3=}}
{{User:BearBin/MusicBox|1=|2=|3=}}
{{User:BearBin/MusicBox|1=|2=|3=}}
</div>
显示效果和我的用户页一致。
展廊
- 此部分对应的模板为{{User:BearBin/Showcase}}。
展柜的模板格式为：
{{User:BearBin/Showcase
|1=要链接向的页面
|2=上半
|3=下半
}}
其中，参数1可以留空，留空后的展框不会生成链接。
考虑到多个此模板并列时容易出现高低不一的情况，样式表中同样添加了调整并列展柜布局的代码，格式如下：
<div class="bearbin-hall">
{{User:BearBin/Showcase|1=|2=|3=}}
{{User:BearBin/Showcase|1=|2=|3=}}
{{User:BearBin/Showcase|1=|2=|3=}}
{{User:BearBin/Showcase|1=|2=|3=}}
</div>
在展柜上半使用图片时，图片的宽度会被自动调整为和展柜一致，因此您无需太过注意调用图片时的宽度，建议设置为160px（展柜宽度）或300px（萌百无水印的最大缩略图）。如果图片太高则请自行控制。
- 请注意：此模板的其他样式泛用性有待测试，如果遇到bug请向我反馈。