18、脚注¶
TIP
Markdown 脚注是一种在文档中添加额外注释或引用信息的有效方式，通常这些注释会出现在页面的底部或文档的末尾。
18.1、语法¶
TIP
在需要添加脚注的文本后，使用
[^标识符]的格式来插入脚注引用。这里的“标识符”可以是数字、单词或短语，只要在整个文档中保持唯一即可。
```
```
18.2、应用场景¶
TIP
为特定术语或概念提供解释
当文档中出现专业术语或概念时，可以使用脚注来提供简要的解释或定义，帮助读者更好地理解。
引用外部资源
在文档中引用外部资源（如网页、书籍、文章等）时，可以使用脚注来提供资源的链接或详细信息。
添加附加信息
脚注还可以用于提供与文档内容相关的附加信息，如作者信息、版权声明、图片来源等。
# Markdown 脚注 示例
在这个示例中，我们将展示如何使用 Markdown 脚注语法。
## 术语解释
Markdown 是一种轻量级标记语言，以其简洁、高效、易读、易写的特点而被广泛使用。
## 引用外部资源
有关 Markdown 的更多信息，请访问以下网站。
## 附加信息
本文的作者是张三，版权归作者所有。
: Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 HTML。
: [Markdown 官方网站](https://daringfireball.net/projects/markdown/)
: 张三，2024 年。版权所有。
渲染效果：
Markdown 脚注 示例¶
在这个示例中，我们将展示如何使用 Markdown 脚注语法。
术语解释¶
Markdown 是一种轻量级标记语言，以其简洁、高效、易读、易写的特点而被广泛使用。
引用外部资源¶
有关 Markdown 的更多信息，请访问以下网站。
附加信息¶
本文的作者是张三，版权归作者所有。
: Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 HTML。
: 张三，2024 年。版权所有。
根据您提供的图片信息，提取的文字内容如下：
19、标题 ID¶
许多 Markdown 处理器支持标题的自定义 ID —— 一些 Markdown 处理器会自动添加它们。添加自定义 ID 允许您直接链接到标题并使用 CSS 修改它们。要添加自定义标题 ID，请将自定义 ID 括在与标题相同的行上的花括号中。
代码示例¶
Markdown语法：
### My Great Heading {#custom-id}
对应的HTML：
<h3 id="custom-id">My Great Heading</h3>
链接到标题 ID¶
您可以通过创建带有数字符号（#）后跟自定义标题ID的标准链接来链接到文件中具有自定义ID的标题。这些通常称为锚链接。
| 降价 | HTML | 渲染输出 |
|---|---|---|
| Heading IDs | <a href="#heading-ids">Heading IDs</a> |
标题ID |
其他网站可以通过将自定义标题ID添加到网页的完整URL（例如，Heading IDs）来链接到该标题。
20、删除线¶
您可以通过在单词中心放置一条水平线来删除单词。结果看起来像这样，此功能允许您指示某些单词是错误的，不应包含在文档中。要删除单词，请在单词前后使用两个波浪号（~~）。
~~The world is flat.~~ We now know that the world is round.
渲染的输出如下所示：
~~世界是平的。~~ 我们现在知道世界是圆的。
21、表情符号¶
将表情符号添加到 Markdown 文件有两种方法：将表情符号复制并粘贴到 Markdown 格式的文本中，或键入 emoji 短代码。
复制和粘贴表情符号¶
在大多数情况下，您可以简单地从 Emojipedia等来源复制表情符号并将其粘贴到您的文档中。许多 Markdown 应用程序会自动以 Markdown 格式的文本显示表情符号。您从 Markdown 应用程序导出的 HTML 和 PDF 文件应显示表情符号。
提示：如果您使用的是静态网站生成器，请确保将 HTML 页面编码为 UTF-8。
使用表情符号简码¶
一些 Markdown 应用程序允许您通过输入表情符号短代码来插入表情符号。这些以冒号开头和结尾，并包含表情符号的名称。
代码示例：
Gone camping! :tent: Be back soon.
That is so funny! :joy:
渲染的输出如下所示：
去露营了! ⛺ 快回来。
太搞笑了! 😂
注意：您可以使用此 表情符号简码列表，但请记住，表情符号简码因应用程序而异。有关更多信息，请参阅 Markdown 应用程序的文档。
六、徽章¶
TIP
在 Markdown 中，徽章（Badge）是一种小型图标，通常用于显示项目的状态、版本、许可证类型等信息。
在 GitHub、GitLab、Gitee 上都有出现很多徽章图标，以 Vue 为例：
https://img.shields.io/badge/build-passing-brightgreen
https://img.shields.io/badge/coverage-97%25-yellow
https://img.shields.io/badge/downloads-29M%2Fmonth-brightgreen
https://img.shields.io/badge/npm-v3.5.27-blue
https://img.shields.io/badge/license-MIT-brightgreen
https://img.shields.io/badge/chat-on%20discord-purple
1、徽章的应用场景¶
TIP
Markdown 徽章因其简洁明了、易于嵌入的特点，在很多场景中都可以使用。
README 文件：在 GitHub、GitLab、Gitee 等代码托管平台的项目仓库中，README 文件通常是用户了解项目的第一入口。在 README 文件中嵌入徽章，可以直观地展示项目的状态（如构建是否通过、依赖是否更新）、版本信息、许可证类型等关键信息。
文档和博客：在使用 Markdown 编写的文档或博客中，徽章可以被用来标记某些内容的重要性（如警告、注意）、进度条（如完成度）、评分或评价等。
社交媒体和个人网站：在个人网站、社交媒体（如 Twitter、LinkedIn）的自我介绍或项目展示中，使用徽章可以快速传达个人信息（如技能标签、编程语言熟练度）、项目状态（如是否开源、是否有活跃的社区支持）等。
项目管理和协作工具：在一些支持 Markdown 的项目管理和协作工具（如 Trello、Jira、Notion）中，徽章可以被用来标记任务的优先级、状态（如进行中、已完成）、关联的资源或链接等。
社区和论坛：在一些支持 Markdown 的社区和论坛中，用户可以使用徽章来展示自己的身份（如版主、贡献者）、成就（如获得的徽章、积分）或参与的活动（如在线研讨会、黑客马拉松）等。
API 文档和开发者门户：在 API 文档和开发者门户中，徽章可以被用来标记 API 的状态（如稳定、测试）、版本信息、支持的认证方式等。
演示和报告：在使用 Markdown 编写的演示文稿或报告中，徽章可以用来增加视觉效果，强调关键信息或数据。
2、常用的徽章生成服务¶
TIP
Shields.io：一个流行的在线徽章生成服务，支持自定义标签、消息、颜色、样式等。
Badgen：另一个在线徽章生成服务，提供了更多的动态数据源支持，如 npm 版本、GitHub 状态等。
Simple Icons Badges：基于 Simple Icons 图标库的徽章生成服务，允许你使用各种流行的图标来创建徽章。
3、使用 Shields.io 网站生成徽章¶
TIP
Shields.io 生成的徽章可以嵌入到你的 GitHub README 文件、博客文章或其他网页中。
进入徽章生成页面中，会看到一个简单的表单，用于生成徽章。
![[Pasted image 20260127222034.png]]
4、生成徽章链接路径参数，拼接语法¶
TIP
标签、信息和颜色由破折号 -分隔
any text you like
拼接的链接地址：https://img.shields.io/badge/any_text-you_like-blue
| URL 输入 | 标记输出 |
|---|---|
下划线 _或 %20 |
空格 |
双下划线 __ |
下划线 _ |
双破折号 -- |
破折号 - |
| ## 5、Shields.io 徽章配置路径参数 |
| 参数 | 说明 | 示例值 |
|---|---|---|
| Label | 徽章的标签，显示在徽章的左侧 | Version |
| Message | 徽章的消息，显示在徽章的右侧 | 1.0.0 |
| Color | 徽章的颜色，可以是预定义的颜色名或十六进制颜色代码 | blue, #ff6347 |
| Style | 徽章的样式，如 flat、flat-square、plastic、social 等 | flat-square |
| Logo | 徽章的图标，可以是 URL 链接到图片 | https://example.com/logo.png |
| LogoWidth | 图标宽度，与 Logo 参数一起使用，调整图标大小 | 20 |
| LogoColor | 图标的颜色，可以是预定义的颜色名或十六进制颜色代码 | white |
| Link | 徽章的链接，点击徽章时跳转到的地址 | https://example.com |
注： 可以使用十六进制、rgb、rgba、hsl、hsla 和 css 命名颜色。
6、在文本框中输入生成徽章对应的参数¶
TIP
按步骤填写对应的参数，即可生成徽章 ![[Pasted image 20260127222329.png]] 注： 生成徽章对应的参数语法和对应的值，参照以上配置表
生成后的 MarkDown 徽章语法
渲染效果：
7、使用 Simple Icons Badges 生成徽章图标¶
TIP
Simple Icons Badges：基于 Simple Icons 图标库的徽章生成服务，允许你使用各种流行的图标来创建徽章。 ![[Pasted image 20260127222419.png]]
使用徽章图标 ![[Pasted image 20260127223251.png]]
生成后的 MarkDown 徽章语法
渲染效果：
8、使用 Badgen 生成徽章¶
TIP
Badgen：另一个在线徽章生成服务，提供了更多的动态数据源支持，如 npm 版本、GitHub 状态等 ![[Pasted image 20260127223610.png]]
8.1、生成后的 MarkDown 徽章语法¶
渲染效果：
8.2、生成带图标的徽章¶
TIP
具体的图标还是使用 Simple Icons Badges 图标库来进行生成
渲染效果：
9、Version Badge 生成动态版本徽章¶
TIP
Version Badge 是一个提供 npm 包版本信息的网站。用户可以通过该网站查询 npm 包的具体版本信息，包括最新版本、发布日期等。此外，该网站还支持动态徽章的生成，用户可以在项目 README 中嵌入这些徽章，以展示包的版本信息。
![[Pasted image 20260127223551.png]]
生成后的 MarkDown 徽章语法
[](https://badge.fury.io/js/vue)
渲染效果：
