没有人做笔记 样版

注意


此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许,请勿修改此页的内容。


评分: +66+x







没有人喜欢玩双关。开门见山,这里是为nobody的goi格式设计的笔记本单页版式。

部分代码取自格式资源的便签纸样式1,样板内的文本来自狗屁不通文章生成器2。没有人知道为什么要用这个作为乱数文本。

如果想要使用的话,请复制下方的引用块和第二个样式的代码。

由于屏幕适应性,该样版分电脑端和手机端两个效果,手机端会减缩成通常的加底纹Quote样式。建议在宽屏电脑上浏览以获取更好的体验。同时建议书页不宜过长。

另外,目前此处所用的字体是杨任东竹石体,关于中文字体的引用,请看这里,此处搜集了部分可供使用的免费商用字体。






用法

{$sub-title}

1. 引用源代码

  • 只需要复制一次,然后粘贴到顶部3

[[include :scp-wiki-cn:component:note-source]]

  • 全局自定义选项

全局自定义选项将更改整个页面所有该组件相关的样式,会被单页样式取代,如下所示。
所有自定义选项的末尾都不要带空格。以及,用斜体标出的个人设置会在手机端强制取消效果,下同。

[[include :scp-wiki-cn:component:note-source
|nobody=true , 填 true 时可将页眉标题和logo改为nobody,不填则保持原状。
|collapsible-sidebar=true ,填true时启用可折叠侧边栏,不填则保持原状。
|nobody=true , 填 true 时可将页眉标题和logo改为nobody,不填则保持原状。
|fixed-line=true 填 true 时,启用响应行,使行间距与文本大小相适应,固定其比例。可单独用于特定一个书页。4
|my-typeface=true 填 true 时,启用作者保留字体设置,不建议使用。此为本作者自用代码,会根据我自己的喜好进行调整全局字体。
|texts-typeface= 文本字体。
|texts-typeface= 手机端文本字体。
|texts-size= 字体大小。
|texts-size-mob= 在手机端的字体大小。
|no-ridge= true 可不填,填 true 时取消书脊样式5
|color-ridge-cover= rgba(var(--cl-a4)) 此处调整书脊封皮拱起颜色,一般与封皮颜色保持一致,可不填。
|color-ridge-vacancy=#fff 此处调整书脊抠口颜色,亦即书脊拱起后的空缺部分。一般与背景颜色相同,特别是用了其他版式的情况时。可不填。6
|main-content=52rem , 当启用可折叠侧边栏时,选填此可以调整宽屏时页面内容的宽度,可填参数,建议值为52rem。
|my-bookmark = 可不填,填 0 及在手机端时取消该组件的书签样式。优先级低于单个笔记本组件的自定义设定。
]]



2. 从以下样式中挑选一个



笔记本样式 · 一 已过时,不适合使用






笔记本样式 · 二



代码如下:

[[include :scp-wiki-cn:component:note-left-start]]
左侧文本
[[include :scp-wiki-cn:component:note-mid-separator]]
右侧文本
[[include :scp-wiki-cn:component:note-right-end]]



自定义选项

选项与上文相同,但“mark-size”一项被“mark-left-size”和“mark-right-size”取代。

[[include :scp-wiki-cn:component:note-left-start
|self-defining= 填true开启单独自定义选项
|name= 必填,任意英文字母组合皆可11
|texts-size= 文本大小。
|texts-typeface= 字体名称,默认是宋体12
|line-rgba= 每行线条颜色。
|page-color= 页面颜色。
|text-color= 文本颜色。
|fixed-line=true 响应行,使行间距与文本大小相适应,固定其比例。当全局设定不设置此之时,可单独用于特定一个书页。
|book= 笔记本的书页,默认显示,填none则取消边框。
|mark-left-size= 调整左页书签尺寸,不填则默认不显示标签。
|mark-right-size= 调整右页书签尺寸,不填则默认不显示标签。
|mark-position=调整书签位置,填两个参数,百分数或px/em/rem皆可。
|color-ridge-cover= rgba(var(--cl-a4)) 此处调整书脊封皮拱起颜色,一般与封皮颜色保持一致,可不填。
|color-ridge-vacancy=#fff 此处调整书脊抠口颜色,亦即书脊拱起后的空缺部分。一般与背景颜色相同,特别是用了其他版式的情况时13,可不填。
|chew-paper=left 可不填。填 left / right / both,将形成撕下左侧/右侧/两侧书页的效果。
]]

