版式：4chan

[a / c / g / k / m / o / p / v / vg / vm / vmg / vr / vrpg / vst / w] [vip / qa] [cm / lgbt / x / xs] [编辑] [设置] [搜索] [移动端] [主页]

/x/ - Paranormal


[开始一个新的讨论串]

Anonymous 05/14/19(周二)20:29:30 No.22672042
The Backrooms

假如你不小心在错误的地方从现实中切出，你最终将坠入后室，这里只有腐臭的潮湿地毯，令人发狂的单调黄色，荧光灯全力运作发出的永无止境的嗡鸣，还有令人深陷其中的大约六亿平方英里随机分割的空荡房间。倘若你听见有什么东西在附近徘徊，愿上帝保佑你吧，因为它一定也听见了你的声音……

>>

Manganian 05/14/19(周六)20:49:25 No.2314720 ▶ >>49760488

>>49760284 (OP)
将 [[include :backrooms-wiki-cn:theme:4chan]] 放在你的文章中即可使用该版式。

---

一般信息

版式由Manganian制作，其类似于著名的4chan论坛，/x/ - Paranormal，也就是The Backrooms creepypasta所发表的地方。该版式专为Backrooms wiki，Wanderers' Library和SCP wiki所制作。

感谢Ross Dear的代码帮助以及绿灯。

要在您的页面使用这个版式，请将以下内容放在页面的任何一个地方：

添加：

[[include :backrooms-wiki-cn:theme:4chan]]

字体

版头（实际上被隐藏了），标题和正文所使用的字体是Kanit。

等宽字体是Space Mono。

若想看到页面底部的底部选项，请将/norender/true/1放入链接尾部。

注意，只有这个页面不显示页面标题。但其在任何页面上，都会在页面顶部显示。若要隐藏，请使用以下代码：

[[module CSS]]
#page-title {
display: none;
}
[[/module]]

---

如何使用Chan Divs

这个版式支持任何类似于4chan的界面的div，代码根据Westrin的SCP-4991的CSS代码修改。

讨论

在这里我将讲解如何使用div将你的页面看起来像4chan。

讨论块

有关讨论块并没有什么过多技术，因为版式默认颜色与div的背景色相同。

[[div class="chan thread-container"]]
（这里应该还有其他div）
[[/div]]

（这里应该还有其他div）

文件

文件用于对其顶部的讨论块进行回复，编辑IMAGE-NUMBERS.png到您的自定义文本。[SIZE]应该是个数字而[X]和[Y]是文件的宽和高。请注意，这并不会使图像可见，你编辑的还只是原始文本。
当你把div放入文中后，将（[[f<image URL width="Xpx"]]）也放入文中即可看到图像。

[[div class="chan-file"]]
File: ##0000EE|__图像号码.png__## ([SIZE] KB, [X]x[Y])
[[f<image URL width="Xpx"]]
[[/div]]

File: 66725362.png (213 KB, 385x398)

发帖信息

这个div展示了标准的发帖信息：用户、日期、时间和帖子ID。

[[div class="post-info"]]
##117743|**[用户名]**## 月/日/年(星期)时:分:秒 No.号码
[[/div]]

Anonymous 04/08/19(周六)11:27:17 No.6546265

帖子内容

帖子内容中的绿色字体可使用右侧代码：##789922|>文本##。

[[div class="post-content"]]
##789922|>是我##
##789922|>我蜜蜂##
哔哔哔哔
[[/div]]

>是我
>我蜜蜂
哔哔哔哔

回复

你也可以给帖子添加回复。

回复块

[[div class="reply-container"]]
（这里应该还有其他div）
[[/div]]

（这里应该还有其他div）

回复箭头

就是个箭头:P，这些通常被放在“reply-container”后面。

[[div class="reply-arrows"]]
@@>>@@
[[/div]]

>>

回复

若要创建回复（必须在回复块里），必须得包含reply div，post-info div和post-content div。

[[div class="reply"]]
[[div class="post-info"]]
##117743|**[用户名]**## 月/日/年(星期)时:分:秒 No.号码 ##000080|▶ __@@>>@@号码__##
[[/div]]
[[div class="post-content"]]
##000080|__@@>>@@号码(OP)__##
文本
[[/div]]
[[/div]]

Anonymous 05/14/19(周二)20:31:20 No.6227552 ▶ >>3663722

