我知道编辑这个网站吗?

陷阱

本页介绍了为网站编写内容时需要注意的陷阱。

该网站使用 Markdown 进行富文本格式设置。它强大且友好, 但不能完全替代原始 HTML。幸运的是,您可以将 HTML 混合到 你的Markdown,只要你小心!

混合 Markdown 和 HTML

您可以将 CSS 样式应用于内联 HTML 元素,例如 <span>、 并且任何附近的 Markdown 仍将被应用:

代码

Enjoy some
*<span style="font-size: 1.3em">increasingly</span>
<span style="font-size: 1.6em">large</span>
<span style="font-size: 1.9em">text</span>
<span style="font-size: 2.2em">in italics</span>*!

结果

Enjoy some increasingly large text in italics!

Markdown inside block elements

If you use a block element, Markdown won’t be rendered inside:

代码

<div>
Why isn't *this* in italics?
</div>

结果

Why isn't *this* in italics?

添加 markdown=1 以强制在该元素内进行 Markdown 渲染:

代码

<div markdown=1>
Yay, *this* is now in italics!
</div>

结果

Yay, this is now in italics!

Be sure to put a newline before your </div>! Otherwise you will get broken HTML. (Might be a bug in the kramdown renderer?)

为了避免 </div> 和换行符的陷阱,你可以 使用 <span markdown=1> 定位您想要 Markdownified 的部分:

代码

<div>I like *asterisks*.
They are so <span markdown=1>**pretty**</span>!
Do you like *asterisks* too?</div>

结果

I like *asterisks*. They are so pretty! Do you like *asterisks* too?

Using capture and markdownify

In some scenarios, it is easier to use Liquid’s capture directive to store a block of Markdown into a variable, and then use Jekyll’s markdownify filter to convert it to HTML, so that it can be more easily mixed with other HTML. One such case is with the <details> to create an expandable block of content. Here is an example:

代码

{% capture periodic-table %}
| 1 | H  | Hydrogen  |  1.008 |
| 2 | He | Helium    |  4.003 |
| 3 | Li | Lithium   |  6.938 |
| 4 | Be | Beryllium |  9.102 |
| 5 | B  | Boron     | 10.806 |
| 6 | C  | Carbon    | 12.009 |
| 7 | N  | Nitrogen  | 14.006 |
| 8 | O  | Oxygen    | 15.999 |
| 9 | F  | Fluorine  | 18.998 |
{:.left}
{% endcapture %}
<details><summary>看看这张神奇的桌子!</summary>
{{ periodic-table | markdownify }}
</details>

结果

看看这张神奇的桌子!
1 H Hydrogen 1.008
2 He Helium 4.003
3 Li Lithium 6.938
4 Be Beryllium 9.102
5 B Boron 10.806
6 C Carbon 12.009
7 N Nitrogen 14.006
8 O Oxygen 15.999
9 F Fluorine 18.998

markdownify过滤器可能非常有用,但要小心:它确实有用 不适用于内联元素,因为它会包围您的 <p>...</p>标签中的Markdown表达式,破坏了内联效果:

代码

{% capture question %} Does *Monday* work? {% endcapture %}
<div>I asked: "{{ question | markdownify }}" and she nodded.</div>

结果

I asked: "

Does Monday work?

" and she nodded.

抑制 Markdown 渲染

markdown属性也可以以其他方式使用,以抑制 HTML 元素内的 Markdown 渲染:

代码

<span markdown=0>
Here are some **asterisks**.
</span>

结果

Here are some **asterisks**.

Conditional expressions

Where conditionals work

Conditional expressions may only be used with if and unless tags! They notably do not work with assign tags. So you cannot write a truthy conditional expression and assign it to variable expecting it to be set as true or false. If you need that, you can write:

{%- if a or b or c -%}
  {%- assign my-boolean-flag = true -%}
{%- else -%}
  {%- assign my-boolean-flag = false -%}
{%- endif -%}

真实与虚假

在液体中,only conditional expressions that evaluate to false are false and nil。 与其他语言不同,在 Liquid 中甚至是空字符串 ('') 数字零 (0) 的计算结果为true!

