模板:橫排信息/doc
該模板用於橫向排列多個互為並列關係的事物之簡要信息,例如在作品主條目中羅列角色、場景、道具等。在一定程度上可以視為{{Main Characters Infolist}}等模板的替代品。該模板通過 模塊:Flexinfo 實現,一般情況下能保證可接受的加載性能。
該模板的特色在於自適應佈局。模板基於CSS flex佈局設計,每行排布的元素數量可根據屏幕寬度自行調整,因此在桌面端的寬屏和移動端的窄屏都可以實現較好的瀏覽體驗。
該模板格外適合用於不對稱的排版。例如,在排列作品角色時,可能會出現某些角色的介紹字數多,而另一些角色的介紹字數少的情況。在這種情況下,如統一採用相同尺寸的方格,那麼字數少的角色就會出現大面積的留白。使用本模板可自由調整每個單元的寬度,以改善排版整體的觀感。
如果圖片、文字的數量與格式比較統一,那麼本模板未必是最優解。可參考 比宇宙更遠的地方#登場人物 等案例,考慮使用基於CSS grid 佈局的設計。
主要參數
基本使用方法
{{横排信息 |item1 = <!-- 事物1的名称,例如角色名 --> |item1-text = <!-- 事物1的介绍正文 --> |item2 = <!-- 事物2的名称 --> |item2-text = <!-- 事物2的介绍正文 --> |... = <!-- 格式同事物1 --> }}
常用參數
{{横排信息 |color = <!-- 标题默认颜色,默认是浅蓝色 --> |width = <!-- 默认基础宽度,默认400px --> |item1 = <!-- 事物1的名称,例如角色名 --> |item1-width = <!-- 事物1的基础宽度,默认同width,见下文说明 --> |item1-grow = <!-- 事物1的宽度增益比例,默认为1,见下文说明 --> |item1-color = <!-- 事物1的标题颜色,默认同color --> |item1-icon = <!-- 事物1的头像,不填则不显示 --> |item1-alt = <!-- 事物1的副标题,显示为标题右侧的小字 --> |item1-cv = <!-- 在副标题处显示角色CV,如果写了副标题会覆盖此处的设定 --> |item1-text = <!-- 事物1的介绍正文 --> |item2 = <!-- 事物2的名称 --> |... = <!-- 其他格式同事物1 --> }}
上文中的基礎寬度指的是每個單元的最初設定寬度。當屏幕寬度較大時,多餘的寬度則會平均分配給每個單元。這時,可以通過設定「itemx-grow」來調整分配給每個單元的空間的比例。
嵌套使用
本模板支持嵌套,使用方法如下
{{横排信息 |item1 = <!-- 事物1的名称 --> |item1-width = <!-- 事物1的基础宽度 --> |item1-text = <!-- 事物1的介绍正文 --> |item2 = nest <!-- 嵌套时,此处仍要填写 --> |item2-width = <!-- 嵌套框架的初始宽度 --> |item2-nest = <!-- 嵌套时,需要把嵌套的子模板添加在itemx-nest处 --> {{横排信息 |nest = true <!-- 子模板需要写入“nest=true”,以便在排版留白方面做出一些调整 --> |item1 = <!-- 子模板事物1的名称 --> |item1-text = <!-- 子模板事物1的介绍正文 --> |item2 = <!-- 子模板事物2的名称 --> |item2-text = <!-- 子模板事物2的介绍正文 --> |... = <!-- 下同 --> }} }}
末尾留白
在一些情況下可在末尾添加空白的單元來改善排版。例如,當總單元數為5時,在寬屏下可能出現第一排擠滿4個單元,而第二排的1個單元被強制拉寬佔滿寬屏的情況。這時,可通過插入3個空單元,人為地製造4+4的佈局,可使第二行的孤立單元像第一行的單元一樣,只佔屏幕寬度的1/4,實現對齊的效果。
插入空白單元的方式很簡單,在最後加上「dummy=x」即可。也可通過「dummywidth」設定空白單元的寬度。
{{横排信息 |color = <!-- 标题默认颜色,默认是浅蓝色 --> |width = <!-- 默认基础宽度 --> |item1 = <!-- 事物1的名称,例如角色名 --> |item1-text = <!-- 事物1的介绍正文 --> |item2 = <!-- 事物2的名称,例如角色名 --> |item2-text = <!-- 事物1的介绍正文 --> |... |dummy = <!-- 插入的空单元数量 --> |dummywidth = <!-- 每个空单元的基础宽度,默认与width相同 --> }}
示例
- 下面給出在 請問您今天要來點兔子嗎/角色列表 條目中的一個實例,其中麻衣的文字介紹較多,故使用了雙倍的寬度,而美紀、花梨的文字介紹較短,故使用了嵌套格式實現局部的壓縮排列。
- 讀者可嘗試調整瀏覽器寬度觀察自適應佈局的效果。
麻衣(マイ)是班級的班長,也因此通常被同學們稱為「班長」(委員長)。
雖然是班長但意外地有着冒失和不太可靠的性格。例如對大小姐高中有執念,曾經報考大小姐高中作為第一志願但是落敗。後來在文化祭上以交換制服為藉口穿上了夢寐以求的大小姐高中校服,並且拖了很久才歸還。
在班內推選學生會長參選人的選舉中以微弱的優勢敗給了在文化祭上大放異彩的千夜,表現得相當不甘心。不過後來千夜主動放棄名額,故替補參選並競選成功,並在甘兔庵辦了慶祝儀式。
高三時被分入了千夜的班級,並宣稱要「馬上讓千夜忘掉心愛的事」。
學生會長任內發動了與大小姐高中聯動的球類運動大會,不過在與紗路的網球對戰中敗得很徹底。
值得一提的是,麻衣和千夜的聲優剛巧是《妄想學生會》中主角學生會長天草篠和學生會書記七條天空的聲優杏(あんず)是留有一對紫色的雙馬尾的少女。
相對而言性格比較文靜,對心愛等人去大小姐高中拿回來的一些奇奇怪怪的面具感到震驚。
對占卜很有興趣,有閱讀星占的書籍,還曾在文化祭的佈置方面提供風水方面的建議。在動畫版中則通過塔羅牌猜中了智乃的身份。
高三時被分入了千夜的班級。