Layout Helpers 2.0 
:root {
    --lh-red: #c0392b;
    --lh-blue: #2980b9;
    --lh-green: #27ae60;
    --lh-dark-green: #16a085;
    --lh-purple: #8e44ad;
    --lh-orange: #e67e22;
    --lh-yellow: #f1c40f;
 
    --lh-paper-bg: 255, 251, 240;
    --lh-string-color: 192, 57, 43;
    --lh-book-color: var(--gray-monochrome);
    --lh-tape-color: 90,90,90,0.3;
    --lh-white-bg: 249,249,249;
    --lh-dark-bg: 50, 50, 50;
    --lh-highlighter: var(--bright-accent);
    --lh-border-color: var(--gray-monochrome);
    --lh-wiki-note-color: var(--bright-accent)
}
 
/**
 *  旧代码合集
 *  为了向下兼容而保留
 */
 
.grid-container{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.grid-container,.grid-container [class*=grid]{box-sizing:border-box}[class*=grid]{padding:5px}.grid{width:100%}.grid-large{width:75%}.grid-big{width:50%}.grid-medium{width:33.33%}.grid-small{width:25%}@media screen and (min-width:768px){.wd-grid-large{width:75%}.wd-grid,.wd-grid-big{width:50%}.wd-grid-medium{width:33.33%}.wd-grid-small{width:25%}}.text-hover-hide{opacity:0;transition:opacity .3s}.text-hover-hide:hover{opacity:1}.text-block-hide{background:rgb(var(--black-monochrome));color:rgb(var(--black-monochrome));transition:background .3s}.text-block-hide:hover{background:0 0}.text-blur-hide,.text-blur-hover-hide{filter:blur(.3rem);-webkit-filter:blur(.3rem) transition: blur .3s}.text-blur-hover-hide:hover{filter:blur(0);-webkit-filter:blur(0)}.lyric-box{text-align:center;font-size:1.05rem;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}.lyric-box p{margin:1.5em auto}.lyric-box.with-bigger-line p{margin:3em auto}
 
/**
 *  便签纸
 *  notepaper
 */
 
.notepaper {
    background: linear-gradient(rgb(var(--lh-paper-bg)) 95%, #ddd 0);
    line-height: 2em;
    background-size: 100% 2em;
    background-attachment: local;
    border: 2em solid rgb(var(--lh-paper-bg));
    box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.2);
    padding: 0;
    margin: 1em auto;
    box-sizing: border-box;
    position: relative
}
.notepaper p {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 0.1rem;
    line-height: inherit
}
.notepaper.narrow,
.notepaper.wide {
        width: 90%
}
@media screen and (min-width:768px){
    .notepaper.narrow {
        width: 50%
    }
    .notepaper.wide {
        width: 75%
    }
}
 
.notepaper.tight {
    border-width: 1rem;
    border-left-width: 1.2rem;
    border-right-width: 1.2rem;
    line-height: 1.8em;
    background-size: 100% 1.8em;
    font-size: 13px
}
 
.notepaper.with-string::before {
    content: '';
    width: 0.5em;
    height: 6rem;
    background: rgb(var(--lh-string-color));
    top: -2rem; right: -1rem;
    display: block;
    position: absolute;
    box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2);
    clip-path: polygon(-100% -100%,100% 0%,100% 100%,50% 98%,0% 100%);
}
.notepaper.with-tape::before {
    content: '';
    border: 1px solid #ddd;
    background: rgba(var(--lh-tape-color));
    width: 1.5em;
    height: 4em;
    transform: rotate(45deg);
    display: block;
    position: absolute;
    top: -3em;
    left: -1.8em
}
 
.notepaper.tight.with-string::before {
    top: -1rem;
    right: -0.25rem;
}
.notepaper.tight.with-tape::before {
    top: -2.5em;
    left: -1.3em
}
 
.notepaper.page {
    min-height: 36em;
    counter-increment: page;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}
@media screen and (min-width:768px){
    .notepaper.page {
        width: 70%
    }
}
.notepaper.page:after {
    content: counter(page);
    display: block;
    text-align: center
}
.notepaper-group {
    counter-reset: page;
}
 
.book-pattern {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row
}
.book-pattern .notepaper.page:not(.notepaper > .notepaper) {
    width: 100%
}
@media screen and (min-width: 768px) {
    .book-pattern .notepaper.page:not(.notepaper > .notepaper) {
        width: 50%
    }
}
 
