鱼骨收集的小玩意

简介

嗨大家好!这里是鱼骨——来自SCP基金会Dr FishboneDr Fishbone !

我在这里收集了一些可能会对写作有所帮助或者只是为了好玩或好看的东西,一起来鉴赏叭!


多重折叠

众所周知,[[collapsible]]模块是无法多次嵌套的。

所以你可以用下面这个来完成折叠里的折叠

[[include component:coltop show=点击展开|hide=点击收起]]
内文
[[include component:colend]]

效果:

[[include component:coltop show=点击展开|hide=点击收起]]
内文1
[[include component:coltop show=点击展开更多|hide=点击收起]]
内文2
[[include component:coltop show=点击展开更更更更多|hide=点击收起]]
内文3
[[include component:colend]]
[[include component:colend]]
[[include component:colend]]

[[collapsible]]模块一样,红色部分可以替换为任意字,但不会对语法进行编译。

效果:


浮动展示

快看页面的左上角!那有个评分模块和本页的目录!它为什么不随页面滚动?!

很简单,用div,这↓就是这个界面里用的代码:

[[div style="class:desktop-only; position:fixed; RIGHT: 10pt;TOP : 10pt; display: inline-block; float:top; padding:0 0 0 0; overflow: auto"]]
[[module Rate]]
[[toc]]
[[/div]]

红色几乎可以替换为任意内容。
金色的“RIGHT”和“TOP”可以被“LEFT”和“BOTTOM”替换。即左下浮动。


假链接 假折叠

点我阅读
↑↑↑↑↑↑骗到你了?或许没有。

是的,它是一个假的但是可以触发动态效果的一个“链接”或“折叠”。

你是点不开它的!这个也不行qwq

代码:[# 内容]

红色可以替换为任意文字但是同样无法解析语法。


模糊的字

模糊的字1

这么做:[[span style="color: transparent; text-shadow: 0 0 6px rgba(0,0,0,.3);"]]模糊的字[[/span]]

非常模糊的字 2

这么做:[[span style="color:#transparent;-webkit-filter: blur(2px);filter: blur(2px);" ]]非常模糊的字 [[/span]]

常用的模糊,值越高越模糊。

[[div style="filter: blur(0.1px)"]]
文字
[[/div]]

开合分栏

这个东西会让你在分栏之间选择时进行“开合”的动作。

怎么做?

看下一个分栏!


闪烁字体

首先引入[[include]]模块

[[include :fishbone:blink-text]]

然后想把什么变成闪烁的就用[[span]]或者[[div]]框起来

[[span class="blink"]]闪烁字体[[/span]]

[[div class="blink"]]
多行内容
111
222
[[/div]]


滚动屏



时间轴

这是什么:一种简单而实用的展现两者事件进行对比的时间轴代码,由Sekai_sSekai_s创建。
效果展示:

左节点
右节点
节点
左标题

左描述

右标题

右描述

右节点
节点
左标题

左描述

未完
待续

改变固定地点折叠


奥森图标

这里是一些小图标,可以用在文档中
一些例子:
此页已锁!
设置
如何使用:在你想放这些小图标的时候插入这个

[[span class="fa fa-cog"]]内容[[/span]]

其中,fa-log可以被替换为其他图标的id

id大全以及拓展教程


文字外框

1234

[[span style="border: solid 1px #000"]]1234[[/span]]

输入密码跳转页面

(密码是1)

[[html]]
<head>
<script language="javascript">

function LogIn(){
loggedin=false;
password="";
password=prompt("密码:","");
password=password.toLowerCase();

// Add password-->
if (password=="1") {
loggedin=true;
window.open('/scp-cn-7777');
}

// If login incorrect -->
if (loggedin==false) {
alert("密码错误");
}
}

</script>

</head>

<body>
<form><input type=button value="存取文件" onClick="LogIn()"></form>
</body>
[[/html]]

[[html]]
<html>
<head>
<script type="text/javascript">
function setVar()
{
    if (sessionStorage.read != 1)
    {
        sessionStorage.setItem('read', 1);
    }
}
</script>
</head>
<body onLoad="setVar();">
</body>
</html>
[[/html]]

反色

这是绿色字
[[div style="filter:invert(1);"]]
[[/div]]

这是绿色字
[[div style="filter:invert(0.7);"]]
[[/div]]

这是绿色字
[[div style="filter:invert(0.5);"]]
[[/div]]

这是绿色字
[[div style="filter:invert(0.3);"]]
[[/div]]

这是绿色字
[[div style="filter:invert(0);"]]
[[/div]]

假评分模块

http://fishbone.wikidot.com/fakeratemodule

页面工具

页面右下角的那个小工具。

[[include :fishbone:pagetool
|elem=#top-bar
]]

http://fishbone.wikidot.com/pagetool

隐藏文本-鼠标悬停显现

这段话中有些字被隐藏了,鼠标悬停在上面才会显现。

首先插入:

[[include :fishbone:hide-text]]

然后在你想要实现效果的文字处插入:

[[span id="hidtext"]]隐藏文本-鼠标悬停显现[[/span]]

故障屏

这里怎么一闪一闪的,是不是屏幕故障?
首先插入:

[[include :fishbone:broken]]

然后在你想要实现效果的地方插入:

[[div class="broken"]]
内容
[[/div]]

文本替换

你点点看,点我替换下面的文本,有没有什么变化?
111111111

你点点看,点我还原,是不是还原了?
2222222222222222222222222222222222222222222222222222222222222222222

[[module CSS]]
#u-a:target ~ .s, #u-a ~ .e {display: none;}
#u-a ~ .s, #u-a:target ~ .e {display: block;}
[[/module]]
[[div id="u-a" style="display:none;"]]
[[/div]]
[[div class="s"]]
你点点看,[[a href="#u-a"]]点我替换下面的文本[[/a]],有没有什么变化?
111111111
[[/div]]
[[div class="e"]]
你点点看,[[a href="#aaaa"]]点我还原[[/a]],是不是还原了?
2222222222222222222222222222222222222222222222222222222222222222222
[[/div]]

懒人SCP更多信息栏

负责站点 站点主管 项目负责人 指派特遣队
{$site} {$manager} {$researcher} {$mtf}

[[include :fishbone:lazy-info-for-scp
|site=负责站点
|manager=站点主管
|researcher=研究负责人
|mtf=指派特遣队
]]


旋转警告版

https://fishbone.wikidot.com/rotating


白底图片抠图

.aa {
  mix-blend-mode: darken;
}

单独滚动框

就是这样
就是这样
就是这样
就是这样
就是这样

div.gundong {
    overflow: auto;
    margin: 0 auto;
    max-height: 20vh;
    border: 1px solid #969696;
    padding: 1em;
}

[[div class="gundong"]]
[[/div]]

就是这样
就是这样
就是这样
就是这样
就是这样

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