左侧文本

[[include :scp-wiki-cn:component:note-mid-separator]]

右侧文本

[[include :scp-wiki-cn:component:note-right-end]]


效果如下:

 从这个角度来看, 生活中,若没有人出现了,我们就不得不考虑它出现了的事实。 我认为, 这样看来, 没有人,发生了会如何,不发生又会如何。 这种事实对本人来说意义重大,相信对这个世界也是有一定意义的。 这种事实对本人来说意义重大,相信对这个世界也是有一定意义的。 既然如此, 既然如何, 没有人,发生了会如何,不发生又会如何。 阿卜·日·法拉兹说过一句富有哲理的话,学问是异常珍贵的东西,从任何源泉吸收都不可耻。

我希望诸位也能好好地体会这句话。 这种事实对本人来说意义重大,相信对这个世界也是有一定意义的。 生活中,若没有人出现了,我们就不得不考虑它出现了的事实。 可是,即使是这样,没有人的出现仍然代表了一定的意义。 既然如何, 没有人,到底应该如何实现。 要想清楚,没有人,到底是一种怎么样的存在。 从这个角度来看, 既然如何, 生活中,若没有人出现了,我们就不得不考虑它出现了的事实。 亚伯拉罕·林肯在不经意间这样说过,你活了多少岁不算什么,重要的是你是如何度过这些岁月的。这似乎解答了我的疑惑。

王阳明曾经说过,故立志者,为学之心也;为学者,立志之事也。这启发了我, 而这些并不是完全重要,更加重要的问题是, 克劳斯·莫瑟爵士曾经提到过,教育需要花费钱,而无知也是一样。这似乎解答了我的疑惑。 对我个人而言,没有人不仅仅是一个重大的事件,还可能会改变我的人生。 一般来讲,我们都必须务必慎重的考虑考虑。 达·芬奇曾经说过,大胆和坚定的决心能够抵得上武器的精良。这句话语虽然很短,但令我浮想联翩。 经过上述讨论, 现在,解决没有人的问题,是非常非常重要的。


我们一般认为,抓住了问题的关键,其他一切则会迎刃而解。 那么, 就我个人来说,没有人对我的意义,不能不说非常重大。 歌德说过一句富有哲理的话,决定一个人的一生,以及整个命运的,只是一瞬之间。这似乎解答了我的疑惑。 了解清楚没有人到底是一种怎么样的存在,是解决一切问题的关键。





辅助选项

可用于引用了该组件源代码的页面中。

分割线


在笔记里添加该代码可令分割线占两行高度,同时在行线中央出现,如上所示。

[[div class="note-hr"]]
------
[[/div]]


强制留空与断行

  • 占位文本不可视不可被选择。
  • 仅显示在大于520px的屏幕之中,亦即通常的手机不会启用以下代码。
强制留空

[[span class="pc-blank" ]] 任意占位文本,字数即留空 [[/span]]

  • 该代码可用于需要在电脑上看起来要留空,但在手机下需要紧凑之时。
  • 或者,需要在电脑上看起来留有足够的空行以撑大组件,但在手机端下取消使得不那么空。

[[div class="pc-blank" ]]
@@@@
@@@@
@@@@
[[/div]]

像这样:

1
2
3
4
5


6.电脑端的话共5行
强制断行

[[span class="pc-line" ]] 任意占位文本 [[/span]]

  • 该代码可用于需要在电脑上看起来要断行,但在手机下需要紧凑之时。
  • 同时也可令维基语法生成的有序列表,被分割后依旧排序下去。

效果如下(请在电脑与手机上对比查看):

  1. 强制#留空
  2. 强制#断行

为了简洁起见,可在文本外面套一个div,并填上class="pc-break",然后使用以下维基语法作为替代(原维基语法失去原本效果):

[[div class="pc-break"]]
强制留空:,,下标代码,,

强制断行:^^上标代码^^
[[/div]]


如果你想也用于窄屏的话,填 class="section-break"

