杂志 主题
+ 显示源代码

介绍

该 sigma9 主题由 EtinjatEtinjat 设计，灵感来自于 MalyceGravesMalyceGraves 的报纸版式，而hoah2333hoah2333 则调整了一些半月刊专属部分的代码，效果见此。至于侧边栏的文书标志则由 KcorenaKcorena 绘制。

在你的作品开头添加如下语法以应用此版式：

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

自定义选项：

[[include :scp-wiki-cn:theme:magazine
|collapsible-sidebar= true 启用可折叠侧边栏1
|content-width= 正文区域宽度2
|header-title= '文本' 版头大标题文本，注意要用 '半角单引号' 框起来
|header-subtitle= '文本' 版头次标题文本
|mob-title= '文本' 窄屏（如移动端）版头大标题文本，不填默认同上3。
|mob-subtitle= '文本' 窄屏版头次标题文本，不填默认同上
|logo-image= url('地址') 版头标志，引号内填图片地址
|logo-sidebar= url('地址') 侧边栏标志
|sidebar-content= '文本' 侧边栏标志下的文本
|title-underlines = none 去掉页面标题下划线
|title-orn-content= '★' 正文标题下装饰线中的图形，可用 url('xxx') 替换 'xxx'
|title-orn-size= 1.5rem 装饰图形大小
|title-orn-color= #542429 装饰图形颜色
|title-orn-width= 2em 装饰图形后部空白的宽度4
|page-title= none 隐藏页面标题
|Huiwen-mincho= true 引用完整的汇文明朝字体5
|Weibei= true 引用完整的王汉宗魏碑体。
]]

预设选项，任选其一：

[[include :scp-wiki-cn:theme:magazine
|yxh= true 异学会样式
|tradition= true 繁体样式
|wanderers=true 被放逐者图书馆样式
]]

+ 更多自定义项目
  • PS：由于该版式用了许多计算程式，所以修改的东西涉及元素尺寸的数值时，请去修改 :root 里面的变量，且一律用 rem 作为单位。



常规

1 级标题

2 级标题

3 级标题

4 级标题

5 级标题
6 级标题

在一行字的起始处加上 1~6 个 “+ ”再接一个空格来创建标题样式。6

一个 表格
浏览过的链接 未浏览过的链接
空链接

通常评分模组：

评分: +64+–x

著作信息块：

评分: +64+–x

著作信息

使用方法

将评分栏或者著作信息组件放进这个div里：

[[div class="mz-unfold-swap"]]
[[>]]
[[module Rate]]
[[/>]]
[[/div]]

[[div class="mz-unfold-swap"]]
[[include :scp-wiki-cn:credit:start]]
页面信息
[[include :scp-wiki-cn:credit:end]]
[[/div]]

评分: +64+–x

展开的评分块（详见里面）

评分: +64+–x

著作信息

页面信息

评分: +64+–x

单个著作信息块：

著作信息

页面信息

更多

更多

更多页面信息

著作信息

页面信息

更多

更多

更多页面信息

+ 字体
+ 列表

杂志图片

LOGO_magazine.svg

标准图片栏

  • 在标准图片栏外部套上相应的 div，即可使用下方的特殊图片栏。

[[div class="mz-img-wrap " ]]
[[include component:image-block
name=
|width=
|caption=
|align=
]]
[[/div]]


IMG-vintage-dragon.png

杂志图片区
class="mz-img-wrap img-tt"10

IMG-vintage-dragon.png

杂志图片框
class="mz-img-wrap img-frame"

IMG-vintage-dragon.png

杂志图片板块
class="mz-img-wrap img-b3d"

IMG-vintage-dragon.png

杂志图片块
class="mz-img-wrap img-border"

IMG-vintage-dragon.png

杂志图片板块
class="mz-img-wrap img-border img-frame"


分割线

可通过五个连字符“-----”创建水平分割线：



特殊分割线






在分割线外套一个 div：

  • 缩减线条尺寸：hr-contract
  • 将线条变为实线：hr-solid
  • 点线：hr-dotted
  • 双线：hr-double

[[div class="mz-hr hr-contract hr-solid" ]]

------

[[/div]]

ICON_eagle.svg

#

芜湖

#

#

评分: +64+–x

在分割线侧边按任意顺序添加东西：

  • 每个东西之间请空一行。
  • 分割线可以重复添加。
  • 注意请不要增添太多事物，以免窄屏下挤成一堆。

[[div class="mz-hr" ]]

[[image xxxx ]] 图片

------

