繁简转换 组件

注意：

此页为于后室维基内部所使用的组件页面。该页面内容可在其它页面中被使用或引用。

这是什么

我Croquembouche用在一大堆页面上的一大堆各种各样的CSS“改进”，因为我觉得这样就能使其更容易处理。

该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点（也就是我经常干的事）。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。

我不期望用了这个组件的文章的翻译版也会用到这个组件，除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。

这个组件可能不会与其它组件或版式冲突，且即使会冲突，也可能不会有什么影响。

用法

在任意维基上：

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

该组件被设计于与其它组件一同使用，所以-=-是用来隐藏该文档的。在另一个组件内使用时，请确保将该组件放在[[iftags]]块内，这样你的组件的用户就不会强制同样使用 Croq 风格。

相关组件

其它个人自定义组件（只会改变一点点东西）：

• RSO组件 — Rounderhouse

个人自定义版式（在视觉上有大的变化）：

• Magnus网络格式 — DrMagnus
• flop风格 CSS — Lt Flops
• 空白风格 CSS — HarryBlank
• 占位风格 CSS — Placeholder McD

CSS修改

大小合理的脚注

不让脚注达到一百万里那么宽，让你能确实地阅读脚注。

.hovertip { max-width: 400px; }

等宽字体编辑/代码

使编辑文本框内字体等宽，且将所有等宽字文本改为Fira Code，也是个明显很优秀的等宽字字体。

@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; }

电传打字机背景

给<tt>元素加上亮灰色的背景（{{文本}}），使得代码片段更为突出。

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;
}

不要大脸

禁用悬停于某人的头像的时候出现的大图片，因为这图片又蠢又真的很烦人，想看大头像版本的话直接点击一下就行了。

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

碎裂碎裂

任何在带有nobreak类的div中的文本可以在字母间自动换行。

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

代码颜色

将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题，但是现在暂时这还是我的个人主题，是从Tomorrow Night Eighties中衍生而来的。

还有，将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中，因为Wikidot嵌入了一大堆语法来使其高亮，不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。

: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中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。

你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间，让注释不会与其上方或下方的东西重叠。

……就像这样！

.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; }