[[div class="section-break"]]
强制留空:,,下标代码,,

强制断行:^^上标代码^^
[[/div]]

效果如下:

  1. 强制#留空
  2. 强制#断行

首行缩进

方法一:可以用 占位符+强制留空 ,形成缩进效果。

方法二:在文本外面套一个div,写上class="suojin-2",或者直接 style="text-indent:2em;"(缩进两个字)。


单页样式

{$sub-title}


通常单页




如果你只想用条纹纸/笔记本单页格式,即该组件在PC端显示的样式的话,复制以下代码即可,效果正如下所示:

[[div class="note-quote-out note-nobody "]]
[[div class="note-quote-inner"]]
正文在此
[[/div]]
[[/div]]



自定义单页



如果不满足于此的话,下面提供了一个用mask效果形成的撕页样式。你可以自定义齿痕,是在左边还是右边抑或是两边14

{$side-text}

{$upon-text}

[[include :scp-wiki-cn:component:note-paper-head
|chew-paper=horiz 填 left / right / top / bottom / horiz / verti 时,会在纸张的 左 / 右 / 上 / 下 / 左右 / 上下 出现齿痕。不填或填其他时,则与上方样式相近。
|texts-size=120% 正文文本大小。
|texts-typeface='楷体' 正文字体。
|pc-width=100% 此处调节PC端的纸张宽度,一般建议填60%,以让纸张的宽度看起来更像是书页。不填则默认100%,其会在移动端时会恢复默认值。
|name= 当你需要开启自定义选项时,则填此。任意英文字母组合皆可15
]]

正文在此

[[include :scp-wiki-cn:component:note-paper-tail]]

-1-

{$side-text}





{$side-text}

更多自定义选项

[[include :scp-wiki-cn:component:note-paper-head
|crease-left= 填 top / bottom,分别在纸张左侧的上方、下方出现折角折痕。16
|crease-right= 填 top / bottom,分别在纸张右侧的上方、下方出现折角折痕1718
|upon-set=left 选填 left / center / right,填写之后可令页眉文本向对应方向对齐。不填写则不开启页眉选填文本。
|upon-text=文本选填文字,会出现在页眉,一般可当做标题来填写。支持斜体/加粗/下划线的维基语法。
|header-footer=true 可不填。当填 true 时,可开启下方的页面页脚自定义选项19
|upon-color=#999 选填色码,改变页眉文字颜色。默认颜色同正文。
|upon-size= 选填页眉文本大小。
|upon-typeface= 选填页眉文本字体(如果字体可用)。
|upon-margin= 调整页眉文本的边距 margin20,默认值是 0.5rem 0.2rem -1rem 0.2rem21
|under-color=#999 选填色码,改变页尾文字颜色。默认颜色同正文。
|under-size= 选填页尾文本大小。
|under-typeface= 选填页尾文本字体(如果字体可用)。
|under-margin= 调整页尾文本的边距 margin22,默认值是 0 0 0 0
]]

正文在此

[[include :scp-wiki-cn:component:note-paper-tail
|under-set=left 选填 left / center / right,填写之后可令页尾文本向对应方向对齐。不填写则不开启选填文本。
|under-text=-2- 选填文字,会出现在页尾,一般可当做页码来填写。支持斜体/加粗/下划线的维基语法。
]]

-2-

{$side-text}




{$side-text}

进阶自定义选项

[[include :scp-wiki-cn:component:note-paper-head
|self-defining=true 可不填。填 true 时启用进阶自定义选项23
|paper-chew-size= 1rem 撕边大小。
|paper-chew-mobsize= 1rem 手机上的撕边大小。
|text-color= 文本颜色。
|filter-text= 文本滤镜。
|line-color= 行线颜色,仅限Hex格式中的#后面部分24
|page-color= 纸张颜色。
|min-height= 纸张最小高度,用于在字数很少的情况时,将页面撑高。
|min-width= 纸张最小宽度,用于在字数很少的情况时,将页面撑宽。
|min-mob-height= 移动端纸张最小高度,填auto时恢复原先尺寸。
|min-mob-width= 移动端纸张最小宽度,,填auto时恢复原先尺寸。
|background-left= 前缘部分颜色
|background-right= 后缘部分颜色
|background-mid= 正文部分颜色
|background-inner= 包裹前中后三部分的覆盖颜色/图片
|cover-midner= 中间部分的覆盖颜色/图片
|accessory= 可不填。附加组件,目前只能填 scroll-verti 和 scroll-horiz 开启古代卷轴的轴25
]]