.book-wrapper {
    background: rgb(var(--lh-book-color));
    padding: 0.5rem;
    box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.2);
    border-radius: 5px;
    margin: 1rem auto
}
@media screen and (min-width: 768px) {
    .book-wrapper .notepaper {
        margin: 0
    }
}
 
/**
 *  文字修饰
 */
 
.text-highlighted {
    position: relative
}
.text-highlighted::before {
    content: "";
    position: absolute;
    height: 0.9em;
    bottom: 2px;
    left: -2px;
    width: 105%;
    z-index: -1;
    background-color: rgb(var(--lh-highlighter));
    opacity: .6;
    transform: skew(-15deg);
    transition: opacity .2s ease;
    border-radius: 3px 8px 10px 6px;
    transition: 0.1s ease background-color;
}
 
.text-underlined {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    text-decoration-color: rgb(var(--lh-highlighter))
}
.text-wavy {
    text-decoration: underline wavy;
    text-underline-offset: 4px;
    text-decoration-color: rgb(var(--lh-highlighter))
}
 
.text-circled,
.text-squared {
    display: inline-block;
    border: 2px solid rgb(var(--lh-highlighter));
    border-radius: 100%;
    box-sizing: border-box
}
.text-squared { border-radius: 0 }
 
.text-shadow { text-shadow: 0.075em 0.075em 0 rgb(var(--lh-highlighter)) }
 
.text-highlighted.td-red::before { background: var(--lh-red) }
.text-circled.td-red, .text-squared.td-red { border-color: var(--lh-red) }
.text-underlined.td-red, .text-wavy.td-red { text-decoration-color: var(--lh-red) }
 
.text-highlighted.td-blue::before { background: var(--lh-blue) }
.text-circled.td-blue, .text-squared.td-blue { border-color: var(--lh-blue) }
.text-underlined.td-blue, .text-wavy.td-blue { text-decoration-color: var(--lh-blue) }
 
.text-highlighted.td-green::before { background: var(--lh-green) }
.text-circled.td-green, .text-squared.td-green { border-color: var(--lh-green) }
.text-underlined.td-green, .text-wavy.td-green { text-decoration-color: var(--lh-green) }
 
.text-highlighted.td-darkgreen::before { background: var(--lh-dark-green) }
.text-circled.td-darkgreen, .text-squared.td-darkgreen { border-color: var(--lh-dark-green) }
.text-underlined.td-darkgreen, .text-wavy.td-darkgreen { text-decoration-color: var(--lh-dark-green) }
 
.text-highlighted.td-purple::before { background: var(--lh-purple) }
.text-circled.td-purple, .text-squared.td-purple { border-color: var(--lh-purple) }
.text-underlined.td-purple, .text-wavy.td-purple { text-decoration-color: var(--lh-purple) }
 
.text-highlighted.td-yellow::before { background: var(--lh-yellow) }
.text-circled.td-yellow, .text-squared.td-yellow { border-color: var(--lh-yellow) }
.text-underlined.td-yellow, .text-wavy.td-yellow { text-decoration-color: var(--lh-yellow) }
 
.text-highlighted.td-orange::before { background: var(--lh-orange) }
.text-circled.td-orange, .text-squared.td-orange { border-color: var(--lh-orange) }
.text-underlined.td-orange, .text-wavy.td-orange { text-decoration-color: var(--lh-orange) }
 
/* 隐藏文字 */
 
.text-blank { color: rgba(0,0,0,0) }
.text-block {
    background: rgb(var(--black-monochrome));
    color: rgb(var(--black-monochrome));
}
.text-blur {
    filter: blur(0.3em);
    -webkit-filter: blur(0.3em)
}
 
.text-hoverback,
.text-selectback {
    transition-duration: 0.3s;
    transition-property: background, transform, color
}
 
.text-blank.text-hoverback:hover,
.text-blank.text-selectback::selection,
.text-blank.text-selectback *::selection { color: rgb(var(--black-monochrome)) }
 
.text-block.text-hoverback:hover { background: transparent!important }
.text-block.text-selectback::selection,
.text-block.text-selectback *::selection { color: rgb(var(--white-monochrome, 255, 255, 255)) }
 
.text-blur.text-hoverback:hover { filter: blur(0)!important; -webkit-filter: blur(0)!important }
 
/**
 * 附加项
 */
