Pages

Примечание:

Эта страница - компонент, используемый на данной вики. Он предназначен для включения в другие страницы.

What this is

A component that displays your text on separate pages, for example the pages of a book.

Made by user Croquembouche.

Other components that simulate pagination:

Usage

On any wiki:

[[include :component:pages
medium=vintage-book
contents=
<h1>Hello, welcome to my book.</h1>
I hope you <em>really enjoy</em> it so that the pain it took to write it was worth it.

]]

There are two parameters for this component.

mediumWhat medium should your text be presented in? This determines the background image of each page, the font, etc. I'm open to adding more options — please contact me (Пользователь 'Croquembouche' не существует) if you have an idea.
These are documented in detail at the bottom of this page.
contentsThe contents of your pages. Can include very simple formatting and images.
styleCSS styling to inject into the document.

The contents parameter can spread across as many lines as you want.

The contents may not contain the following characters:

  • | (pipe symbol)
  • (backtick), unless it’s preceded by a backslash (\`)
  • ]] (two closing brackets), but only if it's at the end of a line or followed by whitespace

Text formatting

The contents parameter won't be rendered by Wikidot. It goes straight through to a custom parser that I've written myself that spits out HTML.

All that lovely Wikidot syntax that you're used to goes out of the window. Instead, you'll have to write inline HTML.

For example:

  • To make bold text, instead of **text**, write <b>text</b>.
  • To make an em dash, instead of --, write a literal em dash ().
  • To make a horizontal rule, instead of -----, write <hr>.

Unlike HTML, you do not need to write <p>…</p> around each line.


Images

Include images using standard HTML for an image:

<img src="https://scpfoundation.net/local--files/your-articles/your-image.png">

You can fix the image to the top or bottom of a page by adding either position="top" or position="bottom". This will fix the image to either the top or the bottom of whatever page it would appear on. This only works for images that are on a line by themselves, not in the middle of text:

<img position="top" src="URL">

To horizontally centre an image, add this CSS to its style attribute directly:

<img style="display: block; margin-left: auto; margin-right: auto;" src="URL">

If an image is too tall to fit on a single page, the bottom of it will be chopped off.


Page breaks

Sometimes you want to say "okay, stop there. Start the next bit on a new page. The rest of this page can be empty."

To do that, on a line by itself, add a page break:

<br class="page-break">

The thing that comes next after a page break will be on the next page. If there's an image with position="bottom" just before the page break, it will still be at the bottom of that page, as expected.


Advanced usage

You can include CSS via the style parameter, and embedded Javascript in the contents parameter.

Using CSS

Any CSS you include in the style parameter will be injected into the pages. Use this to tweak things, add classes that you can use in your content, and change the font (for example).

For example:

[[include :component:pages
medium=vintage-book
style=
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter');

.page {
font-family: 'Architects Daughter', cursive;
margin: 2rem;
}

.page .red {
color: red;
}
contents=
This text will appear <span class="red">handwritten</span>.
]]

You can't style this component with a CSS module elsewhere on your article — this is the only way.

Tip! You can add parameters in any order you like, but it's a good idea to put the style parameter above the contents parameters. Your contents parameter will probably be really, really long — you might find it easier to have all the settings and CSS at the top.

Using Javascript

The contents parameter will be parsed as a Javascript template literal, which is why it can't contain a backtick.

Because of that, you can include arbitrary Javascript in the contents parameter inside an embedded expression (${expression}), which will be executed and substituted back into the string. For example:

[[include :scp-wiki:component:pages
medium=vintage-book
contents=
The day today is ${new Date().toLocaleString("default", { weekday: "long" })}.
]]

This book will tell the reader the name of the current day.

Should you do this? Probably not. But you can.

Please note that while you can include arbitrary Javascript, the OR operator (||) is unavailable because it's made of pipe symbols, which are forbidden. However, using AND and NOT, you can create an OR yourself: NOT((NOT x) AND (NOT y)) is equivalent to (x OR y). In Javascript, that's !((!x) && (!y)).

Medium Options

The following are your options for the 'medium' parameter.

I am actively soliciting requests for new medium options. I mean, the title of this component is 'Papers, Pages and Post-it Notes', it's designed to be as versatile as possible, but right now, it can only do a couple of things.

If you have any requests for paginated formats, please let me know (Пользователь 'Croquembouche' не существует).

Each medium has a fixed aspect ratio that determines its height for any browser width.

MediumBackgroundFonty:xSource
plain (default)plain-preview.pngBrowser default4:7
vintage-bookbook.300px.pngLibre Baskerville10:9Public Domain
gdocs sans-serifsqrt(2):1

Source code

Структурные: визуальный_элемент
версия страницы: 10, Последняя правка: 23 Май 2024, 17:27 (271 день назад)
Пока не указано иное, содержимое этой страницы распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 License.