• 　

  这是什么？

  这是由 hoah2333 制作的繁简转换组件第二版。相比第一版来说，本组件的优点为不需要开两个页面，使得评分可以统一。

  ---

  使用方法

  若需使用本组件，请先在页面的顶部放置下方代码：

  [[include :backrooms-wiki-cn:component:tr-translation inc-css=--]]]

  inc-css	引入组件的样式代码。 默认值：--]

  随后在你要向读者展示的第一种语言变体处放置下方代码：

  [[include :backrooms-wiki-cn:component:tr-translation inc-start=--]]]
  [[include :backrooms-wiki-cn:component:tr-translation cont-start=--]
  | lang=cn/tr
  ]]

  inc-start	引入繁简转换组件头。 默认值：--]
  cont-start	引入繁简文本的容器头。 默认值：--]
  lang	繁简文本的语言。 填写 cn 表示容器内文本为简体中文，右下角将显示切换至繁体中文的按钮。 填写 tr 表示容器内文本为繁体中文，右下角将显示切换至简体中文的按钮。

  
  并在下方写上你以第一种语言变体书写的正文。

  正文结束后，放置下方代码：

  [[include :backrooms-wiki-cn:component:tr-translation cont-end=--]]]

  cont-end	引入繁简文本的容器尾。 默认值：--]

  在要向读者展示的第二种语言变体处放置下方代码：

  [[include :backrooms-wiki-cn:component:tr-translation cont-start=--]
  | lang=cn/tr
  ]]

  
  并在下方写上你以第二种语言变体书写的正文。

  正文结束后，放置下方代码：

  [[include :backrooms-wiki-cn:component:tr-translation cont-end=--]]]

  
  最后结束本组件的引用。

  [[include :backrooms-wiki-cn:component:tr-translation inc-end=--]]]

  inc-end	引入繁简转换组件尾。 默认值：--]

  没看懂？实际上非常简单，合起来的样子是这样的：

  [[include :backrooms-wiki-cn:component:tr-translation inc-css=--]]]
  [[include :backrooms-wiki-cn:component:tr-translation inc-start=--]]]
  [[include :backrooms-wiki-cn:component:tr-translation cont-start=--]
  | lang=cn/tr
  ]]
  第一种语言变体正文。
  [[include :backrooms-wiki-cn:component:tr-translation cont-end=--]]]
  [[include :backrooms-wiki-cn:component:tr-translation cont-start=--]
  | lang=cn/tr
  ]]
  第二种语言变体正文。
  [[include :backrooms-wiki-cn:component:tr-translation cont-end=--]]]
  [[include :backrooms-wiki-cn:component:tr-translation inc-end=--]]]

  
  你可以在 inc-start 的上方与 inc-end 的下方自由地插入任何简繁通用的内容，比如 [[module css]]、授权模块等。
  　

  呢個係乜嘢？

  呢個係由 hoah2333 製作嘅繁簡轉換元件第二版。相比第一版嚟講，呢個元件嘅優點係唔需要開兩個頁面，令到評分可以統一。

  ---

  使用方法

  想要用到呢個元件，請先喺頁面嘅頂部放低下邊嘅代碼：

  [[include :backrooms-wiki-cn:component:tr-translation inc-css=--]]]

  inc-css	引入組件嘅樣式代碼。 默認值：--]

  之後喺你要俾讀者展示嘅第一種語言變體嘅位置放低下邊嘅代碼：

  [[include :backrooms-wiki-cn:component:tr-translation inc-start=--]]]
  [[include :backrooms-wiki-cn:component:tr-translation cont-start=--]
  | lang=cn/tr
  ]]

  inc-start	引入繁簡轉換元件頭。 默認值：--]
  cont-start	引入繁簡文字嘅容器頭。 默認值：--]
  lang	繁簡文字嘅語言。 填寫 cn 表示容器入邊嘅文字係簡體中文，右下角會顯示切換成繁體中文嘅按鈕。 填寫 tr 表示容器入邊嘅文字係繁體中文，右下角會顯示切換成簡體中文嘅按鈕。

  
  並喺下邊寫低你用第一種語言變體寫成嘅正文。

  正文結束之後，放低下邊嘅代碼：

  [[include :backrooms-wiki-cn:component:tr-translation cont-end=--]]]

  cont-end	引入繁簡文字嘅容器尾。 默認值：--]

  喺要俾讀者展示嘅第二種語言變體度放低下邊嘅代碼：

  [[include :backrooms-wiki-cn:component:tr-translation cont-start=--]
  | lang=cn/tr
  ]]

  
  並係下邊寫低你用第二種語言變體寫成嘅正文。

  正文結束之後，放低下邊嘅代碼：

  [[include :backrooms-wiki-cn:component:tr-translation cont-end=--]]]

  
  最後結束呢個元件嘅引用。

  [[include :backrooms-wiki-cn:component:tr-translation inc-end=--]]]

  inc-end	引入繁簡轉換元件尾。 默認值：--]

  未睇明？實際上非常簡單，合起身嘅樣係咁嘅：

  [[include :backrooms-wiki-cn:component:tr-translation inc-css=--]]]
  [[include :backrooms-wiki-cn:component:tr-translation inc-start=--]]]
  [[include :backrooms-wiki-cn:component:tr-translation cont-start=--]
  | lang=cn/tr
  ]]
  第一種語言變體正文。
  [[include :backrooms-wiki-cn:component:tr-translation cont-end=--]]]
  [[include :backrooms-wiki-cn:component:tr-translation cont-start=--]
  | lang=cn/tr
  ]]
  第二種語言變體正文。
  [[include :backrooms-wiki-cn:component:tr-translation cont-end=--]]]
  [[include :backrooms-wiki-cn:component:tr-translation inc-end=--]]]

  
  你可以喺 inc-start 嘅上邊同埋 inc-end 嘅下邊自由咁插入任何簡繁通用嘅內容，譬如 [[module css]]、授權模塊等。