.with-border, .with-box-style { border: 1px solid rgb(var(--bright-accent)) }
.with-border-dark { border: 1px solid rgb(var(--black-monochrome)) }
.with-border-light { border: 1px solid rgb(var(--white-monochrome)) }
.with-border-thick { border-width: 2px }
 
.with-shadow-sm { box-shadow: 0 0 0.1em rgba(0,0,0,0.2) }
.with-shadow { box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2) }
.with-shadow-lg { box-shadow: 0 0.15em 0.3em rgba(0,0,0,0.2) }
.with-shadow-xl { box-shadow: 0 0.2em 0.5em rgba(0,0,0,0.2) }
.with-shadow-xxl { box-shadow: 0 0.25em 0.8em rgba(0,0,0,0.2) }
 
.with-padding, .with-box-style { padding: 0.25em 1em }
.with-p-sm { padding: 0.125em 0.5em }
.with-p-lg { padding: 0.5em 2em }
 
.with-margin, .with-box-style { margin: 1em auto }
.with-m-sm { margin: 0.5em auto }
.with-m-lg { margin: 2em auto }
 
.with-narrow-width {
    width: 90%!important;
    margin-left: auto;
    margin-right: auto
}
@media screen and (min-width: 768px) {
    .with-narrow-width { width: 75%!important }
}
[class*="with-bg-"], [class*="with-bg-"] h1 { color: #fff!important }
.with-bg-red { background: var(--lh-red)!important }
.with-bg-blue { background: var(--lh-blue)!important }
.with-bg-green { background: var(--lh-green)!important }
.with-bg-darkgreen { background: var(--lh-dark-green)!important }
.with-bg-yellow { background: var(--lh-yellow)!important }
.with-bg-orange { background: var(--lh-orange)!important }
.with-bg-purple { background: var(--lh-purple)!important }
 
/**
 * 删除类
 */
 
.offwith-shadow { box-shadow: none!important }
.offwith-border { border: none!important }
.offwith-padding, .offwith-pam { padding: 0!important }
.offwith-margin, .offwith-pam { margin: 0!important }
 
.offwith-width-limit {
    width: auto;
    margin-left: auto;
    margin-right: auto
}
 
div[class*="grider"].offwith-grid-gap { grid-gap: 0 }
 
/**
 * 网格布局
 */
 
/* Gridder 容器 */
 
div[class*="gridder"] {
    display: grid;
    box-sizing: border-box;
    grid-gap: 1rem;
    padding: 0
}
div[class*="gridder"] * { box-sizing: border-box }
 
.gridder, .gridder-col-2 {
    grid-template-columns: 1fr 1fr;
}
.gridder-col-3 {
    grid-template-columns: repeat(3, 1fr);
}
.gridder-col-4 {
    grid-template-columns: repeat(4, 1fr);
}
 
@media screen and (min-width: 768px) {
    .pc-gridder, .pc-gridder-col-2 {
       grid-template-columns: 1fr 1fr;
   }
   .pc-gridder-col-3 {
       grid-template-columns: repeat(3, 1fr);
   }
   .pc-gridder-col-4 {
       grid-template-columns: repeat(4, 1fr);
   }
}
 
.spanner, .spanner-2 {
    grid-column-start: span 2;
}
.spanner-3 {
    grid-column-start: span 3;
}
 
/**
 * 告示组件
 */
.signblock,
.signblock-dark,
.signblock-warn {
    margin: 1rem auto;
    box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.4);
    background: rgb(var(--lh-white-bg));
    font-size: 1.05rem;
    padding: 2rem
}
@media screen and (min-width: 768px) {
    .signblock,
    .signblock-dark,
    .signblock-warn {
        width: 75%
    }
}
.signblock-dark,
.signblock-dark h1 {
    background: rgb(var(--lh-dark-bg));
    color: #fff
}
.signblock-warn,
.signblock-warn h1 {
    background: var(--lh-red);
    color: #fff
}
 
.signblock h1,
.signblock-dark h1,
.signblock-warn h1 {
    text-align: center;
    font-size: 2rem;
    margin: 0;
    font-weight: 700
}
.signblock-img {
    display: flex;
    flex-direction: row;
    justify-content: center
}
.signblock-img img {
    width: 8em
}
.signblock-footer {
    font-size: 0.9em;
    text-align: center;
    margin: 0.5rem 0;
    font-weight: bolder;
    display: block
}
 
/**
 * 报告
 */
 
