你好Zola

注意

这是一篇关于主题的语法示例文档

Markdown语法

基本的语法，如加粗, 斜体, 删除线, 以及 加粗斜体删除线.

在段落之间应该有空行^[1]。

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

这是标题下的一般段落

😭😂🥺🤣❤️✨🙏😍🥰😊

长的单行代码块不应换行。如果它们太长，应该水平滚动。这条线应该足够长以证明这一点。

“原创内容在变老之前只有几秒钟是原创的”

互联网规则第二十一条

• 第一章
• 第二章
  • 第2.1节
  • 第2.2节
• 第三章
• 附录

1. 执行步骤#1
2. 继续执行步骤#2
3. 以步骤#3结束

• 胡辣汤
• 油条
• 冰红茶
• 冰糖
• 西瓜

let highlight = true;

10
pre mark {
12
  display: block;
13
  color: currentcolor;
14
}
15
pre table td:nth-of-type(1) {
17
  color: #6b6b6b;
18
  font-style: italic;
19
}

其他

KaTeX

Duckquill can render LaTeX using the KaTeX library. It can be enabled using the extra.katex config variable.

$$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$

$$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi),e^{2 \pi i \xi x},d\xi$$

$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$

$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi),e^{2 \pi i \xi x},d\xi$

短码

Duckquill provides a few useful shortcodes that simplify some tasks. They can be used on all pages.

Alerts

GitHub-style alerts. Simply wrap the text of desired alert inside the shortcode to get the desired look.

Available alert types:

• note: Useful information that users should know, even when skimming content.
• tip: Helpful advice for doing things better or more easily.
• important: Key information users need to know to achieve their goal.
• warning: Urgent info that needs immediate user attention to avoid problems.
• caution: Advises about risks or negative outcomes of certain actions.

{% alert(note=true) %}
-> Alert text <-
{% end %}

注意

Useful information that users should know, even when skimming content.

提示

Helpful advice for doing things better or more easily.

重要

Key information users need to know to achieve their goal.

警告

Urgent info that needs immediate user attention to avoid problems.

注意

Advises about risks or negative outcomes of certain actions.

Images and Videos

By default images and videos come with some generic styling, such as rounded corners and shadow. To fine-tune these, you can use shortcodes with different variable combinations.

Available variables are:

• url: URL to an image.
• url_min: URL to compressed version of an image, original can be opened by clicking on the image.
• alt: Alt text, same as if the text were inside square brackets in Markdown.
• full: Forces image to be full-width.
• full_bleed: Forces image to fill all the available screen width. Removes shadow, rounded corners and zoom on hover.
• start: Float image to the start of paragraph and scale it down.
• end: Float image to the end of paragraph and scale it down.
• pixels: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
• transparent: Removes rounded corners and shadow, useful for images with transparency.
• no_hover: Removes zoom on hover.

{{ image(url="image.png", alt="This is an image" no_hover=true) }}

Alternatively, you can append the following URL anchors. It can be more handy in some cases, e.g. such images will render normally in any Markdown editor, opposed to the Zola shortcodes.

• #full: Forces image to be full-width.
• #full-bleed: Forces image to fill all the available screen width. Removes shadow, rounded corners and zoom on hover.
• #start: Float image to the start of paragraph and scale it down.
• #end: Float image to the end of paragraph and scale it down.
• #pixels: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
• #transparent: Removes rounded corners and shadow, useful for images with transparency.
• #no-hover: Removes zoom on hover.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur.

For videos it’s all the same except for a few differences: no_hover and url_min variables are not available.

{{ video(url="video.webm", alt="This is a video") }}

CRT

Alright, this one doesn’t simplify anything, it just adds a CRT-like effect around Markdown code blocks.

{% crt() %}
-> Markdown code block <-
{% end %}

 _____________________________________________
|.'',        Public_Library_Halls         ,''.|
|.'.'',                                 ,''.'.|
|.'.'.'',                             ,''.'.'.|
|.'.'.'.'',                         ,''.'.'.'.|
|.'.'.'.'.|                         |.'.'.'.'.|
|.'.'.'.'.|===;                 ;===|.'.'.'.'.|
|.'.'.'.'.|:::|',             ,'|:::|.'.'.'.'.|
|.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|,',',',',|---|',|'|???????|'|,'|---|,',',',',|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|.'.'.'.'.|---|','   /%%%\   ','|---|.'.'.'.'.|
|.'.'.'.'.|===:'    /%%%%%\    ':===|.'.'.'.'.|
|.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.|
|.'.'.'.','       /%%%%%%%%%\       ','.'.'.'.|
|.'.'.','        /%%%%%%%%%%%\        ','.'.'.|
|.'.','         /%%%%%%%%%%%%%\         ','.'.|
|.','          /%%%%%%%%%%%%%%%\          ','.|
|;____________/%%%%%Spicer%%%%%%\____________;|

