《朝颜文学报特刊》：实验性文章布局及其使用方法

asagao-title.svg

实验性文章布局及其使用方法

Rating: +38
Rating: +38

著作信息

版式作者：dr hormressdr hormress

版头Logo作者：breadddddbreaddddd
基于 maki hisanemaki hisane 创建的图书馆典籍 朝颜文学报。

Rating: +38

《朝颜文学报》自首刊以来，获得各界人士的广泛好评。《朝颜文学报》电子版于2020年十二月正式发布，然而其至今仍沿用了早期电子书阅读界面过时的设计风格。笔者联系《朝颜文学报》编辑部共同完成了崭新的页面设计，本文将简单介绍这一设计及其应用方法。

asagao-20.svg

朝颜文学报标志

示例

可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。

标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建

+ 标题- 标题

一号标题

二号标题

三号标题

四号标题

五号标题
六号标题








分页分页长 Tab由于一些奇怪的原因，这个空 tab 有一个很长的名字。我想知道为什么？这很奇怪。空 tab空 tab空 tab空 tab空 tab

此为分页（tab view）。

这是一个引用块，在一行字的起始处加上“> ”来创建。

更多文字

一条分割线

嵌套引用块

[[div class="blockquote green-shadow"]]

一个绿色阴影的引用块。

[[div class="blockquote grey-bg"]]

一个灰色的引用块。

[[div class="blockquote styled"]]

任何引用块添加“styled”类就会被加上简单的牵牛花花边。

+ 还可以使用分栏布局-隐藏

[[div class="column-2"]]

使用这个可以将内容分成两栏显示。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

[[div class="column-3"]]

使用这个可以将内容分成三栏显示。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

[[div class="column-4"]]

使用这个可以将内容分成四栏显示。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

[[div class="column-2 screen"]]

使用这个可以将内容分成两栏显示，并在移动端清除分栏效果；其他栏目数量仿照此形式添加“screen”即可。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。这是一个示例。

这是表格
你应该老早就知道怎么
做这个了吧








使用方法

请按如下方式将此版式引入页面：

[[include :scp-wiki-cn:theme:asagao]]

[[div class="asagao-title"]]
[[image http://ah-sandbox.wikidot.com/local--files/theme:yasuharasuzu/asagao-title.svg]]
[[/div]]
[[div class="meta-title"]]
页面标题（去除“《朝颜文学报特刊》：”）
[[/div]]

页面正文

插入的图片用于占位，不会显示，但为使“朝颜文学报 特刊”字样正确显示，请不要替换掉它。

“朝颜文学报 特刊”字样的颜色修改方法如下：

[[module CSS]]
div.asagao-title {
    background-image: linear-gradient(45deg, 渐变颜色1, 渐变颜色2);
}
[[/module]]

若需使用纯色，将渐变颜色1和渐变颜色2设置为同一颜色即可。

若需去除“朝颜文学报 特刊”字样，则按如下方式引入版式：

[[include :scp-wiki-cn:theme:asagao]]

[[div class="meta-title"]]
页面标题
[[/div]]

页面正文

在正文结束后，可添加如下的署名模块：

[[div class="author"]]
[[div class="author-title" style="background-color: 颜色;"]]
头衔（如“特邀评论员”）
[[/div]]

人名
[[/div]]

如果不设置头衔颜色，则默认为淡绿色。

设计者

Hormress

+ 显示源代码- 隐藏源代码

模块暂不可用： 此动态功能尚未由只读迁移站支持。

wanderers原创版式
页面版本：⁨0⁩, 最后编辑于: ⁨2022/4/9 15:27:01⁩ (⁨⁨1621⁩ 日前⁩), 现时评分: 38
历史 附件 + 选项