自定义短码(转译)

图像短码

所有图片短码支持在 src 参数中使用绝对路径、相对路径和远程源。

所有图片短代码都有三个可选参数：

• inline. 默认为 false 。如果设置为 true ，图像将和文本一起内联显示。
• full_width. 默认为 false (见下文)
• lazy_loading. 默认为 true.

双重主题图像

如果您想为浅色和深色主题使用不同的图片，这将非常有用：

用法

{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="The Eiffel tower") }}

可逆图像

适用于图表、线条图、示意图……反转图像的颜色。源图像将用于浅色主题。

用法

{{ invertible_image(src="img/graph.webp", alt="Invertible graph") }}

可调光图像

过于明亮或对比度的图像在深色背景前可能会显得突兀。下面是一个在深色主题激活时变暗的照片示例。

用法

{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") }}

悬停时切换图片

提供了一种交互方式，当用户将鼠标悬停在图片上时，显示的图片会发生变化。这对于进行前后对比等场景非常有用。

用法

{{ image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Edited picture", hovered_alt="Original shot") }}

交互式图像切换

显示一张图片，并在点击时切换到另一张。非常适合突出差异或吸引对细节的注意。

用法

{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") }}

全宽图像

图像将扩展以匹配标题的宽度，这通常比文章文本宽度要宽（移动设备/小窗口除外）。

所有其他图片短代码可以通过将可选参数 full_width 设置为 true 来变为全宽。

用法

{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") }}

代码短码

显示源或路径

在下一个找到的代码块中显示路径或 URL。如果它以“http”开头，它将变成一个链接。特别是与远程文本短码结合使用时特别有用。

__pycache__/
*coverage*
.vscode/
dist/

用法

{{ add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") }}

```.gitignore
__pycache__/
*coverage*
.vscode/
dist/
```

文本短码

远程文本

从远程 URL 或本地文件中嵌入文本。若要在代码块中显示路径或 URL，请查看显示源或路径。

重要:

• 远程文件与本地文件: 如果 src 以“http”开头，则将其视为远程文件。否则，它假设为本地文件路径。
• 文件访问: 由于它使用了 Zola 的 load_data，本地文件必须位于 Zola 目录中——请参阅文件搜索逻辑。
• 代码块格式化: 为了将文本显示为代码块，你必须手动添加 Markdown 代码围栏（反引号），并可以选择指定编程语言以进行语法高亮。

用法

在代码块中嵌入远程 Python 脚本并带有语法高亮：

```python
{{ remote_text(src="https://example.com/script.py") }}
```

显示本地文件中的文本：

{{ remote_text(src="path/to/file.txt") }}

告诫

使用这些警告短代码可以吸引对信息的注意。它们有五种类型(type)：注意(note) ，提示(tip) ，信息(info) ，告警(warning)和危险( danger)。

您可以更改警告的标题(title)和图标(icon)。这两个参数都接受字符串，默认为警告类型。 图标(icon)可以是任何可用的警告类型。

用法

{{ admonition(type="danger", icon="tip", title="一个重要的提示", text="保持水分~") }}

多语言引用

这个短代码允许你同时显示引用的翻译文本和原文。引号将会自动添加：

用法

{{ multilingual_quote(original="What tranquility, to go through life in silence, greeting only friends.", translated="多么宁静啊，默默地走过一生，只向朋友们问候。", author="弗朗西斯科·乌姆布拉尔") }}

参考文献悬挂缩进

这个短代码会将参考文献部分格式化为悬挂缩进，如下所示：

用法

{% references() %}

您的参考资料在这里。

每个参考资料都要新起一行。Markdown（链接、斜体等）将被呈现。

{% end %}

剧透

这个短码可以让您模糊文本，直到用户点击它。就像这样：金鱼的记忆只有几个 月。是的, 真的. 。

如您所见，Markdown 已被渲染。您甚至可以使用 <br> 添加新行。

此短代码具有可选标志fixed_blur，用于模糊固定的占位符（“剧透”），而不是模糊实际内容。比如这样：在提交失踪人员报告前 并不需要 等待 24 小时。

用法

{{ spoiler(text="要隐藏的文本", fixed_blur=false) }}

容器

宽容器

如果您希望拥有更宽的表格、段落、代码块…，请使用此短码。在桌面端，它会占据头部宽度。在移动端，除了表格将获得水平滚动条外，此短代码不会有任何效果。

用法

{% wide_container() %}

这里放置您的代码块、段落、表格......

Markdown 当然会被渲染。

{% end %}