Table of truthy and falsy example expressions

| Expression | truthiness | |————————————-|——————————————————————————| | "have a cow" | true | | ""| 正确| | 0| 正确 | | 1| 正确 | | false| 错误 | | "false"| 正确 | | §§§107§§§| §§§15§§§正确 §§§16§§§错误 §§§17§§§| | §§§108§§§| §§§18§§§正确 §§§19§§§错误 §§§20§§§| | §§§109§§§| §§§21§§§正确 §§§22§§§错误 §§§23§§§| | §§§110§§§| §§§24§§§正确 §§§25§§§错误 §§§26§§§| | §§§111§§§| §§§27§§§正确 §§§28§§§错误 §§§29§§§| | §§§112§§§| §§§30§§§正确 §§§31§§§错误 §§§32§§§| | §§§113§§§| §§§33§§§正确 §§§34§§§错误 §§§35§§§| | §§§114§§§| §§§36§§§正确 §§§37§§§错误 §§§38§§§| | §§§115§§§| §§§39§§§正确 §§§40§§§错误 §§§41§§§| | §§§116§§§| §§§42§§§正确 §§§43§§§错误 §§§44§§§| | §§§117§§§| §§§45§§§正确 §§§46§§§错误 §§§47§§§| | §§§118§§§| §§§48§§§正确 §§§49§§§错误 §§§50§§§| | §§§119§§§| §§§51§§§正确 §§§52§§§错误 §§§53§§§| | §§§120§§§| §§§54§§§正确 §§§55§§§错误 §§§56§§§| | §§§121§§§| §§§57§§§正确 §§§58§§§错误 §§§59§§§| | §§§122§§§| §§§60§§§正确 §§§61§§§错误 §§§62§§§| | §§§123§§§| §§§63§§§正确 §§§64§§§错误 §§§65§§§| | §§§124§§§| §§§66§§§正确 §§§67§§§错误 §§§68§§§| | §§§125§§§| §§§69§§§正确 §§§70§§§错误 §§§71§§§| | §§§126§§§| §§§72§§§正确 §§§73§§§错误 §§§74§§§| | §§§127§§§| §§§75§§§正确 §§§76§§§错误 §§§77§§§| | §§§128§§§| §§§78§§§正确 §§§79§§§错误 §§§80§§§| | §§§129§§§| §§§81§§§正确 §§§82§§§错误 §§§83§§§| | §§§130§§§| §§§84§§§正确 §§§85§§§错误 §§§86§§§| | §§§131§§§| §§§87§§§正确 §§§88§§§错误 §§§89§§§| | §§§132§§§| §§§90§§§正确 §§§91§§§错误 §§§92§§§| | §§§133§§§| §§§93§§§正确 §§§94§§§错误 §§§95§§§| | §§§134§§§| §§§96§§§正确 §§§97§§§错误 §§§98§§§| | §§§135§§§| §§§99§§§正确 §§§100§§§错误 §§§101§§§ | {:。左边}

Order of operations

Unlike other languages, the and and or operators in Liquid have the same precedence. And even more surprisingly, Liquid evaluates conditionals from right to left with equal operator precedence.

Here is an example:

代码

{%- if nil and 'me' or 'yes' and 'OK' -%}
  Oh yes I did!
{%- else -%}
哦不,你没有!
{%- endif -%}

结果

Oh no you didn’t!

以下是 Liquid 如何评估上述内容的详细说明:

nil and ('me' or ('yes' and 'OK'))
nil and ('me' or true)
nil and true
false

上述括号仅用于说明; 液体不支持 条件表达式中的括号,你的表达式将是错误的 如果您尝试使用它们,则会进行评估。

在大多数其他语言(例如 Python 或 JavaScript)中,它将是 true

$ js
> console.log(null && 'me' || 'yes' && 'OK' ? 'true' : 'false')
true
$ python
>>> print('true' if None and 'me' or 'yes' and 'OK' else 'false')
true

OblongJaggedBluemorphobutterfly small