>>5367282 (OP)
文本

所以，在添加reply-container，reply-arrows，reply，post-info和post-content后它看起来应该是这样的：

[[div class="reply-container"]]
[[div class="reply-arrows"]]
@@>>@@
[[/div]]

[[div class="reply"]]
[[div class="post-info"]]
##117743|**[用户名]**## 月/日/年(星期)时:分:秒 No.号码 ##000080|▶ __@@>>@@号码__##
[[/div]]

[[div class="post-content"]]
##000080|__@@>>@@号码 (OP)__##
Text.
[[/div]]
[[/div]]
[[/div]]
[[/div]]

>>

Anonymous 04/09/16(周六)13:15:20 No.49760463 ▶ >>49760488

>>49760284 (OP)
这是个回复。

其他

其他就没有重要的div了。

总结

[[div class="summary"]]
X回复被省略，点此查看。
[[/div]]

10回复被省略，点此查看。

帖子模板：

[[div class="chan thread-container"]]
[[div class="chan-file"]]
File: ##0000EE|__图像号码.png__## ([SIZE] KB, [X]x[Y])
[[f<image link.png width="230px"]]
[[/div]]
[[div class="post-info"]]
##117743|**Anonymous**## 月/日/年(星期)时:分:秒 No.号码
[[/div]]
[[div class="post-content"]]
文本
[[/div]]
[[div class="reply-container"]]
（这里应该还有其他div）
[[/div]]
[[div class="reply-arrows"]]
@@>>@@
[[/div]]
[[div class="reply"]]
[[div class="post-info"]]
##117743|**Anonymous**## 月/日/年(星期)时:分:秒 No.号码 ##000080|▶ __@@>>@@号码__##
[[/div]]
[[div class="post-content"]]
##000080|__@@>>@@号码 (OP)__##
文本
[[/div]]
[[/div]]
[[/div]]

File: 636272462.png (136 KB, 402x398)

Anonymous 06/13/22(周五)21:36:49 No.63728362

>是我
>我蜜蜂

profit

>>

Anonymous 06/10/22/(周五)21:37:42 No.6263184 ▶ >>2748624

>>62555263 (OP)
嗡嗡嗡嗡嗡嗡蜜蜂

示例

嗡嗡嗡嗡嗡

可以使用五个连字符"-" 创建水平线，如果未将其放置在任何内容（例如引用块）中，则可以扩展到整个页面。分隔本文档各部分的行是水平线。

---

在行首处插入1到6个加号”+”以创建标题

+ 标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

制表器

这是一个表格预览。

制表

看我，这里更多文字了。

真有趣。

长tab

这是个长tab，字儿还挺多。

这是个长tab，字儿还挺多。

这是个长tab，字儿还挺多。

这是个长tab，字儿还挺多。

这是个长tab，字儿还挺多。

这是个长tab，字儿还挺多。

这是个长tab，字儿还挺多。

这是个长tab，字儿还挺多。

这是个长tab，字儿还挺多。

这是个长tab，字儿还挺多。

这是个长tab，字儿还挺多。

这是个长tab，字儿还挺多。

这个空tab因为一些原因有一个很长的名字，这到底是为啥？

空tab

空tab

空tab

空tab

空tab

这是一个引用块，在字行的起始处加上“> ”以创建。
更多文字

---

还有水平线

嵌套引用

这是个	表儿
你应该	已经知道
怎么做了

[[div class="darkblock"]]

[[/div]]

[[div class="lightblock"]]

[[/div]]

[[div class="styled-quote"]]

[[/div]]

插入文本
[[div class="titleblock"]]
[[span class="titlebox"]]插入文本[[/span]]

[[/div]]

+ 版式源代码

/*-------------------------13 June 2022------------------------*\
 ------------------------- [4chan Theme]--------------------------
--------------------------[by Manganian]------------------------
-----------based on Liminal Theme by Lynch and Etoile----------
\*----For Backrooms Wiki, SCP Wiki and Wanderer's Library-------*/
 
/*Imports*/
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Space+Mono&display=swap');
@import url('https://fontlibrary.org/face/fantasque-sans-mono');
 
