Files
hugo-build/content/post/2019-08-08-text-and-typography/index.zh-CN.md
2025-05-11 11:31:58 +08:00

4.8 KiB

title, date, draft, description, categories, tags, pin, math, image
title date draft description categories tags pin math image
文本和排版 2019-08-08 11:33:00 +0800 false 文本、排版、数学公式、图表、流程图、图片、视频等示例。
博客
演示
排版
true true
path lqip alt
devices-mockup.png data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA Chirpy 主题在多个设备上的响应式渲染。

标题

H1 — 标题

H2 — 标题

H3 — 标题

H4 — 标题

段落

这是一个段落示例。在这里,我们可以看到段落是如何在 Markdown 中呈现的。段落是由一个或多个连续的文本行组成,它们之间用一个或多个空行分隔。正常的段落不应该用空格或制表符缩进。这样可以保持文档的整洁和一致性。文本排版是网页设计和内容创作中的重要元素,良好的排版可以提高可读性和美观度。

列表

有序列表

  1. 第一点
  2. 第二点
  3. 第三点

无序列表

  • 章节
      • 段落

待办列表

  • 任务
    • 步骤 1
    • 步骤 2
    • 步骤 3

描述列表

太阳
地球绕其运行的恒星
月亮
地球的天然卫星,通过反射太阳光可见

引用块

这行显示 引用块

提示框

这是一个显示 tip 类型提示的例子。 {.prompt-tip }

这是一个显示 info 类型提示的例子。 {.prompt-info }

这是一个显示 warning 类型提示的例子。 {.prompt-warning }

这是一个显示 danger 类型提示的例子。 {.prompt-danger }

表格

公司 联系人 国家
Alfreds Futterkiste Maria Anders 德国
Island Trading Helen Bennett 英国
Magazzini Alimentari Riuniti Giovanni Rovelli 意大利

链接

http://127.0.0.1:4000

脚注

点击钩子将定位到脚注 1 ,这里是另一个脚注 2

内联代码

这是 内联代码 的一个例子。

文件路径

这里是 {{< filepath src="/path/to/the/file.extend" >}}。

代码块

通用

这是一个通用代码片段,没有语法高亮和行号。

特定语言

if [ $? -ne 0 ]; then
  echo "命令执行不成功。";
  #执行必要操作 / 退出
fi;

特定文件名

@import
  "colors/light-typography",
  "colors/dark-typography";

数学公式

数学公式由 MathJax 提供支持:


\begin{equation}
  \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
  \label{eq:series}
\end{equation}

我们可以引用公式如 \eqref{eq:series}。

a \ne 0 时,ax^2 + bx + c = 0 有两个解,它们是

x = {-b \pm \sqrt{b^2-4ac} \over 2a}

图片

默认(带标题)

桌面视图 { width="972" height="589" caption="全屏宽度和居中对齐" }

左对齐

桌面视图 { width="972" height="589" .w-75 .normal}

向左浮动

桌面视图 { width="972" height="589" .w-50 .left} 这是一段文本示例,用于演示图片向左浮动时的效果。在这种情况下,文本会环绕在图片的右侧。这对于创建更具视觉吸引力的布局很有用,特别是当您想要文本和图片并排显示时。浮动元素是网页设计中常用的技术,可以有效利用空间并增强内容的可读性。

向右浮动

桌面视图 { width="972" height="589" .w-50 .right} 这是一段文本示例,用于演示图片向右浮动时的效果。在这种情况下,文本会环绕在图片的左侧。这种布局技术可以创建更加动态和有趣的页面设计。合理使用浮动可以使您的内容更加吸引人,并引导读者的视线在页面上流畅移动。记住,浮动元素需要适当的空间才能发挥最佳效果。

暗/亮模式 & 阴影

下面的图片将根据主题偏好切换暗/亮模式,注意它有阴影效果。

仅亮模式 { .light .w-75 .shadow .rounded-10 w="1212" h="668" } 仅暗模式 { .dark .w-75 .shadow .rounded-10 w="1212" h="668" }

视频

{{< embed/youtube id="Balreaj8Yqs" >}}

反向脚注


  1. 脚注源 ↩︎

  2. 第二个脚注源 ↩︎