.reportblock,
.reportblock-dark {
    border: 2px solid rgb(var(--lh-border-color));
    box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.3);
    background: rgb(var(--white-monochrome));
    padding: 0.8rem 1.5rem;
    padding-bottom: 0.4rem;
    margin: 1.5rem auto;
    margin-bottom: 1rem;
    position: relative
}
 
.reportblock hr,
.reportblock-dark hr {
    background-color: rgb(var(--lh-border-color));
    margin-left: -1.5rem;
    margin-right: -1.5rem
}
 
.reportblock h1:first-child,
.reportblock-dark h1:first-child {
    position: absolute;
    top: -1rem;
    left: 1.5rem;
    font-size: 110%;
    font-weight: 600;
    background: rgb(var(--lh-border-color));
    color: #fff;
    padding: 0.2rem 0.5rem;
    margin: 0;
}
 
.reportblock-dark,
.reportblock-dark h1 {
    border-color: rgb(var(--lh-white-bg));
    background: rgb(var(--lh-dark-bg));
    color: #fff
}
 
.reportblock-dark hr {
    background-color: rgb(var(--lh-white-bg));
}
 
/* 更好的折叠框 */
 
.bettercollap {
  margin: 1em 0;
}
 
.bettercollap .collapsible-block {
  width: auto;
  overflow: hidden;
  border: 1px solid rgb(var(--lh-border-color))
}
 
.bettercollap .collapsible-block-content,
.bettercollap .collapsible-block-link {
  background: rgb(var(--white-monochrome));
  padding: 0.5em
}
 
.bettercollap .collapsible-block-content {
  padding-left: 1em;
  padding-right: 1em
}
 
.bettercollap .collapsible-block-link {
  color: rgb(var(--lh-border-color));
  background: rgb(var(--white-monochrome));
  transition: .3s;
  display: block;
}
.bettercollap .collapsible-block-link:hover,
.bettercollap .collapsible-block-unfolded .collapsible-block-link,
.styledcollap.bettercollap .collapsible-block-link {
  color: rgb(var(--white-monochrome));
  background: rgb(var(--lh-border-color))!important;
  text-decoration: none
}
 
.bettercollap .collapsible-block-link:hover a { color: rgb(var(--white-monochrome)) }
 
.bettercollap .collapsible-block-link::before {
  content: "\25BC";
  display: inline-block;
  margin-right: 0.5em;
  transform: rotate(-90deg) scale(0.9)
}
.bettercollap .collapsible-block-unfolded .collapsible-block-link::before {
   transform: rotate(0) scale(0.9)
}
 
.bettercollap .collapsible-block + .collapsible-block { border-top: none }
 
.styledcollap.bettercollap .collapsible-block {
  border-radius: 2px;
  box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.3)
}
 
.styledcollap.bettercollap .collapsible-block-content {
  background-color: rgb(var(--pale-gray-monochrome));
  border-width: 3px
}
 
.styledcollap.bettercollap .collapsible-block-link:hover {
  background: rgba(var(--lh-border-color),0.95)!important;
}
 
/**
 * 提示框
 */
 
.infoblock {
    color: #f1f1f1;
    font-weight: bold;
    background: #424242;
    padding: 5px 5px 5px 5px;
    border-radius: 4px;
    margin: -0.5rem 0 1rem 0;
    display: block;
    width: fit-content;
    padding-right: 25px;
}
 
.infoblock::before {
    content: "ⓘ "
}
 
/**
 * 单页迭代
 */
 
.offset-page:not(:target), .offset-page:target ~ div#u-default-page { display: none }
.offset-page:target { display: block }
banner.png
评分: 0+–x

Introduction

What's This?

Layout Helpers are CSS components made by EltracEltrac, intending to provide authors (or newbies to wiki) who are not familiar with coding with an easy-to-use layout tool so that they can prettify their articles with ease.

This component packages many frequently-used elements in Backrooms Wikidot, such as note paper and hidden documents. With this component, you can also create iterations without fragment pages, which can somehow serve as a substitute for the complicated Listpage Iterations. In addition, the component contains advanced tools such as grid layout and additional classes as well, helping to make your article more expressive.

For those who're familiar with CSS, these stuff are maybe only insignificant skills that are not worth being made into a component, but please remember that these are prepared for people who know nothing about coding.

How to Use?

To import the component, just put the following code at the top of your article:

[[include :backrooms-wiki:component:layout-helpers]]

But what this can do is only import CSS codes. To use the component, please read the following texts.

Basic Knowledge of Relevant Syntax