:root {
    /*
    Basic Variables
    */
 
    /*Theme Name*/
    --theme-base: "black-highlighter";
    --theme-id: "4chan-theme";
    --theme-name: "4chan Theme";
 
    /*Header*/
        /* Placeholders */
    --logo-image: url("placeholder");
    --header-title: " ";
    --header-subtitle: " ";
 
        /* Fonts and colors */
    --body-font: 'Kanit', sans-serif;
    --header-font: 'Kanit', sans-serif;
    --title-font: 'Kanit', sans-serif;
    --mono-font: 'Space Mono', monospace;
 
    --white-monochrome: 238, 242, 254;
    --pale-gray-monochrome: 213, 218, 240;
 
    --light-gray-monochrome: 52, 52, 92;
    --gray-monochrome: 238, 242, 255;
    --black-monochrome: 0, 0, 0;
    --bright-accent: 52, 52, 92;
    --medium-accent: 52, 52, 92;
    --dark-accent: 52, 52, 92;
    --pale-accent: 52, 52, 92;
    --thing: 52, 52, 92; /* selected tab background */
    --niewiem: 238, 242, 255; /* niewiem - body background */
 
    --swatch-topmenu-border-color: var(--niewiem);
 
    --link-color: 171, 171, 171;
    --hover-link-color: 52, 52, 92;
 
    --background-gradient-distance: 0rem;
 
    --gradient-header: linear-gradient(to top, rgba(var(--niewiem)) 0%, rgba(var(--niewiem), 0.90) 100%);
    --diagonal-stripes: linear-gradient(transparent 0);
 
}
 
/* sd banner colours */
 
.sd-container {
   --sd-text:var(--white-monochrome);
   --sd-border:var(--black-monochrome);
   --sd-bullets:var(--medium-accent);
   --sd-symbol:var(--white-monochrome);
}
 
/*
Selectors and Classes
*/
/*
div#page-options-bottom-2>a, div#page-options-bottom>a,
div#page-options-bottom,
div#page-info,
*/
#login-status {
display: none;
}
 
#top-bar ul,
#top-bar {
    display: none;
}
 
#search-top-box {
display: none;
}
 
/*Title of the Page*/
 
#page-title {
    text: align-center;
    border-color: var(--niewiem);
    border-color: var(--ct_col_page-title-border);
    color: var(--dark-accent);
    color: #af0a0f;
    font-weight: normal;
}
 
#skrollr-body {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("https://7bye.com/hoah/i/2024/01/19/iogbov.png");
    background-repeat: repeat-x;
    background-size:  inherit;
}
 
#container {
   background-image: rgb(var(--niewiem))!important;
}
 
#header, #top-bar {
   background-attachment: scroll;
}
 
#header {
   background-image: none;
   height: 0px;
  display: none;
}
 
#header::before {
   content: " ";
   position: absolute;
   height: 120%;
   width: 100%;
   left: 0;
   top: 0;
   background-image: var(--logo-image);
   background-size: auto 16rem;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0.4;
}
 
#header h1, #header h1 a{
   --header-title: " ‎‎‎";
   font-size: 2.5rem;
   position: absolute;
   top: 0.05rem;
   margin: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   z-index: 0;
   color: rgb(var(--black-monochrome));
   text-align: center;
}
 
#page-title::after, .meta-title::after, #page-title::before, .meta-title::before {
    content: " ";
    flex-grow: 1;
    height: 0.0625rem;
    background: rgb(var(--niewiem));
   height: 200px;
}
 
#header::before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0.05rem;
    background-image: var(--logo-image);
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: auto calc(var(--header-height-on-desktop) - 1.5rem);
    opacity: 0.8;
    pointer-events: none;
}
 
#header h1 a::before {
    text-shadow: .003rem 0.01rem 0.01rem #0c0c0c;
    line-height: 1;
    text-align: left;
    color: black;
    width: 1090px;
    height: 7px;
    font-size: 0.5rem;
 
}
 
#header h2 span::before {
    text-shadow: .003rem 0.01rem 0.01rem #0c0c0c;
    line-height: 1;
    text-align: left;
    color: black;
    width: 80px;
    height: 7px;
    font-size: 0.5rem;
 
}
 
h1 {
    font-size: 2rem;
    color:rgb(var(--dark-accent));
    line-height: 1
}
 
h2 {
    font-size: 1.8rem;
    color:rgb(var(--dark-accent));
    line-height: 1
}
 