正文在此

[[include :scp-wiki-cn:component:note-paper-tail]]

-3-

{$side-text}





额外自定义选项





取消阴影、边框、行线



{$side-text}

取消阴影而使用边框

[[include :scp-wiki-cn:component:note-paper-head
|name=xxx-noshadow
]]

正文在此

[[include :scp-wiki-cn:component:note-paper-tail]]

{$under-text}

{$side-text}


{$side-text}

取消边框与阴影

[[include :scp-wiki-cn:component:note-paper-head
|name=xxx-noborder
]]

正文在此

[[include :scp-wiki-cn:component:note-paper-tail]]

{$under-text}

{$side-text}


{$side-text}

取消行线

[[include :scp-wiki-cn:component:note-paper-head
|name=xxx-noline
]]

正文在此

[[include :scp-wiki-cn:component:note-paper-tail]]

{$under-text}

{$side-text}


{$side-text}

{$upon-text}

提示:

  • name 里的 xxx 代表你可以填写任意组合的英文字母。
  • 以上选项其实可以组合使用,组合不分顺序。
    • 例如同时取消行线与阴影,只需填写:
    • |name=xxx-noline-noshadow

{$under-text}

{$side-text}




附件加组件



{$side-text}

{$upon-text}

纸堆

  • 令组件看起来像是被撕下的几页纸,草草地摞成一沓。
    • 该选项可与下方预设样式共同使用。
    • 如需调整垫底的颜色,可以通过开启自定义选项,调节 |page-color=|pile-color=
    • 由于未适应的缘故,请尽量不要调节边缘齿痕大小,以及尽量不把 |chew-paper= 设置为 horiz 与 verti。

[[include :scp-wiki-cn:component:note-paper-head
|accessory=pile
|preset-style=【自定义】
|chew-paper=【自定义】
]]

正文在此

[[include :scp-wiki-cn:component:note-paper-tail]]

{$under-text}

{$side-text}


{$side-text}

{$upon-text}

与预设“便签纸”样式组合26

[[include :scp-wiki-cn:component:note-paper-head
|accessory=pile
|preset-style=notepaper
|chew-paper=left
]]

附注:该部分灵感来自玄武岩 版式里的div块。


{$under-text}

{$side-text}



纸堆动画





单页预设样式



灵活运用好组合可实现多种效果。

以下为整合过的特殊样式,只需要添加以下代码到上述自定义代码里即可:

|preset-syle= scroll / oldpaper / notepaper /……

具体的预设特殊样式见下:

{$side-text}

{$upon-text}

便签纸【notepaper】

来自格式资源里的便签纸样式,给有需要的人使用。

[[include :scp-wiki-cn:component:note-paper-head
|preset-style=notepaper
|chew-paper= 【自定义】27
]]
正文在此
[[include :scp-wiki-cn:component:note-paper-tail]]

{$under-text}

{$side-text}



{$side-text}

{$upon-text}

拍纸簿【pad】

基本上可以当作便签纸样式的变体。

[[include :scp-wiki-cn:component:note-paper-head
|preset-style=pad
|chew-paper=28
]]
正文在此。
[[include :scp-wiki-cn:component:note-paper-tail]]

PS: 不知为何,在展示页里行线左右不对齐,但单独使用时能对齐的。

{$under-text}

{$side-text}


{$side-text}

{$upon-text}

当你设定 |chew-paper= 为垂直时,该样式的注释线左侧空间会变宽,默认留下8rem的空白。为了利用这一效果,你可以采用弹性布局或者留空的方式,将文本分割成左右两边。

[[div class="mob-pad"]]
此处建立一个div,令div块内文本向左侧留空,在移动端时则缩减至2rem。
[[/div]]



也可以用[[span class="mob-pad"]] @.@ 若干空格 @.@ [[/span]]的方式给一行前面留空。

{$under-text}

{$side-text}



{$side-text}

