本页介绍了为网站编写内容时需要注意的陷阱。
该网站使用 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>结果
添加 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>结果
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>结果
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
![]()