There’s also a cursor class that you can add to a span with e.g. █ character to simulate the terminal cursor. It doesn’t work from inside Markdown code blocks though.

YouTube

Allows to embed a YouTube video using youtube-nocookie.

Available variables are:

• autoplay: Whether the video should autoplay.
• start: On which second video should start.

{{ youtube(id="0Da8ZhKcNKQ") }}

Vimeo

Allows to embed a Vimeo video.

Available variables are:

• autoplay: Whether the video should autoplay.

{{ vimeo(id="869483483") }}

Description List (<dl>)

<dl>
<dt>Something</dt>
<dd>And its description</dd>
</dl>

Name

Godzilla

Born

1952

Birthplace

Japan

Color

Green

Form Input (<input>)

<input type="checkbox" />
<label>Checkbox</label>

•  Milk
•  Eggs
•  Flour
•  Coffee
•  Combustible lemons

With switch class:

<input class="switch" type="checkbox" />
<label>Checkbox</label>

•  Milk
•  Eggs
•  Flour
•  Coffee
•  Combustible lemons

With switch and big classes:

<input class="switch big" type="checkbox" />
<label>Checkbox</label>

•  Milk
•  Eggs
•  Flour
•  Coffee
•  Combustible lemons

With radio type:

<input type="radio" name="test" />
<label>Radio</label>

•  Milk
•  Eggs
•  Flour
•  Coffee
•  Combustible lemons

With color type:

<label>Color:</label>
<input type="color" value="#000000" />

Color:

Disabled:

With range type:

<input type="range" max="100" value="33">

Figure Captions (<figcaption>)

<figure>
  -> Whatever content <-
  <figcaption>Caption of content above</figcaption>
</figure>

Accordion (<details>)

<details>
  <summary>Accordion title</summary>
  -> Contents here <-
</details>

Side Comment (<small>)

<small>Small, cute text that doesn't catch attention.</small>

Small, cute text that doesn’t catch attention.

Abbreviation (<abbr>)

<abbr title="American Standard Code for Information Interchange">ASCII</abbr>

The ASCII art are awesome!

Aside (<aside>)

<aside>
-> Contents here <-
</aside>

A quill is a writing tool made from a moulted flight feather (preferably a primary wing-feather) of a large bird. Quills were used for writing with ink before the invention of the dip pen, the metal-nibbed pen, the fountain pen, and, eventually, the ballpoint pen.

As with the earlier reed pen (and later dip pen), a quill has no internal ink reservoir and therefore needs to periodically be dipped into an inkwell during writing. The hand-cut goose quill is rarely used as a calligraphy tool anymore because many papers are now derived from wood pulp and would quickly wear a quill down. However it is still the tool of choice for a few scribes who have noted that quills provide an unmatched sharp stroke as well as greater flexibility than a steel pen.

Keyboard Input (<kbd>)

<kbd>⌘ Command</kbd>.

To switch the keyboard layout, press ⌘ Super + Space.

Mark Text (<mark>)

<mark>Marked text</mark>

You know what? I’m gonna say some very important stuff, so important that even bold is not enough.

Deleted and Inserted Text (<del> and <ins>)

<del>Something deleted</del> <ins>Something added</ins>

Text deleted Text added

Progress Indicator (<progress>)

<progress></progress>
<progress value="33" max="100"></progress>

Sample Output (<samp>)

<samp>Sample Output</samp>

Sample Output

Inline Quotation (<q>)

<q>Someone said something</q>

Blah blah Inline Quote hmm.

Unarticulated Annotation (<u>)

<u>Gmarrar mitsakes</u>

Yeet the sus drip while vibing with the TikTok fam on a cap-free boomerang.

External Links

<a class="external" href="https://example.org">External link</a>

Link to site

Buttons Dialog

<div class="dialog-buttons">
  <a class="inline-button" href="#top">飞高高喽</a>
  <a class="inline-button colored external" href="https://example.org">Example</a>
</div>

1. Footnote ↩