This section is for those who are unfamiliar with <div> and <span> syntax of wikidot. So if you have got to know about <div> and <span> tags and can add classes for them, just skip to the next section.

+ Show Content

Layout Elements Provided by The Site's Theme

The defalut theme of the site (Liminal Nuliminal) as well as most themes on wikidot have some preset DIVs that can be applied to your article, which can be used without importing Layout Helpers and are applicable to most situations. So before turning to Layout Helpers, maybe you can try these DIVs first. By the way, Layout Helpers are delibrately disigned not to duplicate them.

Following are just the DIVs provided by the default theme; for other themes, just refer to their pages.

[[div class="blockquote"]]

[[/div]]

[[div class="lightblock"]]

[[/div]]

[[div class="darkblock"]]

[[/div]]

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

[[/div]]

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

[[/div]]

Conventional Layout Tools

Text Decoration

Emphasized Text

When Layout Helpers are not imported, you can emphasize or decorate your text like this:

--This one is deleted--
__This one is underlined__
//This one is italic//
**This one is bolded**
{{This is mono font}}
This is a^^superscript^^
This is a,,subscript,,
+ Show how it looks like

After importing Layout Helpers, you'll have more ways to emphasize your text.

[[span class="text-highlighted"]]Highlighted text[[/span]]
[[span class="text-underlined"]]Underlined text[[/span]]
[[span class="text-wavy"]]Text underlined by wavy line[[/span]]
[[span class="text-circled"]]Circled text[[/span]] and uncircled text.
[[span class="text-squared"]]Text in frame[[/span]] and text out of frame.
[[span class="text-shadow"]]Text with shadow[[/span]]

Underlined text with thicker line, and the line is farther from the text, avoiding touching high letters like g and y.
Text underlined by wave line. It has the same thickness and distance from text as the above one.
Highlighted text, which looks like being marked by a highlighter.
Some circled text to mark mistakes or notable things.
Some framed text for those who hate circles.
Text with shadow, isn't this cool?

Hidden Text

You can hide some text to create a mysterious atmosphere.

[[span class="text-blank"]]Hidden text[[/span]]
[[span class="text-blank text-hoverback"]]Hidden text, but appears when being hovered[[/span]]
[[span class="text-blank text-selectback"]]Hidden text, but appears when being selected[[/span]]

[[span class="text-block"]]Covered text[[/span]]
[[span class="text-block text-hoverback"]]Covered text, but appear when being hovered[[/span]]
[[span class="text-block text-selectback"]]Covered text, but appears when being selected[[/span]]

[[span class="text-blur"]]Blurred text[[/span]]
[[span class="text-blur text-hoverback"]]Blurred text, but become clear when being hovered[[/span]]

Hidden text
Hidden text, but appears when being hovered
Hidden text, but appears when being selected

Covered text
Covered text, but appear when being hovered
Covered text, but appears when being selected

Blurred text
Blurred text, but become clear when being hovered

Info Block

This Info Block was originally designed by hoah2333hoah2333, and was transplanted into Layout Hepers by EltracEltrac.

Info Block can be used to alert the readers for some potential sensitive content.

[[span class="infoblock"]]This article contains sensitive content, please read it at your own discretion.[[/span]]

This article contains sensitive content, please read it at your own discretion.

For more important alerts, you can use an additional class to change the Block's background color into conspicuous red.

[[span class="infoblock with-bg-red"]]This article contains sensitive content, please read it at your own discretion.[[/span]]

This article contains sensitive content, please read it at your own discretion.

Notepaper

Lined DIV with margins that appears to be letter paper. Can be used for diary or notes left by wanderers.

Conventional Note

[[div class="notepaper"]]
This is a conventional note
You can write on it with ordinary words
Bring in a very ordinary feeling
[[/div]]

Narrower Note

[[div class="notepaper narrow"]]
This is a narrow note
You can write on it with narrow words
Bring in a very narrow feeling
Add narrow class to your note!
[[/div]]

没那么窄的便签

[[div class="notepaper wide"]]
This is a not so narrow note
You can write on it with not so narrow words
Bring in a not so narrow feeling
Add wide class to your note!
[[/div]]

文字更紧密的便签

[[div class="notepaper narrow tight"]]
This is a narrow note where texts are arranged more tightly
You can write on it with more tighter words
Bring in a tighter feeling
Add tight class to your note!
[[/div]]

Note With Tape

