使用者:BearBin/InfoBox

文檔  

這個文檔嵌入自User:BearBin/用戶頁構成。

本文檔介紹如何在您自己的用戶頁中做出和我用戶頁一樣的效果。如果您懂一些HTML和CSS的基礎知識，也可以直接閱讀User:BearBin/style.css裡面的原始碼，放入自己的模板樣式表進行調用。如有疑問或建議，歡迎通過各類渠道向我諮詢。

本用戶頁及其使用的用戶頁模板主要依賴於User:BearBin/style.css設置樣式，你可以通過在用戶頁嵌入來使用其中的樣式，或者只要您在用戶頁內使用了本頁所介紹的任意模板之一後也無需再度嵌入此樣式表。

• 本頁最後更新時間：2023年1月02日18:24 (CST)。

基礎容器

我的用戶頁使用容器對各部分進行塊狀分割，並對各塊添加一定的樣式。如果想要使用，請複製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=右側}}

您可以在同一行多次使用此模板，它們會並列顯示、與文字一樣自動換行。

貢獻表

貢獻表沒有太大的必要製作成模板，因此如果您想要復刻此部分則需要使用模板樣式表。您可以直接在用戶頁嵌入或使用本頁面所介紹的任一模板，不會影響到您用戶頁的正常顯示。

嵌入樣式表後，在您的用戶頁按照以下格式寫入您的貢獻（或是其他您想寫的內容）：

<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請向我反饋。