组件：肉包短视频

这是什么

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

[[iftags +component]]

This is a component to make the mobile sidebar button active on desktop-size screen.
To use, put the following:

[[include :scp-wiki:component:toggle-sidebar]]

If used with a theme, it's recommended to put said theme after this [[include]].

(Use this version by Woedenaz if you're using Black Highlighter)

---

/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        top: 0.5em;
        left: 0.5em;
        z-index: 5;
        font-family: 'Lucida Sans Unicode','Lucida Grande','Lucida Sans','Times New Roman',Helvetica,Roboto,sans-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888;
        background-color: #fff;
        border-radius: 3em;
        color: #888;
        pointer-events: auto;
}
 
@media not all and (max-width: 767px) {
 
    #top-bar .mobile-top-bar {
        display: block;
        pointer-events: none;
    }
 
    #top-bar .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 44.5rem;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -18rem;
        width: 15.25rem;
        height: 100%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: rgba(0,0,0,0.1);
        transition: left 0.4s ease-in-out;
 
        scrollbar-width: thin;
    }
 
    #side-bar:target {
        left: 0;
    }
    #side-bar:focus-within {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 17rem;
        opacity: 0;
        z-index: -1;
        visibility: visible;
    }
    #side-bar:not(:target) .close-menu { display: none; }
 
    #top-bar .open-menu a:hover {
        text-decoration: none;
    }
}

[[/iftags]]

著作信息

---

肉包-短视频 组件
作者：Catill Zhang
感谢chatgpt老师解答各类语法问题

---

肉包营销号短视频 组件
作者：Catill Zhang

这是什么？

这是一个模拟 营销号短视频 及 评论区 的UI组件

震惊！少女意识被困肉包？

抽取活人意识制造AI！

请严查浪潮涌动公司！

评论 10

🔍猜你想搜：肉包和豆包的区别

肉包

赞美肉包ai!肉包ai就是卡密！
我只是一个普通人类。

2小时前 回复

♡ 214

我

肉包不要偷玩我手机

2小时前

回复

♡

214

两个组件(视频和评论区)都可单独使用！

下面，我们来介绍参数

[[include scp-wiki-cn:component:roubao-shorts shorts=--]
|id=short1
|url=image_url
|content-1=震惊，肉包AI震撼发布
|content-2=脚踢chatgpt，拳打Claude
|content-3=用户表示：豆包，一口吃掉！
]]

参数解释：

shorts（必填）	辨识符。 使页面读取组件的提示语部分。仅可且必须填入 --]。
id（必填）	必填，每个短视频框的独特识别符，请保证id与短视频实例的一一对应。 只能使用数字，字母，或者“-”，其他字符（如空格）也需会产生未知bug
url（必填）	必填，短视频背景图片。
content-1 到 content-3（必填）	自上而下的标题内容，必填。
color-main-1 到 color-main-3（选填）	自上而下每一行标题的主颜色
color-side-1 到 color-side-3（选填）	自上而下每一行标题的边缘颜色加粗
like-on（选填）	是否点亮红心
fav-on（选填）	是否点亮收藏

非常好，接下来是评论区！

其逻辑和绝大多数聊天组件类似 需要首先引入题头。

[[include scp-wiki-cn:component:roubao-shorts cmt-header=--]
|content-lf=评论(10)
|content-ri=猜你想搜：肉包和豆包的区别
]]

评论 10

🔍猜你想搜：肉包和豆包的区别

cmt-header（必填）	辨识符。 使页面读取组件的提示语部分。仅可且必须填入 --]。
content-lf（选填）	选填,左侧内容
content-ri（选填）	选填,右侧内容
hide （选填）	若传入该参数为hide则隐藏header的全部视觉元素

下一步，是插入评论具体的item
这里我们可以任意控制缩进等级

[[include scp-wiki-cn:component:roubao-shorts cmt-item=--]
|id=user1
|name=肉包
|avatar=url
|have_image=true
|image_url=image_url
|content=我是肉包
|content-lf=两小时前 回复
|content-ri=♡ 112
|level=0
]]

我是name

我是content内容

我是content-lf

我是content-ri

cmt-item（必填）	辨识符。 使页面读取组件的提示语部分。仅可且必须填入 --]。
id（必填）	必填，独立用户辨识符，相同辨识符用户将share相同头像，请保证id与短视频实例的一一对应。 只能使用数字，字母，或者“-”，其他字符（如空格）也需会产生未知bug
level（必填）	缩进等级，目前支持0-2
avatar（必填）	必填，用户头像
content（必填）	用户发言内容
have_image(选填）	若填入false则无需传入image_url
image_url（选填）	在聊天内容中附加一张图片
content-lf（选填）	选填,左下侧内容
content-ri（选填）	选填,右下侧内容

我

我是零级缩进

2小时前

回复

♡

214

我

我是一级缩进

2小时前

回复

♡

214

我

我是二级缩进

2小时前

回复

♡

214

非常好！最后只需要完成封口

[[include scp-wiki-cn:component:roubao-shorts cmt-end=--]
]]

FAQ

Q:这个组件的兼容性如何？
A:目前来看应该是不会有问题的！

Q:shorts组件的id一定要有吗？
A:是的，必须得有，且需要满足一一对应且无空格和"."，最好是纯粹的数字和字母

Q:为啥我的图片/头像渲染错误了？
A:图片路径不用加引号，或者尝试换用http路径。

Q:移动端适配如何？
A:我个人测试来看基本没有问题！

Q:我可以不引入cmt-header（直接用cmt-item)吗？
A:很遗憾不可以，必须引入他，他是comment相关css的入口

希望你喜欢我的组件！玩得开心！