{$upon-text}

ICON-naga-dragon-MINI.png

古代卷轴【scroll】

[[include :scp-wiki-cn:component:note-paper-head
|preset-style=scroll
|chew-paper=【自定义】
]]
正文在此
[[include :scp-wiki-cn:component:note-paper-tail]]

{$under-text}

{$side-text}


  • 选填选项:添加卷轴的轴

|accessory=scroll-verti / scroll-horiz 可不填。附加组件,目前只能填 scroll-verti 和 scroll-horiz 以在垂直/水平方向增加卷轴的轴
|hidden-scroll-side=left / right / top / bottom 若开启卷轴的轴,选填四个方向的其中之一,以隐藏一根轴。




{$side-text}

{$upon-text}


古代书页【oldpaper】


[[include :scp-wiki-cn:component:note-paper-head
|preset-style=oldpaper
|chew-paper= 【自定义】
]]
正文在此
[[include :scp-wiki-cn:component:note-paper-tail]]

该样式可以替换不安马戏团的GOI格式里的书页。


{$under-text}

{$side-text}



古代信笺【oldletter】


注意:
  • 仅限宽屏,在窄屏时变回从左至右的横排书写,以及横线栏样式。
  • 使用等宽字体代码【即两个花括号夹文本:{{ 文本 }}】可将标点符号移动到文字右端,在手机端则恢复。在此模式下的等宽字体无原来的等宽效果,其字体与组件字体保持一致。
    • 以下需要开启自定义组件:
    • 由于有些字体的标点符号位置不同,因而需要调整 |monospace-top|monospace-left 来调节标点符号的位置。一般top是负数,left是正数,单位是 em
    • 如果想要符号横排,则在花括号里面再使用下划线语法,像这样:{{ __文本__ }}。此时需要通过 |monospace-left-hr 来调节其位置。
  • 通过调整|monospace-color|monospace-size来调整等宽字体的颜色和大小,亦即标点符号的颜色和大小。需要开启自定义组件。

[[include :scp-wiki-cn:component:note-paper-head
|preset-style=oldletter
|chew-paper=none 【也可自定义】
|header-footer=true
|upon-set=center
|upon-text=与朱元思书
|upon-color=#b73829
|upon-size=180%
]]

正文在此

[[include :scp-wiki-cn:component:note-paper-tail]]


{$side-text}

与朱元思书

风烟俱净天山共色从流飘荡任意东西自富阳至桐庐一百许里奇山异水天下独绝。

水皆缥碧千丈见底游鱼细石直视无碍急湍甚箭猛浪若奔夹岸高山皆生寒树负势竞上互相轩邈争高直指千百成峰。

泉水激石泠泠作响好鸟相鸣嘤嘤成韵蝉则千转不穷猿则百叫无绝鸢飞戾天者望峰息心经纶世务者窥谷忘反横柯上蔽在昼犹昏疏条交映有时见日。

{$under-text}

{$side-text}


辅助选项

强制留空与断行

强制留空:,,下标代码,,

强制断行:^^上标代码^^




信笺抬头

  • 仅限宽屏(>520px)

首先需要在正文外面套一个div,填写以下代码之一。这是给文本上方预留 1 / 2 / 3 个汉字的空格。

  • class=
    • ol-tt-p1
    • ol-tt-p2
    • ol-tt-p3

然后再在正文的需要抬头的某行的第一个字,套上span。

  • class=
    • ol-tt-t1
    • ol-tt-t2
    • ol-tt-t3

[[span class="ol-tt-t3" ]]三抬[[/span]]
[[span class="ol-tt-t2" ]]二抬[[/span]]
[[span class="ol-tt-t1" ]]一抬[[/span]]

对应地,

[[div class="ol-tt-p3"]]
[[/div]]

[[div class="ol-tt-p2"]]
[[/div]]

[[div class="ol-tt-p1"]]
[[/div]]



{$side-text}

辅助效果示例

三抬
二抬
一抬
正文
可用抬头代码,作为首行缩进。

强制

分行

pc端#########留空

{$under-text}

{$side-text}


便利贴

{$sub-title}

