这是什么
我
Croquembouche用在一大堆页面上的一大堆各种各样的CSS“改进”，因为我觉得这样就能使其更容易处理。
该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点（也就是我经常干的事）。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。
我不期望用了这个组件的文章的翻译版也会用到这个组件，除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。
这个组件可能不会与其它组件或版式冲突，且即使会冲突，也可能不会有什么影响。
用法
在任意维基上：
[[include :scp-wiki:component:croqstyle]]
该组件被设计于与其它组件一同使用，所以-=-是用来隐藏该文档的。在另一个组件内使用时，请确保将该组件放在[[iftags]]块内，这样你的组件的用户就不会强制同样使用 Croq 风格。
相关组件
其它个人自定义组件（只会改变一点点东西）：
个人自定义版式（在视觉上有大的变化）：
CSS修改
大小合理的脚注
不让脚注达到一百万里那么宽，让你能确实地阅读脚注。
css
.hovertip { max-width: 400px; }
等宽字体编辑/代码
使编辑文本框内字体等宽，且将所有等宽字文本改为Fira Code，也是个明显很优秀的等宽字字体。
css
@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>元素加上亮灰色的背景（{{文本}}），使得代码片段更为突出。
css
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;
}
不要大脸
禁用悬停于某人的头像的时候出现的大图片，因为这图片又蠢又真的很烦人，想看大头像版本的话直接点击一下就行了。
css
.avatar-hover { display: none !important; }
碎裂碎裂
任何在带有nobreak类的div中的文本可以在字母间自动换行。
css
.nobreak { word-break: break-all; }
代码颜色
将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题，但是现在暂时这还是我的个人主题，是从Tomorrow Night Eighties中衍生而来的。
还有，将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中，因为Wikidot嵌入了一大堆语法来使其高亮，不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。
css
: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添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间，让注释不会与其上方或下方的东西重叠。
css
.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的微信聊天框改编的 用于模拟和豆包AI交互的UI页面
首先插入组件头。组件头包含了整个组件的样式部分以及顶部的标题栏。
[[include :scp-wiki-cn:component:roubao inc-top=--]
avatar=image_url
title=肉包AI
sub=在线中 roubao.com
]]
渲染后：
| | |
| inc-top | 辨识符。
使页面读取组件的标题栏部分。仅可且必须填入 --]。 |
| title | 标题。
此即显示在最顶部的主名称。 |
| sub | 副标题。
可以写一些补充信息，状态栏什么的 |
| avator | 头像。
AI用于显示的头像 |
hide
（可选） | 隐藏顶部标题栏。
填入 hide=hide 时将隐藏顶部的标题栏。 |
你做的非常好！下一步就是插入正文
正文分为两种，左栏(AI发言）和 右栏(用户发言）
我们先看左栏的详细参数
渲染后：
| | |
| inc-left | 辨识符。
使页面读取组件的左对话框部分。仅可且必须填入 --]。 |
| icon | 说话人头像。
本版本中删除了name语义，改成更为稳健的，每一个消息都需要输入图片url |
content
（可选） | 聊天框内容。 |
blacklist
（可选） | 黑名单模式。
填入 true 以开启黑名单模式。
开启后对话框的左侧将出现一个红色叹号。用于模拟被拉入黑名单或图片发送失败的情形。 |
我们在这里模拟了AI回复的 复制 赞 踩 重新生成 按钮增加沉浸感
右栏语法基本完全相同
[[include :scp-wiki-cn:component:roubao inc-right=--]
渲染后：
与原版不同，我们单独分离出了图片消息这一类型
渲染后：
这里需要注意的参数是image-url,传入的content会被直接忽略。
还可以在正文中加入提示信息
[[include :scp-wiki-cn:component:roubao inc-tip=--]
content=消息已发出，但被对方拒收了。
]]
| | |
| inc-tip | 辨识符。
使页面读取组件的提示语部分。仅可且必须填入 --]。 |
| content | 提示文本。 |
以及最后的消息栏
[[include :scp-wiki-cn:component:roubao inc-end=--]
content=none
]]
| | |
| inc-end | 辨识符。
使页面读取组件的结尾部分。仅可且必须填入 --]。 |
| content | 文本框内容。
填入任意字符会使右边出现发送按钮，填入 none 以使其还原为“更多功能”按钮。 |
hide
（可选） | 隐藏底部文本框。
填入 hide=hide 时将隐藏底部的文本框。 |
一个可供预览的完整例子
FAQ
Q:这个组件可以和原始的微信聊天框一起用吗？
A:当然可以！肉包相关的CSS已经进行了重新命名，兼容性是非常好的！
Q:我可以单独使用inc-top吗？
A:很抱歉，不可以，必须搭配inc-end,而且你必须先引入inc-top，这个是全部CSS的入口。
Q:为啥我的图片/头像渲染错误了？
A:图片路径不用加引号，或者尝试换用http路径。
Q:移动端上为什么显示不了AI消息框的文字？
A:这个问题比较棘手，还在修复中。
