河岸 主题版式
2022年12月15日
修订 8
评分
34
↑ 34
↓ 0
支持率
100%
总票数 34
Wilson 95% 下界
89.8%
在相同票数下更稳健的支持率估计
争议指数
0.000
评分趋势
按周聚合 加载图表中...
最近修订
1 / 3
最近投票
1 / 4
2025-03-18
2025-03-18
2025-03-18
2024-10-17
2024-09-03
2024-09-03
2024-09-03
2022-12-27
2022-12-18
2022-12-16
相关页面
暂无推荐
页面源码
[[Module CSS]]
@import url('https://scp-wiki-cn.wdfiles.com/local--code/wanderers%3Ariver-bank-theme/1');
[[/module]]
[[iftags +版式]]
[[module css]]
#page-title {display: none;}
[[/module]]
[[=]]
[[div_ class="rivertext"]]
+ 河岸 主题版式
[[/div]]
[[/=]]
@@ @@
[[include :scp-wiki-cn:credit:start]]
页面信息
[[include :scp-wiki-cn:credit:end]]
[[>]]
[[module rate]]
[[/>]]
++ 我要如何使用这个版式？
将以下代码放在你的页面的开头。这个版式与[[[wanderers:river-canon | ]]]有着关联，但你也完全可以自由使用。
[[div_ class="code"]]
@@[[include :scp-wiki-cn:wanderers:river-bank-theme]]@@
[[/div]]
++ 示例
可以通过添加以下代码创建河流动画标题：
[[div_ class="code"]]
@@[[module CSS]]@@
@@:root:lang(cn){@@
@@--river-text-content: "这里输入内容";@@
@@}@@
@@[[/module]]@@
@@[[=]]@@
@@[[div_ class="rivertext"]]@@
@@+ 这里输入内容@@
@@[[/div]]@@
@@[[/=]]@@
[[/div]]
@@--river-text-content@@变量的值应与rivertext div的内容一致。确保你有在rivertext div里面的内容前面加上 "+"符号和空格，并在@@--river-text-content@@变量中的内容周围加上引号。这个文本可以在一个页面上多次使用，但在一个页面中能显示为这种文本的内容只有一种。如果显示有错误的话，可能是你输入的内容太长了。
效果如下：
[[=]]
[[div_ class="rivertext"]]
+ 河岸 主题版式
[[/div]]
[[/=]]
可通过五个连字符“@@-----@@”创建水平分割线。若它未被放在其他部件（诸如引用块）中，则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
-----
如果将“@@-----@@”放入类（class）为 “fancyhr” 的 div 元素中，则可以显示另一种水平线样式，如下所示：
> @@[[div_ class="fancyhr"]]@@
> @@-----@@
> @@[[/div]]@@
效果如下：
[[div_ class="fancyhr"]]
-----
[[/div]]
[[div_ class="fancyborder"]]
任何元素添加 “fancyborder” 类（class），即可显示特殊边框。例如，这是此方块的代码：
[[div_ class="code"]]
@@[[div_ class="fancyborder"]]@@
@@content goes here@@
@@[[/div]]@@
[[/div]]
[[/div]]
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
[[collapsible show="+ 标题" hide="- 标题"]]
+ 1 级标题
++ 2 级标题
+++ 3 级标题
++++ 4 级标题
+++++ 5 级标题
++++++ 6 级标题
[[/collapsible]]
@@ @@
[[tabview]]
[[tab 分页]]
此为分页（tab view）。
[[/tab]]
[[tab 分页]]
看，这有更多文字。
多么精巧绝伦。
[[/tab]]
[[tab 长 Tab]]
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
这是一个长的 tab，它有很多文字。
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[tab 空 Tab]]
[[/tab]]
[[/tabview]]
> 这是一个引用块，在一行字的起始处加上“> ”来创建。
>
> 更多文字
> -----
> 一条分割线
>
> 这些
>> 是
>>> 嵌套
>>> 引用块[[footnote]] 这里是注释 [[/footnote]]
||~ 这是 ||~ 表格 ||
|| 你应该老早 || 就知道怎么 ||
|||| 做这个了吧 ||
[[=]]
小标题与正文字体为 Lato
[[span style="font-family: "BaiWuChangKeKeTi", cursive; font-size: 300%;"]]大标题字体为 白无常可可体[[/span]]
[[span style="font-family: 'Dosis', 'JiYingHuiPianHeYuan', sans-serif; font-weight: bold;"]]UI字体为 Dosis / 极影毁片和圆[[/span]]
[[span style="font-family: "CangJiGaoDeGuoMiaoHei", sans-serif; font-size: 300%"]]版头与动态文字字体为 仓迹高德国妙黑[[/span]]
[[/=]]
[[collapsible show="+ 查看代码" hide="- 隐藏代码"]]
[[code type="css"]]
/* River Bank Theme by IronShears
* Built on Dust Jacket by Woedenaz which was built on Black Highlighter by Woedenaz and Croquembouche
* Header image, river texture, and logo by IronShears, released under CC-BY-SA 3.0
* Fancy Border and Fancy hr Texture by Stygian Blue, edited by IronShears, released under CC-BY-SA 3.0
* Icon by Stygian Blue, released under CC-BY-SA 3.0
* Fonts used are */
/*font imports*/
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400&display=swap');
@import url('https://crimone.github.io/typefaces/BaiWuChangKeKeTi/bwckkt.css');
@import url('https://crimone.github.io/typefaces/CangJiGaoDeGuoMiaoHei/cjgdgmh.css');
@import url('https://crimone.github.io/typefaces/JiYingHuiPianHeYuan/jyhphy.css');
/*dust jacket import*/
@import url("https://scp-wiki-cn.wdfiles.com/local--code/wanderers%3Adustjacket-theme/1");
:root:lang(cn) {
/*Header*/
--gold-foil: linear-gradient( rgb(var(--dark-accent)), rgb(var(--gray-monochrome)));
--gradient-header: url("https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/riverheader.gif");
--logo-image: url("https://evernight-aquarium.wdfiles.com/local--files/files/LANTERN_PROJECT.png");
/* Theme colors*/
--white-monochrome: 168, 188, 185;
/*offwhite-greenish page color*/
--light-pale-gray-monochrome: 76, 131, 161;
/* off-white paper edge color */
--gray-monochrome: 76, 131, 161;
/* light-blue*/
--dark-gray-monochrome: 23, 34, 58;
/* black*/
--light-gray-monochrome: 48, 80, 49;
/* dark green*/
--bright-accent: 119, 141, 118;
/* light green*/
--dark-accent: 23, 34, 58;
/* black*/
--alt-accent: 237, 220, 183;
--very-light-gray-monochrome: var(--white-monochrome);
--medium-accent: var(--bright-accent);
--swatch-menubg-color: var(--light-gray-monochrome);
--swatch-text-tertiary-color: var(--dark-accent);
--swatch-secondary-color: var(--alt-accent);
--black-monochrome: var(--dark-accent);
-login-myaccount-hover-bg-color: var(--bright-accent);
--rating-module-text-color: var(--alt-accent);
--link-color: var(--light-gray-monochrome);
--rating-module-button-plus-color: var(--white-monochrome);
--rating-module-button-negative-color: var(--dark-gray-monochrome);
--rating-module-button-cancel-color: var(--gray-monochrome);
--rating-module-button-credit-color: var(--swatch-secondary-color);
/*Extra*/
--river-text-content: "河岸 主题版式";
--river-texture: url('https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/waves.png');
--river-texture-trans: url('https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/wavestransleft.png');
--river-texture-trans-left: url('https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/wavestransright.png');
--fancy-hr: url("https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/riverhr.png");
--fancy-border: url("https://wanderers-library.wdfiles.com/local--files/component%3Ariver-bank-theme/riverborder.png");
/* Fonts */
--body-font: 'Lato', sans-serif;
--title-font: 'Dosis', "JiYingHuiPianHeYuan", sans-serif;
--UI-font: 'Dosis', "JiYingHuiPianHeYuan", sans-serif;
}
/*BODY STUFF*/
#page-content a{
font-weight: bold;
text-decoration: underline;
}
body{
background-color: rgb(var(--white-monochrome));
}
blockquote, .blockquote, div.blockquote, [class*="blockquote"] {
border-style: dashed;
border-radius: 10px;
background-color: rgb(var(--very-light-gray-monochrome));
}
.fancyborder{
border-image-source: var(--fancy-border);
border-image-slice: 300;
border-image-repeat: round;
}
.fancyhr hr{
border-image-source: var(--fancy-hr);
border-top: 4vw solid transparent;
}
div.page-watch-options a, div.page-watch-options a:visited {
--hover-link-color: red;
}
/*header*/
div#extra-div-1 {
background: var(--gradient-header);
background-repeat: repeat;
background-position: left;
background-size: auto 100%;
}
#login-status #account-options {
background-image: none;
background-color: rgb(var(--black-monochrome));
}
#header{
--login-username-color: var(--alt-accent);
--login-myaccount-color: var(--alt-accent);
}
#login-status {
color: rgb(var(--black-monochrome));
}
#login-status #account-topbutton {
background-color: rgb(var(--alt-accent));
}
#header h1 a {
font-family: "CangJiGaoDeGuoMiaoHei", sans-serif;
font-size: 200%;
}
#header h1 a, #header h1 a::before, #header h1 a::after {
color: rgb(var(--white-monochrome));
}
#header h1 a::before {
text-shadow: black 0.125rem 0rem 0, black 0.0675rem 0.1052rem 0, black -0.052rem 0.1137rem 0, black -0.1237rem 0.0176rem 0, black -0.0817rem -0.0946rem 0, black 0.0355rem -0.1199rem 0, black 0.12rem -0.0349rem 0;
}
#header h1 a::after {
background-repeat: repeat-x;
background-position: center;
background-size: 6rem;
background-image: none;
animation: wave 50s linear infinite;
}
/*Gold foil removal surgery*/
#page-title::before,
.meta-title::before,
#page-title::after,
.meta-title::after {
background-image: var(--gold-foil);
}
hr {
background: var(--gold-foil);
}
#content-wrap {
background-image: var(--river-texture);
background-repeat: repeat-x;
background-position: left bottom;
background-size: 100px;
animation: wave-bottom 50s linear infinite;
}
/*Animations*/
@keyframes wave{
0% {
background-position: 100% 0;
}
100% {
background-position: -99% 0;
}
}
@keyframes wave-bottom{
0% {
background-position-x: 100%;
}
100% {
background-position-x: -99%;
}
}
@keyframes wave-bottom-left{
0% {
background-position-x: -99%;
}
100% {
background-position-x: 100%;
}
}
/*River Title*/
div.rivertext {
height: 12vw;
}
div.rivertext h1 {
font-family: "CangJiGaoDeGuoMiaoHei", sans-serif !important;
font-size: 10vw !important;
}
div.rivertext h1::before {
text-shadow: black 0.125rem 0rem 0, black 0.0675rem 0.1052rem 0, black -0.052rem 0.1137rem 0, black -0.1237rem 0.0176rem 0, black -0.0817rem -0.0946rem 0, black 0.0355rem -0.1199rem 0, black 0.12rem -0.0349rem 0;
content: var(--river-text-content);
}
div.rivertext h1::after {
background-repeat: repeat-x;
background-position: center bottom;
background-size: contain;
background-image: var(--river-texture);
animation: wave 50s linear infinite;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
content: var(--river-text-content);
}
div.rivertext h1,
div.rivertext h1::before,
div.rivertext h1::after {
position: absolute;
left: 0;
right: 0;
}
/*page style*/
#page-content h1{
font-family: "BaiWuChangKeKeTi", cursive;
font-size: 500%;
margin-bottom: -20px;
}
#page-content h2{
font-family: "BaiWuChangKeKeTi", cursive;
font-size: 400%;
margin-bottom: -15px;
}
#page-content h3{
font-family: "BaiWuChangKeKeTi", cursive;
font-size: 300%;
margin-bottom: -12px;px;
}
/*rating bottom page*/
#who-rated-page-area {
background-color: rgb(var(--white-monochrome));
border-radius: 10px;
padding: 9px;
border-style: dashed;
border-color: rgb(var(--bright-accent));
}
/*footer*/
#footer a {
background-color: rgb(var(--black-monochrome));
border-radius: 2px;
margin-left: 10px;
margin-right: 10px;
background-image: none;
}
#license-area a, #license-area a:visited {
pointer-events:auto;
background-color: rgb(var(--black-monochrome));
border-radius: 2px;
margin-left: 10px;
margin-right: 10px;
}
#license-area a:hover{
color: rgb(var(--black-monochrome));
}
#footer {
--footer-bg-color: transparent;
--footer-text-color: rgb(var(--black-monochrome));
--footer-link-color: var(--swatch-text-secondary-color);
--footer-link-hover-color: var(--swatch-primary-darkest);
font-size: 1rem;
height: 100px;
background-image: var(--river-texture-trans-left);
background-position-y: center;
background-size: 100px;
z-index: 1;
position: relative;
margin-top: -60px;
animation: wave-bottom-left 50s linear infinite;
pointer-events: auto;
padding-bottom: 30px;
}
#license-area{
font-size: 1rem;
color: rgb(var(--black-monochrome));
pointer-events: none;
background-color: transparent;
height: 100px;
background-image: var(--river-texture-trans);
background-position-y: center;
background-size: 100px;
z-index: 3;
position: relative;
margin-top: -60px;
animation: wave-bottom 50s linear infinite;
padding-top: 30px;
}
/* === 中文适配 === */
.page-rate-widget-box .rate-points, .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown, .page-rate-widget-box .cancel, .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a, .page-rate-widget-box .cancel a, .rate-box-with-credit-button .page-rate-widget-box .rate-points, .rate-box-with-credit-button .page-rate-widget-box .rateup, .rate-box-with-credit-button .page-rate-widget-box .ratedown, .rate-box-with-credit-button .page-rate-widget-box .cancel, .rate-box-with-credit-button .page-rate-widget-box .rateup a, .rate-box-with-credit-button .page-rate-widget-box .ratedown a, .rate-box-with-credit-button .page-rate-widget-box .cancel a {
line-height: calc(var(--rating-module-height)*1.25);
font-family: var(--UI-font);
}
#u-credit-view div.modalbox>div:first-of-type h2 {
margin-bottom: 0;
}
#u-credit-view div.modalbox>div:first-of-type h2 > span {
font-family: var(--header-font);
font-size: 16.25px;
}
@media only screen and (min-width: 56.25rem) {
#u-credit-view div.modalbox>div:first-of-type h2 > span {
font-size: 26.25px;
}
}
[[/code]]
[[/collapsible]]
[[/iftags]]