[[include :scp-wiki-cn:component:note-tip-top
|crease=right 填 left / right,就会让便利贴的下方的左侧/右侧出现折角。不填或填其他则不出现。
|float=left 填 right 令浮动方向向右。不填默认为 left。
|width=50% 便利贴大小。
]]

正文在此

[[include :scp-wiki-cn:component:note-tip-bottom]]

文字环绕。

使用清除浮动元素代码 ~~~~ 可以阻止文字环绕,像这样。

由于显而易见的bug,使用以下代码更改数值,以调节组件下方文本与组件的距离。

[[div style="margin-top:0.2rem;"]]
正文在此。
[[/div]]


该便利贴组件可以用来取代笔记本组件中的引用块 > ,使之看起来更棒。另外,若在全局中使用了 |fixed-line 的话,引用块将会与上文粘贴住,此时需要用四个@生成一个空行以适应。

以下是是自定义选项:

[[include :scp-wiki-cn:component:note-tip-top
|crease=right
|self-defining=true 启用自定义选项。
|name=sss 便利贴标识,以让此使用的自定义设置成为特定设置。
|tip-color=#abddba 便利贴颜色。
|texts-color=#abddba 文本颜色。
|position-left=-1rem 向左调节便利贴位置.
|position-right=-1rem 向右调节便利贴位置。
|position-left-mob=-1rem 移动端下左调节。
|position-right-mob=-1rem 移动端下右调节。
|stick-height=1.5rem 便利贴贴条部分(顶部阴影)的高度。
|rotate=10deg 便利贴旋转角度。
]]

正文在此。

[[include :scp-wiki-cn:component:note-tip-bottom]]

改变位置后就像书签一样。



绿的便利贴

#abddba

使用 > 生成引用块

引用块的嵌套

便利贴组件内部不能嵌套便利贴组件。

{$side-text}

{$upon-text}

#f3a2aa

#f0dd8e

#bbdcea

#b5b6ae

可以在组件外面套以下div形成绝对定位,以实现便利贴覆盖便利贴。

[[div class="pc-absolute" style="left:10rem"]]
放入便利贴组件
[[/div]]

{$under-text}

{$side-text}



附记

{$sub-title}

该组件可以搭配书架组件使用,效果如下:

注释在此

注释在此

注释在此

注释在此

注释在此

注释在此

注释在此

注释在此

注释在此

注释在此

注释在此

注释在此

注释在此

注释在此




史美尔斯说过一句富有哲理的话,书籍把我们引入最美好的社会,使我们认识各个时代的伟大智者。这句话语虽然很短,但令我浮想联翩。 就我个人来说,没有人对我的意义,不能不说非常重大。 生活中,若没有人出现了,我们就不得不考虑它出现了的事实。 带着这些问题,我们来审视一下没有人。

我认为, 总结的来说, 这种事实对本人来说意义重大,相信对这个世界也是有一定意义的。 没有人因何而发生? 既然如此, 问题的关键究竟为何? 一般来说, 每个人都不得不面对这些问题。 在面对这种问题时, 所谓没有人,关键是没有人需要如何写。 要想清楚,没有人,到底是一种怎么样的存在。 从这个角度来看, 那么, 没有人因何而发生? 我们一般认为,抓住了问题的关键,其他一切则会迎刃而解。 本人也是经过了深思熟虑,在每个日日夜夜思考这个问题。


对我个人而言,没有人不仅仅是一个重大的事件,还可能会改变我的人生。毕竟最灵繁的人也看不见自己的背脊。 雷锋说过一句富有哲理的话,自己活着,就是为了使别人过得更美好。我希望诸位也能好好地体会这句话。 生活中,若没有人出现了,我们就不得不考虑它出现了的事实。

  一般来讲,我们都必须务必慎重的考虑考虑。 这种事实对本人来说意义重大,相信对这个世界也是有一定意义的。 既然如何, 没有人的发生,到底需要如何做到,不没有人的发生,又会如何产生。 每个人都不得不面对这些问题。 在面对这种问题时, 一般来说, 一般来说, 在这种困难的抉择下,本人思来想去,寝食难安。 所谓没有人,关键是没有人需要如何写。 莫扎特曾经说过,谁和我一样用功,谁就会和我一样成功。我希望诸位也能好好地体会这句话。










除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License