简介
嗨大家好!这里是鱼骨——来自SCP基金会的Dr Fishbone !
我在这里收集了一些可能会对写作有所帮助或者只是为了好玩或好看的东西,一起来鉴赏叭!
一些小工具
这里我放了一些辅助链接:
站内页面
最基本的维基语法
格式资源
高级玩意
专业的语法
更多板式
它叫ACS
站外页面
RGB颜色代码获取工具
颜色预设值参考
一些文字转换工具和表情图标
多重折叠
众所周知,[[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
代码:[# 内容]
红色可以替换为任意文字但是同样无法解析语法。
模糊的字
模糊的字
这么做:[[span style="color: transparent; text-shadow: 0 0 6px rgba(0,0,0,.3);"]]模糊的字[[/span]]
非常模糊的字
这么做:[[span style="color:#transparent;-webkit-filter: blur(2px);filter: blur(2px);" ]]非常模糊的字 [[/span]]
页中页
这么做:
[[html]]
<Iframe src="http://scp-wiki-cn.wikidot.com/" width="800" height="300 scrolling="no" frameborder="0"></iframe>
[[/html]]
红色部分为你要展示的页中页链接。
开合分栏
这个东西会让你在分栏之间选择时进行“开合”的动作。
怎么做?
看下一个分栏!
首先,在你的页面中插入以下代码
[[include :fishbone:sliding-tab]]
之后再在你想要的地方加上分栏的代码
[[tabview]]
[[tab 1号分栏]]
11111111
[[/tab]]
[[tab 2号分栏]]
2222222222
[[/tab]]
[[tab 3号分栏]]
33333333333333
[[/tab]]
[[/tabview]]
滚动屏
滚啊滚~ 这个滚动屏会在你划走时停留在你的页面上方。 咕噜咕噜
首先插入css
[[module css]]
.ticker {
background-color: #00537c;
color: gainsboro;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
border: 2px darkcyan solid;
position: sticky;
top: 0;
text-align: center;
z-index: 1;
}
.ticker p {
font-size: 1.3rem;
font-family: 'Noto Sans SC', monospace;
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
.blinkbar {animation: blink 1.5s infinite; letter-spacing: -0.13em;}@keyframes blink{to{opacity: .0;}}@keyframes flicker {0% {opacity: 0.9890; }5% {opacity: 0.5842; }10% {opacity: 0.9865; }15% {opacity: 0.0412; }20% {opacity: 0.6255; }25% {opacity: 0.3157; }30% {opacity: 0.7328; }35% {opacity: 0.4654; }40% {opacity: 0.9128; }45% {opacity: 0.2449; }50% {opacity: 0.5485; }55% {opacity: 0.6438; }60% {opacity: 0.1180; }65% {opacity: 0.9085; }70% {opacity: 0.0266; }75% {opacity: 0.6795; }80% {opacity: 0.7812; }85% {opacity: 0.0117; }90% {opacity: 0.2239; }95% {opacity: 0.8897; }100% {opacity: 0.2260; }}@keyframes overlay-anim {0% {visibility: hidden; }10% {visibility: hidden; }11% {visibility: visible; }50% {visibility: hidden; }100% {visibility: hidden; }}
[[/module]]
你可以修改红色的参数来调整背景颜色;
你可以修改金色的参数来调整文字颜色。
再在你想要显示滚动屏的地方输入:
[[div class="ticker"]]
滚啊滚~ 这个滚动屏会在你划走时停留在你的页面上方。 咕噜咕噜
[[/div]]
时间轴
这是什么:一种简单而实用的展现两者事件进行对比的时间轴代码,由Sekai_s创建。
效果展示:
首先插入CSS:
[[module css]]
table.timeline {
width: 100%;
border-spacing: 0;
}
table.timeline td {
vertical-align: top;
}
table.timeline td.label {
font-size: 1.5em;
font-weight: bold;
width: 100%;
text-align: center;
}
table.timeline td.left {
border-right: solid 1px #999;
width: 50%;
text-align: right;
padding: 5px 6px 5px 0;
}
table.timeline td.right {
padding: 5px 0 5px 6px;
}
table.timeline td.center{
padding: 5px 0 5px 6px;
width: 50%;
text-align: right;
}
table.timeline div.crucial {
font-family: monospace;
font-size: 1.1em;
color: #999;
}
table.timeline div.title {
font-size: 1.25em;
}
table.timeline div.description {
display: inline-block;
text-align: left;
padding: 2px 0 8px;
}
table.timeline div.description p:first-child {
margin-top: 0;
}
[[/module]]
继续引用:
你的所有代码,必须使用这个框起来
[[table class="timeline"]]
里面的东西
[[/table]]
左右分栏
请注意内容之间的左右对应以及适当的空行。不需要某一左侧或者右侧时,则留空。
[[row]]
[[cell class="left"]]
左侧的内容
[[/cell]]
[[cell class="right"]]
右侧的内容
[[/cell]]
[[/row]]
插入小节点
[[cell class="left"]]
[[div_ class="crucial"]]
左节点
[[/div]]
[[/cell]]
[[cell class="right"]]
[[div_ class="crucial"]]
右节点
[[/div]]
[[/cell]]
如果你只想要一侧的节点,则直接输入:
(以左侧为例)
[[div_ class="crucial"]]
左节点
[[/div]]
插入大节点
[[cell class="label" colspan="2"]]
节点
[[/cell]]
当然,这个也可以像小节点一样。用[[cell]]模块来实现左右调整。
插入描述内容
[[div_ class="title"]]
左描述
[[/div]]
当然,这个也可以像小节点一样。用[[cell]]模块来实现左右调整。
结句
[[row]]
[[cell class="center"]]
[[div_ class="crucial"]]
未完
[[/div]]
[[/cell]]
[[cell class="right"]]
[[div_ class="crucial"]]
待续
[[/div]]
[[/cell]]
[[/row]]
改变固定地点折叠
首先引入CSS:
[[module css]]
.colp .collapsible-block a.collapsible-block-link {
color: #000000;
}
[[/module]]
其次用一个div把你想要改变的折叠框起来:
[[div class="colp"]]
[[collapsible show="+ 显示" hide="- 隐藏"]]
内容
[[/collapsible]]
[[/div]]
红色用于替换为你喜欢的颜色的16进制色码。
奥森图标
这里是一些小图标,可以用在文档中
一些例子:
此页已锁!
设置
如何使用:在你想放这些小图标的时候插入这个
[[span class="fa fa-cog"]]@< >@[[/span]]
其中,fa-log可以被替换为其他图标的id
id大全以及拓展教程