报纸、书页和便利贴

注意


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

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

评分: +5+–x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.

Usage

On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }

这是什么

一个将你的文本显示在分页上的组件，例如书页。

由 CroquemboucheCroquembouche 制作。

其他模仿分页的组件：

使用方法

在任何维基网站上：

[[include :scp-wiki-cn:component:pages
| medium=vintage-book
| contents=
<h1>你好，欢迎打开我的书。</h1>
希望你能<em>真正享受</em>阅读这本书，这样书写它的一切痛苦都是值得的。
]]

此组件有两个参数。

medium 你的文本将以什么样的媒介呈现？这会决定每一页的背景图片、字体等等。我开放允许添加更多选项——如果你有想法，请与我（Croquembouche）联系。
这些选项在此页底端有详细记录。
contents 你的页面内容。可以添加非常简单的格式和图像。
style 注入文件的 CSS 样式。

内容（contents）参数可以为任意行数。

内容不能添加以下字符：

  • |（分隔符）
  • `（反引号），但可以添加在反斜线之后（\`）
  • ]]（两个右括号），如果添加在一行末尾，必须在之后添加空格


文本格式

内容（contents）参数不会由 Wikidot 呈现。它会输入一个我自己编写的解析器，并输出 HTML。

你所熟知的所有可爱的 Wikidot 语法全都无效，相反，你需要写内联 HTML。

举例说明：

  • 对于粗体字，需要写 <b>文本</b>，而不是 **文本**。
  • 对于全角破折号，需要写原本的全角破折号（—），而不是 --。
  • 对于水平分割线，需要写 <hr>，而不是 -----。

不像 HTML，你不需要在每一行写 <p>…</p>。

图像

使用标准图像 HTML 添加图像：

<img src="http://scp-wiki-cn.wdfiles.com/local--files/你的页面/你的图像.png">

你可以通过添加 position="top" 或 position="bottom" 来将图像移动至页面顶端或底端。无论是什么样的页面都可以用此方法移动图像。图像必须单独处于一行，位于文本之间的图像则无效：

<img position="top" src="URL">

在图像的 style 属性中直接添加如下 CSS 以水平居中：

<img style="display: block; margin-left: auto; margin-right: auto;" src="URL">

如果一张图像太高，不能放置于一页中，那么它的底部会被截去。

分页

有时你可能会说：“好了，就到这里为止。在新的一页开始下一段。这一页的剩余部分可以留空。”

为此，你需要在单独一行上添加分页符：

<br class="page-break">

分页符之后的内容会在下一页上。如果分页符之前有一个带有 position="bottom" 的图像，它会一如预期的那样仍然显示在页面底端。

进阶功能

你可以通过样式（style）参数添加 CSS，也可以在内容（contents）参数中嵌入 Javascript。

使用 CSS

任何添加在样式参数中的 CSS 会被注入到页面中。使用它来例如调整内容、添加可以用在内容中的类（class）、以及改变字体。

举例说明：

[[include :scp-wiki-cn:component:pages
| medium=vintage-book
| style=
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter');

.page {
font-family: 'Architects Daughter', cursive;
margin: 2rem;
}

.page .red {
color: red;
}
| contents=
文本将会显示为<span class="red">手写字体</span>。
]]

你不能在文章的其他地方使用 CSS 模块来设置这个组件的样式——这是唯一的方法。

提示！你可以以任意顺序添加参数，但是最好将样式（style）参数放在内容（contents）参数之上。你的内容参数可能会非常、非常长——你会发现把所有设置和 CSS 放在顶端更加方便一些。

使用 Javascript

内容（contents）参数会被解析为 Javascript 模板字符串，这也是为什么它不能包含反引号。

因此，你可以在内容参数中使用内嵌表达式（${表达式}）添加任意 Javascript，该表达式将会执行并替换回字符串中，例如：

[[include :scp-wiki-cn:component:pages
| medium=vintage-book
| contents=
今天是 ${new Date().toLocaleString("default", { weekday: "long" })}。
]]

这本书会告诉读者当天的日期。

你应该这样做吗？或许不是。但你可以。

请注意，虽然你可以添加任意 Javascript，但“或”运算符（||）不可用，因为它们是由禁止使用的分隔符组成的。但是，你可以使用“和”与“非”自己创建“或”：非((非 x) 和 (非 y)) 等价于 (x 或 y)。在 Javascript 里就是 !((!x) && (!y))。


媒介选项

以下是可用的“媒介”（medium）参数选项。

我正在积极征求新的媒介选项需求。我的意思是，此组件的标题是“报纸、书页和便利贴”，但当下它只能制作一本古旧的书。这个组件的设计目的是尽可能地多功能化，但是现在它只能做一件事情。

如果你对分页格式有任何需求，请联系我（Croquembouche）。

每种媒介都有固定的纵横比，会根据浏览器的宽度决定高度。

媒介 背景 字体 纵横比 图像来源
朴素（默认） plain-preview.png 浏览器默认 4:7
古书 book.300px.png Libre Baskerville 10:9 公共领域

样版
页面版本: 1, 最后编辑于: 20 Mar 2021 18:20
编辑 评分 (+5) 标签 讨论 (0) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License