[[div class="notepaper narrow with-tape"]]
This is a note with tape
You can write on it with ordinary words
Bring in a special feeling
Add with-tape class to your note!
[[/div]]

Note With String

[[div class="notepaper narrow with-string"]]
This is a note with string
You can write on it with somehow special but still ordinary words
Bring in a special feeling
Add with-string class to your note!
[[/div]]

Note With Page Number

This is a note with page number
You can write on it with somehow special but still ordinary words
It has fixed hight and page number
Bring in a special feeling
Note with page number need two DIVs!

[[div class="notepaper page with-string"]]
[[div class="notepaper-content"]]
text
[[/div]]
[[/div]]

This is the second page
You can see the page number at bottom
And it counts automatically
All you need to do is to make divs

In general, all the notes with page number in your page will be counted for the number of each page
If you want to have multiple groups of notes with page number, just put them together into a div:

[[div class="notepaper-group book-pattern"]]
Your papers
[[/div]]

Notebook

This is a notebook
May be a good choice for diary
Two pages in a row
But if viewed from mobile phone screen, this will be literally the same as the ordinary notes with page number

To achieve this, just put all your notes with page number into this div

[[div class"notepaper-group book-pattern"]]
Your papers
[[/div]]

Notebook With Cover

You can make a cover for your notebook

[[div class"notepaper-group book-pattern book-wrapper"]]
Your papers
[[/div]]

要注意的是，notepaper-group 类会重置页面计数器，，如果你需要制作多个带有书衣的书页组，但并不希望他们的页数重新开始计数，可以这样做。

[[div class="notepaper-group"]]
[[div class="book-pattern book-wrapper"]]
第一页和第二页
[[/div]]
[[div class="book-pattern book-wrapper"]]
第三页和第四页
[[/div]]
[[/div]]
关于如何修改书衣颜色

维基笔记（Wiki Note）

这是 Wikidot 的一个原生元素，写法十分简易，用起来很方便，但它貌似被大多数版式作者和写手忘记了，很少被用到，于是我重写编写了它的样式，现在它可以当做一个方便的文档批注来使用。

不过在此之前，因为部分主题仍然修改了维基笔记的样式，与排版工具组可能存在冲突，故没有默认引入样式。如果要使用，只需要将引入排版工具组的语句稍作修改，变成这样：

[[include :backrooms-wiki-cn:component:layout-helpers |wiki-note=true]]

然后在你需要插入批注的地方写上：

[[note]]
添加笔记内容
[[/note]]

就像这样，是不是很方便？

你也可以修改这个笔记上的「批注」二字，但只能全局修改，加入这段代码即可。

[[module CSS]]
:root {
   --lh-note-title: "笔记，或者其他文字";
}
[[/module]]

告示（Sign）

在世界观里，有些组织可能会在文档里加入诸如通告、警告之类不属于正文的提示性文本，这通常需要突出显示，就像这样：

须知

经监督者议会商定，所有决定长期居住于旅馆房间的人员，无论其在社交网络上活跃程度如何，都会被标记为MIA，其将不再享有探险者总署的各项权利和福利。此决议长期有效。

Meglogo

M.E.G. - 监督者

这段文字来自SUPER HOTSUPER HOT编写的旅馆房间。