h3 {
    font-size: 1.6rem;
    color:rgb(var(--dark-accent));
    line-height: 1
}
 
h4 {
    font-size: 1.4rem;
    color:rgb(var(--dark-accent));
    line-height: 1
}
 
h5 {
    font-size: 1.2rem;
    color:rgb(var(--dark-accent));
    line-height: 1
}
 
h6 {
    font-size: 1rem;
    color:rgb(var(--dark-accent));
    line-height: 1
}
 
a.newpage {
   background: transparent;
   text-decoration: none
}
 
a.newpage {
   color: rgb(var(--newpage-color))
}
 
/* DIVs */
blockquote {
   box-shadow: 0.2rem 0.4rem 1.2rem rgba(0,0,0,.25);
}
 
.styled-quote {
   background-color:rgb(var(--pale-gray-monochrome));
   border-left: 0.5rem solid rgba(var(--gray-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.2rem 0.4rem 1.2rem rgba(0,0,0,.25);
}
 
.dark-styled-quote {
   border-left: 0.5rem solid rgba(var(--pale-gray-monochrome));
   color:rgb(var(--white-monochrome));
   padding: 0.1rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0.2rem 0.4rem 1.2rem rgba(0,0,0,.25);
}
 
.dark-styled-quote a{
    color: rgb(var(--swatch-menubg-medium-color));
}
 
.lightblock {
   background-color:rgb(var(--white-monochrone));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.8rem 1.2rem rgba(0,0,0,.25);
}
 
.darkblock {
   background-color:rgb(var(--medium-accent));
   color:rgb(var(--white-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.8rem 1.2rem rgba(0,0,0,.25);
}
 
.darkblock a {
    color: rgb(var(--medium-accent));
}
 
.titleblock {
        background-color: rgb(var(--medium-accent));
        color: rgb(var(--niewiem));
        padding: 0.5rem 1rem 0.10rem;
        margin: 1.5rem 0rem 0.5rem 0rem;
        box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
        border: solid rgb(var(--bright-accent)) 2px;
     }
 
     .titlebox{
       color: rgb(var(--niewiem));
       position: relative;
       top: -1.6rem;
       background-color: #6f7090;
       padding-right: 1rem;
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
       line-height: 0.1rem;
     }
 
/* ===Custom DIVs === */
     /* Bolded */
.bold600 {
  font-weight: 900;
}
 
/* 4CHAN */
.chan.thread-container {
  background-color: rgba(var(--niewiem));
  padding: 5px;
  font-family: arial,helvetica,sans-serif;
  color: #000;
  overflow: hidden;
  font-size: 1.1em;
}
 
.chan .post-content {
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
}
.chan .summary {
  color: #707070;
  margin-top: 10px;
}
.chan .reply-container {
  display: table;
}
.chan .reply-arrows {
  color: #E0BFB7;
  float: left;
  margin-right: 2px;
  margin-top: 9px;
  margin-left: 2px;
}
.chan .reply {
  background-color: rgba(var(--pale-gray-monochrome));
  border: 1px solid #b6c5d8;
  border-left: none;
  border-top: none;
  display: table;
  padding: 5px;
  margin: 4px 0;
}
 
.chan img {
  float: left;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 3px;
  margin-bottom: 5px;
}
.chan .chan-file > p,
.chan .post-info > p,
.chan .reply-arrows > p,
.chan .summary > p,
.post-content > p {
  margin: 0;
}
.chan .image-container {
  padding: 0;
}
 
@media (max-width: 479px) {
  .chan .reply-arrows {
    display: none;
  }
  .chan .post-content {
    margin: 0;
  }
  .chan .image-container {
    text-align: center;
  }
}
 
/* Yui */
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background-color: rgb(var(--thing));    
}

+ 版权信息

版式由Manganian在Cytryniak的帮助下完成，其基于由etoisle和Lynch制作的基于Woedenaz的黑标版式制作的Liminal版式制作。

由Westrin制作的chan divs代码遵守CC BY-SA 3.0。

由Andreas Trepte拍摄的Apis mellifera Western honey bee遵守CC BY-SA 2.5.

由Kayteq制作的BR-PL logo遵守CC BY-SA 3.0。其在这里被第一次发布。

由gaplouelpew 不匹配任何一个现有的用户名搬运&翻译Chan Divs使用教程