{{#}} 竖线

芜湖 文本

[[module Rate]] 评分组件

[[/div]]

杂志 主题

#

作者：Etinjat

日期：11 Sep 2021 15:49

标签：原创 版式

或者配合 ListPages 获取页面标题，
后隐藏原标题来产生某种效果。

[[include :scp-wiki:theme:magazine
|page-title= none
]]

[[div class="pgtt-module mz-hr" ]]
[[module ListPages category="*" limit="1" fullname="="]]
%#%title%%
[[/module]]
{{#}}
------
{{#}}
[[image source]]
[[/div]]

或者更多！

将你的鼠标移到图片上看看悬浮框。

[[div class="mz-log-wrap"]]
[[module ListPages category="*" limit="1" fullname="="]]
[[div class="mz-log-list"]]
[[div class="mz-hr" ]]
%#%title%%
{{,,#,,}}
------
[[div class="mz-log-trigger"]]
[[/div]]
[[div class="mz-log-hovertip"]]
**作者：**%#%created_by%%
**日期：**%#%created_at|%Y-%m-%d%%
**标签：**%#%tags%%
[[/div]]
[[/div]]
[[div class="mz-log-content"]]
或者更多！
[[/div]]
[[/div]]
[[/module]]
[[/div]]


引用块

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

另一个引用块！

也可以用以下方法生成引用块：

[[div class="blockquote"]]
blockquote
[[/div]]

替代引用块

[[div class="mz-blockquote"]]

mz-blockquote

[[/div]]

[[div class="mz-board" ]]

mz-board

[[/div]]

[[div class="mz-cover"]]

mz-cover

[[/div]]

[[div class="mz-paper"]]

mz-paper

[[/div]]

[[div class="mz-textquote"]]
mz-textquote
[[/div]]

[[div class="mz-outbox"]]
[[div class="mz-innerbox"]]

正文在此

[[/div]]
[[/div]]

综合效果

IMG-vintage-dragon.png

此处有龙

所谓半月刊，关键是半月刊需要如何写。 我认为， 史美尔斯说过一句著名的话，书籍把我们引入最美好的社会，使我们认识各个时代的伟大智者。带着这句话, 我们还要更加慎重的审视这个问题

从这个角度来看， 既然如何， 经过上述讨论， 我认为， 本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。 这样看来， 我们一般认为，抓住了问题的关键，其他一切则会迎刃而解。

　半月刊，到底应该如何实现。 本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。 经过上述讨论， 所谓半月刊，关键是半月刊需要如何写。 塞涅卡说过一句富有哲理的话，生命如同寓言，其价值不在与长短，而在与内容。这启发了我. 总结的来说， 既然如何， 每个人都不得不面对这些问题。

在面对这种问题时， 既然如何， 裴斯泰洛齐曾经说过，今天应做的事没有做，明天再早也是耽误了。这似乎解答了我的疑惑. 可是，即使是这样，半月刊的出现仍然代表了一定的意义。 既然如何， 所谓半月刊，关键是半月刊需要如何写。 俾斯麦曾经说过，对于不屈不挠的人来说，没有失败这回事。带着这句话, 我们还要更加慎重的审视这个问题: 半月刊，到底应该如何实现。

半月刊，到底应该如何实现。 从这个角度来看， 而这些并不是完全重要，更加重要的问题是， 而这些并不是完全重要，更加重要的问题是， 要想清楚，半月刊，到底是一种怎么样的存在。

乱数文本

　　要想清楚，半月刊，到底是一种怎么样的存在。 每个人都不得不面对这些问题。 在面对这种问题时， 黑塞说过一句著名的话，有勇气承担命运这才是英雄好汉。这句话语虽然很短, 但令我浮想联翩

我们不得不面对一个非常尴尬的事实，那就是， 我认为， 我们都知道，只要有意义，那么就必须慎重考虑。 半月刊因何而发生？

带着这些问题，我们来审视一下半月刊。 培根说过一句富有哲理的话，阅读使人充实，会谈使人敏捷，写作使人精确。这句话语虽然很短, 但令我浮想联翩. 现在，解决半月刊的问题，是非常非常重要的。


自定义块

回形针块

[[div class="clip-wrap"]]
[[div class="clip-body"]]
文本
[[/div]]
[[/div]]

扩展
The-Great-Dragon-Spine.jpg

文本

The-Great-Dragon-Spine.jpg
代码

[[div class="clip-wrap"]]
[[div class="clip-body"]]
[[image 图片地址]]
文本
[[/div]]
[[/div]]

[[div class="clip-wrap"]]
[[div class="clip-img"]]
[[image 图片地址]]
[[/div]]
[[/div]]

书页

便签纸

[[div class="note-page"]]
正文在此
[[/div]]

便利贴

[[div class="mz-note"]]
正文在此
[[/div]]

若想要折角在左侧，则这么写：
[[div class="mz-note note-left"]]
[[/div]]

若要改变颜色，则这么写：
[[div class="mz-note" style="--tip-color:blue"]]
[[/div]]

横条纹书页

使用方法

要启用单张条纹书页及笔记本书页效果，请在前面引用版式时，增加一栏：
[[include :scp-wiki-cn:theme:magazine
|extensions=true
]]


要使用更多类似效果，请使用此组件。



[[div class="mz-notepage-wrap chew-left"]]11
[[div class="notepage-body"]]
[[div_ class="notepage-header"]]
书页顶部文本
[[/div]]
[[div class="notepage-main"]]
正文在此
[[/div]]
[[div class="notepage-footer"]]
书页底部文本，一般为页码
[[/div]]
[[/div]]
[[/div]]




使用方法同上，只需将此处的

mz-notepage-wrap

改为：

mz-notequote-wrap

就行了。


笔记本

[[div class="mz-notebook-wrap"]]
[[div class="notebook-body"]]
[[div class="notebook-left"]]
[[div class="notepage-main"]]
左侧文本
[[/div]]
[[/div]]
[[div class="notebook-mid"]]
[[/div]]
[[div class="notebook-right "]]
[[div class="notepage-main "]]
右侧文本
[[/div]]
[[/div]]
[[/div]]
[[/div]]

附注：

  • 笔记本样式仅在宽屏上显示完整效果，在窄屏下效果变为前项的样式一。
  • 于 notebook-body 所在的 div，添加 style="--color-notepage: blue;--color-rowline: green;--color-bookpage-txt:red" 可以分别修改书页颜色、横线颜色、文本颜色。
  • 在 notebook-body 一处添加 notebook-noseam，可移除笔记本中间黑色渐变的书缝效果。
  • 在 notebook-left/right 一处增添 notebook-bookmark，可启用书签。
  • 在 notepage-main 一处增添 rowline-single，可变为单条纹。
    • 添加 rowline-none 则移除条纹。


对话块

也许你需要进行对话。

该怎么谈呢？可以看一下下面。

+ 那我们开始吧


TAB 分页


此为分页（tab view）。


线型分页

[[div class="mz-tab-line"]]
[[tabview]]
[[tab 分页]]

[[/tab]]
[[/tabview]]
[[/div]]


翻页效果分页

  • 在引入源代码时额外添加一个选项
  • 在第二次点击同一个分页时则出现翻页效果。

[[include :scp-wiki-cn:theme:magazine
|extensions=true
]]

[[div class="mz-tab"]]
[[tabview]]
[[tab 分页]]

[[/tab]]
[[/tabview]]
[[/div]]


横跨标题

允许 1~6 级 标题

[[div class="mz-tt"]]
+ 横跨标题
○ 居中文本
[[/div]]

其二

[[div class="mz-tt222"]]
+ 横跨标题其二
[[/div]]

其三

[[div class="mz-tt333"]]
+* 其三
[[/div]]

或者仅仅当做水平分割线：

[[div class="mz-tt333"]]
[[/div]]

迭代用的伪标题样式

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

或者仅仅当做水平分割线：

[[div class="meta-title"]]
[[/div]]


伪黑光盒样式

[[div class="mz-tt tt-box" style="padding-top: 0rem"]] 通过调节 padding-top 来调整内文上方边距。
+* 大标题 务必放一个于开头

内文文本

+* 可再添加大标题

[[/div]]

全局调整

[[module CSS]]
:root{
--ttbox_h1BDR-color: #333; 标题框颜色
--ttbox_boxBDR-color: #333; 盒子框颜色，不填默认同标题框颜色
--ttbox_before-color: #333; 折角颜色，不填默认同标题框颜色

--ttbox_h1-bg: #333; 标题背景色
--ttbox_h1-color: fff; 标题文本色
}
[[/module]]



单项调整


用div包裹起来并填写以上属性即可改变样式。

[[div style="height: 0;--ttbox_h1BDR-color:#333;--ttbox_before-color:#888;--ttbox_h1-bg: #000;--ttbox_h1-color: #fff;"]]
+* 单栏调整
[[/div]]


分栏

以下代码可以将页面分为二或三栏，但在窄屏时会缩为一栏。

[[div class="mz-column"]]
分成两栏
[[/div]]

[[div class="mz-column column-333"]]
分成3栏
[[/div]]

[[div class="mz-column column-nip"]]
去掉之间线条
[[/div]]

[[div class="mz-column column-nip column-333"]]
分成三栏并去掉之间线条
[[/div]]

乱数文本：

我们不得不面对一个非常尴尬的事实，那就是， 我认为， 我们都知道，只要有意义，那么就必须慎重考虑。 半月刊因何而发生？

一般来讲，我们都必须务必慎重的考虑考虑。 这样看来， 就我个人来说，半月刊对我的意义，不能不说非常重大。

带着这些问题，我们来审视一下半月刊。 培根说过一句富有哲理的话，阅读使人充实，会谈使人敏捷，写作使人精确。这句话语虽然很短, 但令我浮想联翩. 现在，解决半月刊的问题，是非常非常重要的。

IMG-goat.png

不知为何这里有只羊

所以， 我们不得不面对一个非常尴尬的事实，那就是， 从这个角度来看， 从这个角度来看， 经过上述讨论， 半月刊的发生，到底需要如何做到，不半月刊的发生，又会如何产生。 一般来讲，我们都必须务必慎重的考虑考虑。 这样看来， 就我个人来说，半月刊对我的意义，不能不说非常重大。 一般来讲，我们都必须务必慎重的考虑考虑。 这样看来， 就我个人来说，半月刊对我的意义，不能不说非常重大。
　　
带着这些问题，我们来审视一下半月刊。 一般来说， 布尔沃说过一句富有哲理的话，要掌握书，莫被书掌握；要为生而读，莫为读而生。我希望诸位也能好好地体会这句话。**

IMG-goat.png

环绕分栏

○ 无名氏

我们不得不面对一个非常尴尬的事实，那就是， 我认为， 我们都知道，只要有意义，那么就必须慎重考虑。 半月刊因何而发生？

带着这些问题，我们来审视一下半月刊。 培根说过一句富有哲理的话，阅读使人充实，会谈使人敏捷，写作使人精确。这句话语虽然很短, 但令我浮想联翩. 现在，解决半月刊的问题，是非常非常重要的。

我们不得不面对一个非常尴尬的事实，那就是， 我认为， 我们都知道，只要有意义，那么就必须慎重考虑。 半月刊因何而发生？

我们不得不面对一个非常尴尬的事实，那就是， 我认为， 我们都知道，只要有意义，那么就必须慎重考虑。 半月刊因何而发生？

带着这些问题，我们来审视一下半月刊。 培根说过一句富有哲理的话，阅读使人充实，会谈使人敏捷，写作使人精确。这句话语虽然很短, 但令我浮想联翩. 现在，解决半月刊的问题，是非常非常重要的。

我们不得不面对一个非常尴尬的事实，那就是， 我认为， 我们都知道，只要有意义，那么就必须慎重考虑。 半月刊因何而发生？

我们不得不面对一个非常尴尬的事实，那就是， 我认为， 我们都知道，只要有意义，那么就必须慎重考虑。 半月刊因何而发生？

带着这些问题，我们来审视一下半月刊。 培根说过一句富有哲理的话，阅读使人充实，会谈使人敏捷，写作使人精确。这句话语虽然很短, 但令我浮想联翩. 现在，解决半月刊的问题，是非常非常重要的。

我们不得不面对一个非常尴尬的事实，那就是， 我认为， 我们都知道，只要有意义，那么就必须慎重考虑。 半月刊因何而发生？

带着这些问题，我们来审视一下半月刊。 培根说过一句富有哲理的话，阅读使人充实，会谈使人敏捷，写作使人精确。这句话语虽然很短, 但令我浮想联翩. 现在，解决半月刊的问题，是非常非常重要的。

我们不得不面对一个非常尴尬的事实，那就是， 我认为， 我们都知道，只要有意义，那么就必须慎重考虑。 半月刊因何而发生？

我们不得不面对一个非常尴尬的事实，那就是， 我认为， 我们都知道，只要有意义，那么就必须慎重考虑。 半月刊因何而发生？

带着这些问题，我们来审视一下半月刊。 培根说过一句富有哲理的话，阅读使人充实，会谈使人敏捷，写作使人精确。这句话语虽然很短, 但令我浮想联翩. 现在，解决半月刊的问题，是非常非常重要的。

我们不得不面对一个非常尴尬的事实，那就是， 我认为， 我们都知道，只要有意义，那么就必须慎重考虑。 半月刊因何而发生？

我们不得不面对一个非常尴尬的事实，那就是， 我认为， 我们都知道，只要有意义，那么就必须慎重考虑。 半月刊因何而发生？

带着这些问题，我们来审视一下半月刊。 培根说过一句富有哲理的话，阅读使人充实，会谈使人敏捷，写作使人精确。这句话语虽然很短, 但令我浮想联翩. 现在，解决半月刊的问题，是非常非常重要的。

环绕分栏代码

[[include :etinjat:css:column-start
|name=111 任意数字，若引用多个分栏又希望环绕部分尺寸不重复时，则此处不重复
|box-width=10rem 环绕部分固定宽度
|box-height=14rem 环绕部分固定高度
]]

环绕部分

[[include :etinjat:css:column-left]]

左侧文本

[[include :etinjat:css:column-right
|mid-style= 中间空白区域样式，可键入 border: none ; 来取消竖线。或者其他改变线条样式。
]]

右侧文本

[[include :etinjat:css:column-end]]

跳到底部

脚注
原创版式
页面版本: 488, 最后编辑于: 08 May 2024 10:27
编辑 评分 (+64) 标签 讨论 (10) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License