[[div class="signblock"]]
+* 标题
告示内容
[[div class="signblock-img"]]
[[image http://natedagreat563.wdfiles.com/local--files/storage-unit/Meglogo]]
[[/div]]
[[span class="signblock-footer"]]署名[[/span]]
[[/div]]

深色告示

给 div 加上 signblock-dark 即可获得以下效果。

须知

经监督者议会商定，所有决定长期居住于旅馆房间的人员，无论其在社交网络上活跃程度如何，都会被标记为MIA，其将不再享有探险者总署的各项权利和福利。此决议长期有效。

Meglogo

M.E.G. - 监督者
[[div class="signblock signblock-dark"]]
+* 标题
内容
[[div class="signblock-img" style="filter: invert(100%)"]]
[[image http://natedagreat563.wdfiles.com/local--files/storage-unit/Meglogo]]
[[/div]]
[[span class="signblock-footer"]]署名[[/span]]
[[/div]]

警示

给 div 加上 signblock-warn 即可获得以下效果。

警告

经监督者议会商定，所有决定长期居住于旅馆房间的人员，无论其在社交网络上活跃程度如何，都会被标记为MIA，其将不再享有探险者总署的各项权利和福利。此决议长期有效。

Meglogo

M.E.G. - 监督者
[[div class="signblock-warn"]]
+* 标题
内容
[[div class="signblock-img" style="filter: invert(100%)"]]
[[image http://natedagreat563.wdfiles.com/local--files/storage-unit/Meglogo]]
[[/div]]
[[span class="signblock-footer"]]署名[[/span]]
[[/div]]

报告（Report）

在世界观里，数据库文档可能会插入一些实验报告或是行动报告，就像这样：

[[div class="reportblock"]]
+* 标题
**研究人员：**XXX
**报告时间：**XXX
------
正文内容
------
结尾内容
[[/div]]

不知道什么 实验报告

研究人员：不知道是谁
报告时间：2020/12/1

记录开始。

阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴……

记录结束。

总结：……

深色报告

给 reportblock 加上 reportblock-dark 类，即可获得以下效果

[[div class="reportblock-dark"]]
+* 标题
**研究人员：**XXX
**报告时间：**XXX
------
正文内容
------
结尾内容
[[/div]]

不知道什么 实验报告

研究人员：不知道是谁
报告时间：2020/12/1

记录开始。

阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴……

记录结束。

总结：……

更好的折叠框（Better Collapsible）

你可以这样让单调的折叠框变得好看一些。

[[div class="bettercollap"]]
[[collapsible show="展开内容" hide="收起内容"]]
被折叠的内容
[[/collapsible]]
[[/div]]
展开内容

这样写可以让多个折叠框紧凑地排列在一起。

[[div class="bettercollap"]]

[[collapsible show="展开内容" hide="收起内容"]]
被折叠的内容
[[/collapsible]]

[[collapsible show="展开内容" hide="收起内容"]]
被折叠的内容
[[/collapsible]]

[[collapsible show="展开内容" hide="收起内容"]]
被折叠的内容
[[/collapsible]]

[[/div]]
展开内容
展开内容
展开内容

为 bettercollap 元素添加 styledcollap 类可以让折叠框变得更美观。

[[div class="bettercollap styledcollap"]]
[[collapsible show="展开内容" hide="收起内容"]]
被折叠的内容
[[/collapsible]]
[[/div]]
展开内容

进阶排版工具

一下这些内容操作起来可能有较高的门槛，但使用合理可以为你的文章增色不少。

CSS 单页迭代（CSS Offset）

CSS 迭代与常规的 Listpages 迭代以及这个教程里的单页迭代不同，它更小巧，很容易上手，任何人都能用它来制作迭代。

附录：什么是迭代？

要创建 CSS 迭代，你需要把每个页面的内容都用一个 DIV 装起来，为它们分别加上独一无二的 ID，并设置一个默认页面。注意要把默认的第一页放在最后，并且默认页不写 offset-page 类，只设置 ID 为 default-page，就像这样：

[[div class="offset-page" id="page-2"]]
我是页面 2
[[/div]]

[[div class="offset-page" id="page-3"]]
我是页面 3
[[/div]]

[[div id="default-page"]]
我是页面 1
[[/div]]

......

然后，通过这样的超链接跳转到各个页面（注意在你设置的 id 前加上 #u-）。

[#u-default-page 跳转到页面 1]
[#u-page-2 跳转到页面 2]
[#u-page-3 跳转到页面 3]

最后的效果如下（边框是特地加上的，正常使用时不会有边框）：

我是页面 2
跳转到页面 3

我是页面 3
跳转到页面 1

我是页面 1
跳转到页面 2

网格布局（Gridder）

部分非现代浏览器（尤其是手机自带的浏览器）可能不支持这个功能。

网格布局允许你在一行内展示多个块，就像这样，我加上了不同的背景色以区分不同列的内容：

我是第一个块

我是第二个块

[[div class="gridder"]]

[[div]]
我是第一个块
[[/div]]

[[div]]
我是第二个块
[[/div]]

[[/div]]

在类名为 gridder 的容器下，所有的 DIV 都会按照预设好的方式排列。默认的是每行两个，当然也可以设置成其他的，比如每行三个。

我是第一个块

我是第二个块

我是第三个块

[[div class="gridder gridder-col-3"]]

[[div]]
我是第一个块
[[/div]]

[[div]]
我是第二个块
[[/div]]

[[div]]
我是第三个块
[[/div]]

[[/div]]

将 grider-col-3 中的 3 改为 4 就能一行显示四个，目前每行仅支持显示 2~4 个块。

注意是 gridder 不是 grider，其中的 d 要双写。

如果一行显示的块超过两个，在小屏幕下就会显得很挤，在类名前加上 pc- 前缀可以让 Gridder 仅在大屏幕（≥768px）上起作用，比如 pc-gridder-col-3。同时，你还可以同时使用两种类名，比如下面的代码就实现了在大屏幕下一行四个，小屏幕下一行两个的效果。

[[div class="gridder pc-gridder-col-4"]]
......
[[/div]]

你还可以让 Gridder 里的格子进行”跨越“，也就是让某个格子比其他的宽。

我跨越了两个格子

我是一个普通格子

我是一个普通格子

我是一个普通格子

我是一个普通格子

[[div class="gridder-col-4"]]

[[div class="spanner" style="background:red"]]
我跨越了两个格子
[[/div]]

[[div style="background:orange"]]
我是一个普通格子
[[/div]]

[[div style="background:yellow"]]
我是一个普通格子
[[/div]]

[[div style="background:green"]]
我是一个普通格子
[[/div]]

[[div class="spanner-3" style="background:blue"]]
我是一个普通格子
[[/div]]

[[/div]]

其中，给 DIV 加上 spanner 或 spanner-2 类可以让它跨越两个格子，而 spanner-3 可以跨越三个。

附加类（With Patterns）

这里列出了一些可以给 div 或者 span 附加样式的类名，以 with- 开头，通常是添加边框和文字颜色的小改动，就不赘述，只列出可用的类名。

添加边框

类名 适用于 效果
with-border div 为元素添加宽度为 1px，颜色跟随 —bright-accent 的边框
with-border-dark div 与 with-border 效果相同，但颜色为更深的 —black-monochrome
with-border-light div 与 with-border 效果相同，但颜色为更浅的 —white-monochrome
with-border-thick div 将边框宽度改为 2px，需与以上三个类中的任意一个同时使用

调整边距

类名 适用于 效果
with-padding div 为元素添加内边距，宽度为 1em，即一个字宽
with-margin div 为元素添加竖直方向的外边距，宽度为 1em
with-p-sm div 元素内边距设置为 0.5em
with-p-lg div 元素内边距设置为 2em
with-m-sm div 元素外边距设置为 0.5em
with-m-lg div 元素外边距设置为 2em

添加阴影

类名 适用于 效果
with-shadow div 为元素添加阴影
with-shadow-sm div 为元素添加较小的阴影
with-shadow-lg div 为元素添加较大的阴影
with-shadow-xl div 为元素添加更大的阴影
with-shadow-xxl div 为元素添加最大的阴影

其他

类名 适用于 效果
with-box-style div with-border、with-padding、with-margin 的组合简写法
with-narrow-width div 将 div 块的宽度变为页面宽度的 75%，小屏幕为 90%，对文中诸如报告这样的 div 也有效，类似于便签的 narrow 类
with-bg-* div, span… 为元素添加背景色，同时将文字颜色改为白色，将 * 替换成 red/blue/green/darkgreen/yellow/orange/purple 任意一个即可生效

删除类（Offwith Patterns）

类名 适用于 效果
offwith-shadow div 删除阴影
offwith-border div 删除边框
offwith-padding div 删除内边距
offwith-margin div 删除外边距
offwith-pam div offwith-padding 和 offwith-margin 的组合写法，pam 意为 padding and margin
offwith-width-limit div 删除宽度限制，可以让 blockquote 展开至最大，与 with-narrow-width 冲突
offwith-grid-gap .grider 等 删除网格布局中各个块之间的间隙

自定义变量

:root {
    --lh-paper-bg: 255, 251, 240; /* 便签纸的背景色 */
    --lh-string-color: 192, 57, 43; /* 便签纸隔离绳的颜色 */
    --lh-book-color: var(--gray-monochrome); /* 书衣的颜色 */
    --lh-tape-color: 90,90,90,0.3; /* 便签纸胶带的颜色 */
    --lh-white-bg: 249,249,249; /* 部分元素的白色背景 */
    --lh-dark-bg: 50, 50, 50; /* 部分元素的黑色背景 */
    --lh-highlighter: var(--bright-accent); /* 高亮文字的装饰线颜色 */
    --lh-border-color: var(--gray-monochrome); /* 部分元素的边框颜色 */
    --lh-wiki-note-color: var(--bright-accent); /* 维基笔记的颜色 */
    --lh-note-title: "批注"; /* 维基笔记的标题 */
}
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License