flash's blog

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
description: 这是我新 Astro 博客的第一篇文章。
5
image: ./cover.jpg
6
tags: [前端, 开发]
7
category: 前端开发
8
draft: false
9
---

属性	描述
`title`	文章标题。
`published`	文章发布日期。
`updated`	文章更新日期。如果未设置，将默认使用发布日期。
`pinned`	是否将此文章置顶在文章列表顶部。
`description`	文章的简短描述。显示在首页上。
`image`	文章封面图片路径。 1. 以 `http://` 或 `https://` 开头：使用网络图片 2. 以 `/` 开头：`public` 目录中的图片 3. 不带任何前缀：相对于 markdown 文件的路径
`tags`	文章标签。
`category`	文章分类。
`lang`	文章语言代码（如 `zh-CN`）。仅当文章语言与站点默认语言不同时设置。
`licenseName`	文章内容的许可证名称。
`licenseUrl`	文章内容的许可证链接。
`author`	文章作者。
`sourceLink`	文章内容的来源链接或参考。
`draft`	如果这篇文章仍是草稿，则不会显示。
`comment`	是否启用此文章的评论功能。默认为 `true`。
`slug`	自定义文章 URL 路径。如果不设置，将使用文件名作为 URL。
`password`	文章密码。设置后文章内容将被 AES-256-GCM 加密，访客需输入密码才能查看。
`passwordHint`	密码提示。显示在密码输入框上方，帮助访客回忆密码，也可以不加。

文章文件的放置位置#

您的文章文件应放置在 src/content/posts/ 目录中。您也可以创建子目录来更好地组织您的文章和资源。

1
src/content/posts/
2
├── post-1.md
3
└── post-2/
4
    ├── cover.png
5
    └── index.md

自定义文章 URL (Slug)#

什么是 Slug？#

Slug 是文章 URL 路径的自定义部分。如果不设置 slug，系统将使用文件名作为 URL。

Slug 使用示例#

示例 1：使用文件名作为 URL#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
---

文件：src/content/posts/my-first-blog-post.md

URL：/posts/my-first-blog-post

示例 2：自定义 Slug#

1
---
2
title: 我的第一篇博客文章
3
published: 2023-09-09
4
slug: hello-world
5
---

文件：src/content/posts/my-first-blog-post.md

URL：/posts/hello-world

示例 3：其他语言文件名使用Slug#

1
---
2
title: 如何使用 Firefly 博客主题
3
published: 2023-09-09
4
slug: how-to-use-firefly-blog-theme
5
---

文件：src/content/posts/如何使用Firefly博客主题.md

URL：/posts/how-to-use-firefly-blog-theme

Slug 使用建议#

使用英文和连字符：my-awesome-post 而不是 my awesome post
保持简洁：避免过长的 slug
具有描述性：让 URL 能够反映文章内容
避免特殊字符：只使用字母、数字和连字符
保持一致性：在整个博客中使用相似的命名模式

注意事项#

Slug 一旦设置并发布，建议不要随意更改，以免影响 SEO 和已存在的链接
如果多个文章使用相同的 slug，后面的文章会覆盖前面的
Slug 会自动转换为小写

Java

Wed, 01 Jan 2025 00:00:00 GMT

Java的JDK#

下载#

我们先打开命令行后输入并执行命令

1
systeminfo

检查自己的系统类型（计组内容），

是x64，

来到官网下载jdk，Java Downloads | Oracle 中国

镜像：Index of java-local/jdk/8u151-b12

在 jdk1.8.0_151 这个版本号中，151 代表的是 Java 8 的第 151 次更新补丁（Update 151）。

真假jdk#

安装的时候让你设置两次路径，

真正的 JDK 是文件夹 (D:\develop\java\jdk1.8)。

证据：这个文件夹里有 include（存放 C 语言头文件）、db（内置数据库）以及最重要的 src.zip（Java 核心类库的源代码）。

那个 JRE 是文件夹 (D:\develop\java\jdk1.8.0_151)。

证据：它只有 bin 和 lib，缺少了开发所需的头文件和源码包。

设置 JAVA_HOME：路径填写 D:\develop\java\jdk1.8。
设置 Path：添加 %JAVA_HOME%\bin。

检查Java版本

1
java -version

管理不同的jdk#

设置 JAVA_HOME时，要如下

Windows 手动管理（经典方式）

如果你不使用第三方工具，可以通过规范的目录管理和脚本实现。

独立安装：下载不同版本的 JDK（如 JDK 8, 17, 21），安装到不同的目录（例如 C:\Java\jdk-8, C:\Java\jdk-17），千万不要覆盖安装。
切换脚本

：编写简单的批处理文件（
```
1
.bat
```
）来快速切换环境变量。
- 创建一个
```
1
setjdk17.bat
```
  ，内容如下：
  
  batch
```
1
set JAVA_HOME=C:\Java\jdk-17
2
set PATH=%JAVA_HOME%\bin;%PATH%
3
echo Switched to JDK 17
```
- 每次打开命令行时，先运行这个脚本即可切换当前会话的环境。
注意：不要在 Windows 系统属性里写死 JAVA_HOME，否则 IDE 可能会读取错误。

idea编译报错#

setting中，

你告诉编译器“我要用 Java 8 的语法写代码”（源发行版 8），但同时可能又不小心把它配置成了“编译成老版本格式”（目标发行版 1.5 或其他），这两者冲突了。 Java 规定：如果你选了 Java 8 的语法，生成的目标文件也必须是 1.8 格式。

structure里，

nodejs

Wed, 01 Jan 2025 00:00:00 GMT

Nodejs安装#

安装好nodejs后，在cmd中分别输入

1
node -v
2
npm -v

环境的配置，

找到nodejs在电脑中的安装地址，在这个安装路径下新创建两个文件夹分别是 node_global，node_cache。

我的安装地址

1
例子：
2
npm config set prefix "C:\Program Files\nodejs\node_global"
3
npm config set cache "C:\Program Files\nodejs\node_cache"
4

5
将上面的地址改为我们自己的地址，我的是
6
npm config set prefix "D:\develop\node\node_global"
7
npm config set cache "D:\develop\node\node_cache"

命令检验一下是否配置正确

1
npm config get prefix
2
mpm config get cache

配置环境变量#

在global这个文件夹下增加一个 node_module 文件夹，

1
D:\develop\node\node_global\node_modules

用户变量 （用户变量是单个用户的环境）的PATH，

将之前的 C:\Users\j\AppData\Roaming\npm ，以npm 结尾的这个地址修改为

1
D:\develop\node\node_global

系统变量 （系统变量是全局的）的 path 里新建，

1
%NODE_PATH%

最后输入命令进行检查

1
npm install express -g

配置的作用#

这样就可以让我们输入命令下载的程序安装在

1
D:\develop\node\node_global\node_modules

这个文件夹中了，

下图是下载好的opencode

Node.js、nvm、npm和npx这四个概念到底是什么?

Node.js#

Node.js：让JavaScript在浏览器外运行的环境

简单来说，Node.js本质上是一个JavaScript的运行环境，它能编译并执行我们写的JavaScript代码，

在Node.js出现之前，JavaScript主要是被浏览器解释执行的，

也就是说我们写的JS代码必须在浏览器中才能运行，而Nodejs的出现彻底改变了这一切，它把JavaScript从浏览器的”牢笼”中解放出来，让JavaScript可以在任何安装了Node.js的环境中执行。

这个革命性的变化意味着什么呢? 它让我们可以用 JavaScript来开发服务器端应用程序**，**构建后端服务，甚至开发桌面应用！

nvm#

说完Node.js，我们来看看nvm。

nvm：解决多版本Node.js共存的问题

nvm全称是Node Version Management，即Node版本管理工具。你可能会问：我们开发软件时通常只在一个环境里做开发，为什么需要版本管理工具呢?

主要原因是前端生态这些年发展太快了，Nodejs的更新频率非常高，版本也非常多

想象一下这种情况：一个应用是在最新版本的Node.js中开发的，但当你把它放在一个老版本的Node.js环境中运行时就可能会遇到各种兼容性问题，导致应用无法正常工作，这时nvm就派上用场了！

它是如何管理Node.js版本的呢?

nvm实际上是帮我们在同一台电脑上安装多个不同版本的Node.js，并且可以根据不同项目的需要轻松切换使用哪个版本。

比如，项目A需要Node.js 20，项目B需要Node.js 22，有了nvm，我们只需要一行命令就能完成切换非常方便!

nvm安装配置#

home

D:\develop\nvm\nvm

系统链接

D:\develop\nvm\nodejs

忽略

管理之前已下载好的node版本，

检查

1
# 查看 nvm 版本，version 可简写成 小v
2
nvm version
3
nvm v
4
# 显示 node 是运行在 32 位还是 64 位
5
nvm arch

操作指令#

重点#

1
# 显示已经安装的列表，list 可简化为 ls
2
nvm list
3
# 显示远程可安装的列表，list 也可简化为 ls
4
nvm list available
5
# 卸载指定版本 node
6
nvm uninstall [version]
7
# 使用指定版本 node
8
nvm use [version]

演示

先别敲命令，还没配置好。

少用

1
# 开启 node.js 版本管理
2
nvm on
3
# 关闭 node.js 版本管理
4
nvm off

配置下载镜像#

configure taobao mirror【配置下载镜像】

在 nvm 的安装路径下，找到 settings.txt，在后面加上这两行，设置国内淘宝镜像源：

1
node_mirror: https://npmmirror.com/mirrors/node/
2
npm_mirror: https://npmmirror.com/mirrors/npm/

问题：为什么要配置镜像？

答：配置完国内的镜像后，npm install xxx 的下载速度会很快！

node安装#

install node#

Terminal window

1
nvm list available
2
nvm install 16
3
nvm list
4
nvm use 16

小提示：不要安装 node 的奇数版本！LTS 一般就是偶数版本。

1
nvm use 18

每次使用 nvm 安装 node 都需要手动创建这两个文件夹吗？

答：并不是每次都需要自己手动创建，但是第一次推荐你手动创建，以后当你设置 prefix 和 cache 后，系统会自动创建。

修改 npm 默认镜像源#

修改 npm 镜像源为淘宝镜像源

Terminal window

1
npm config set registry http://registry.npmmirror.com

检查是否成功

Terminal window

1
npm config get registry

【关键】设置全局模板（prefix）和缓存文件（cache）的存放路径：#

使用nvm后，使用前要输入

1
nvm use 版本

node_global：npm install 下载的全局插件

node_cache：node 的缓存

Terminal window

1
# npm config set cache "%NVM_SYMLINK%\node_cache"
2
npm config set cache "D:\develop\nvm\nodejs\node_cache"
3

4
# npm config set prefix "%NVM_SYMLINK%\node_global"
5
npm config set prefix "D:\develop\nvm\nodejs\node_global"
6
# 可编辑 .npmrc 配置文件
7
npm config edit
8
# 查看部分 .npmrc 配置信息
9
npm config ls

输入后查看or编辑配置文件，

1
npm config edit

注意：

引号里面换自己的路径
引号里面的路径是软链接（nodejs）的路径

每次使用 nvm 安装 node 都需要配置 prefix 和 cache 吗？

答：并不需要每次都设置。配置的 prefix 和 cache 的信息都在 C:\Users\zhuang\.npmrc 文件里

配置全局变量#

此时，在环境变量中

现在，把右侧的三个添加到Path中

主要是后期你安装些命令之后，系统就会要到这里边找，

npm#

接下来是npm，全称Node Package Manager ,它是Node.js生态系统中的包管理工具。

在没有npm之前如果我们想在项目中 使用第三方库，(比如实现Excel文件上传功能)，

需要手动下载这些库的代码，放在项目的lib文件夹中，然后在需要的地方通过script标签引入，如果项目变得复杂，依赖的第三方库增多，而且这些库之间还可能存在复杂的依赖关系，手动管理将变得极其困难。 npm就是为了解决这个问题而生的。

有了npm，我们只需要在命令行中输入简单的命令，告诉npm我们需要哪些第三方库，它就会自动为我们下载这些库及其所有依赖，并且管理它们之间的依赖关系，同样，当我们不再需要某个库时，也可以通过npm轻松删除。

pnpm#

[ERROR] The configured global bin directory “C:\Users\j\AppData\Local\pnpm\bin” is not in PATH Run “pnpm setup” to update your shell configuration.

提示你 pnpm 的全局命令目录没有被添加到系统的 PATH 环境变量中，并且已经贴心地给出了解决方案！

你只需要按照提示，在终端里运行下面这条命令：

powershell

1
pnpm setup

运行完这条命令后，pnpm 会自动帮你把相关的路径配置到系统的环境变量里。

maven教程

Wed, 01 Jan 2025 00:00:00 GMT

maven是由阿帕奇软件基金会开源的一个 自动化构建项目,

主要是为了解决java项目中最常见的两个问题， 依赖管理和项目构建。

在java项目中我们经常需要引入很多第三方的库文件，也就是jar包，

比如spring 、mybatis或者其他的一些工具库等等，这些库文件可能还会依赖很多其他的库文件

如果我们 手动去下载这些依赖的话，不但非常的麻烦，而且不同的依赖版本之间可能还会有冲突，这个时候就可以使用maven，来帮助我们管理这些依赖。

我们需要做的就是在一个叫做pom的XML文件中告诉我maven我们需要哪些依赖，

然后maven就可以自动的将这个jar包以及它所依赖的所有其他的jar包，全部都下载并导入到项目中。这就是maven在依赖管理方面的作用。

maven解决的另一个问题是 构建管理。

在java项目中，我们需要把java的源文件编译成字节码文件，然后再把字节码文件打包成一个可执行的jar包或者WAR包，

如果没有自动化构建工具的话，这个过程就会非常的繁琐，而且容易出现各种问题，

maven提供了一个标准的项目结构和构建流程，只需要按照这个标准来组织项目就可以非常轻松方便地执行、构建、打包和部署等工作，

这就是maven在构建管理方面的作用。

pom#

maven的核心概念是项目对象模型(Project Object Model)，也就是pom，

它是一个XML文件，也是maven项目的核心文件定义了项目的配置，依赖插件以及构建的过程。

maven和pom.XML文件之间的关系有点类似于上节课我们讲过的make和make file，或者前端node js项目中的NPM和package.JASON文件之间的关系，

maven读取pom.XML文件之后，会根据这个文件中定义的规则去下载依赖包，然后编译工程中的源代码，最后将工程打包成一个可执行的jar包或者war包

这个过程中，会有很多的插件来帮助我们完成这些工作。

比如编译插件，打包插件，测试插件等等这些插件都是maven提供的，我们只需要在pom.XML文件中配置一下就可以了。

maven会自动的去执行这些插件，完成整个构建的过程。

maven仓库#

在maven中有一个仓库的概念，仓库简单来说就是存放jar包的地方，按照作用范围的不同可以分为本地仓库，远程仓库和中央仓库，

本地仓库就是我们自己电脑上的一个目录，一般默认是在用户家目录下的点M2这个目录里面，这个位置可以在maven的配置文件中修改修改的方法后面我们会讲到这里

远程仓库也叫做私服仓库，一般是 ==一个公司或者组织内部搭建的一个仓库==，用来给内部的项目提供统一的依赖管理，这样就可以避免jar包的重复下载，而且也可以把一些公司内部发布的私有的jar包放到这个仓库里面供其他项目来使用。

最常用的搭建私服仓库的工具是nexus，后面我们也会演示如何使用nexus 来搭建一个私服仓库，远程私服仓库并不是必须的，如果没有配置的话 maven会直接去中央仓库下载依赖。

中央仓库 就是maven官方维护的一个仓库，所有开源的jar包都可以在中央仓库里面找到，

maven在下载依赖的时候会首先去本地仓库中查找，如果本地仓库没有的话，再去远程仓库和中央仓库查找和下载，下载完成之后就会放到本地仓库里面，下次再使用的时候，就可以直接从本地仓库中获取，而不需要再次去远程仓库或者中央仓库下载了，这样就可以避免重复下载提高了构建的效率。

maven安装#

下载地址：Download Apache Maven – Maven

tar.gz文件

如果使用的是windows系统的话步骤也是基本相同的，同样也是下载解压到本地之后，找到系统的环境变量配置界面，点击一下开始菜单之后搜索环境变量然后点击找到的这个编辑系统环境变量在下面有一个环境变量按钮打开之后就可以在这里添加环境变量了先来添加一个 MAVEN_HOME的环境变量，它的值就是maven解压之后的目录，

再把maven_home下面的bin目录添加到path环境变量里面，

这样环境变量就生效了

打开一个命令提示符或者power shell 输入

1
mvn -v

如果能够看到maven的版本信息那么就说明maven安装配置成功了。

maven的配置#

本地仓库#

安装完成之后，还有几个需要配置的地方，在maven的安装目录下面有一个CONFIG，目录里面有一个settings.XML文件，这个文件就是maven的配置文件。

我们来打开这个文件看一下这个文件里面有很多的配置项，先来找到 local repository，也就是本地仓库这个标签，

这个标签就是用来配置本地仓库的位置的，本地仓库默认的位置是在用户家目录下的.m2这个目录里面，直接把它改成自己想要的目录位置就可以了，

这里有个需要注意的地方，就是直接修改这里的路径是不会生效的，因为这里是被注释掉的 XML文件里面的注释和HTML是一样的。

如果想要修改的话，就需要把这一行复制到注释的外面，然后再来修改才会生效。

那我们就把这一行复制到下面，把里面的路径修改成自己家目录下的repo这个目录下，这样就可以把本地仓库，修改成自己想要的位置了。

我的

中央仓库#

另外还有一个需要配置的地方，就是镜像的配置，由于中央仓库是在国外的，有的时候国内的网络环境访问起来速度会比较慢，这个时候就可以配置一个国内的镜像，来加速下载。

往下翻，找到MIRORS这个标签，然后在里面添加一个镜像就可以了，每个镜像用一个mirror标签来表示。

比如我们要配置一个阿里云的镜像的话，就可以在MIRORS标签里面的最后添加一个mirror镜像，

1
  <mirror>
2
    <id>aliyunmaven</id>
3
    <mirrorOf>*</mirrorOf>
4
    <name>阿里云公共仓库</name>
5
    <url>https://maven.aliyun.com/repository/public</url>
6
  </mirror>

id是aliyunmaven ，这个是镜像的唯一标识。 mirrorOf用来指定哪些仓库应该使用这个镜像，这里配置成* 就表示所有的仓库都使用这个镜像， name表示这个镜像的名字， URL是这个镜像的地址，也就是从哪里来下载依赖这样就配置好了一个阿里云的镜像，

以后 maven在下载依赖的时候，就会优先从这个镜像中下载，速度会快一些。

配置jdk(profiles)#

最后还有个需要配置的地方就是 JDK的版本， maven默认使用的JDK版本是1.7，一般我们使用的JDK版本都是1.8以上的，

如果想要让maven默认使用我们安装的JDK版本的话，就需要在profiles里面来配置一下。

我们往下翻 找到profiles的这个标签，

然后在里面添加一个profile，把下面这段内容直接复制过来就可以了这里使用的是JDK22版本，如果想要使用其他的JDK版本的话，只需要把这里的版本号改成你想要使用的版本就可以了，这样最基本的配置就完成了。

1
<profile>
2
        <id>jdk8</id>
3
        <properties>
4
            <maven.compiler.source>1.8</maven.compiler.source>
5
            <maven.compiler.target>1.8</maven.compiler.target>
6
        </properties>
7
    </profile>
8

9
    <profile>
10
        <id>jdk11</id>
11
        <properties>
12
            <maven.compiler.source>11</maven.compiler.source>
13
            <maven.compiler.target>11</maven.compiler.target>
14
        </properties>
15
    </profile>

展开收起

在命令行中激活指定的 profile：

1
# 使用 JDK 8 的配置进行构建
2
mvn clean install -P jdk8
3

4
# 使用 JDK 11 的配置进行构建
5
mvn clean install -P jdk11

mvn命令的使用#

安装配置完成之后，我们先来通过一个官网的简单示例，来快速了解一下如何使用，以便于对maven有一个整体的认识

我们先来打开maven的官网，在左边导航菜单的用户中心（Use），这里找到一个快速开始指引（Getting Started Guide）,然后点击一下打开这个页面。

这个就是maven官网提供的一个快速开始的说明文档，

首先我们需要创建一个maven项目，可以使用maven提供的一个快速开始模板来创建，这个模板会自动生成一个标准的maven项目结构，找到下面这一行命令，把它复制下来

1
mvn -B archetype:generate -DgroupId=com.mycompany.app -DartifactId=my-app -DarchetypeArtifactId=maven-archetype-quickstart-DarchetypeVersion=1.4

然后打开vs code，新建一个文档，把上面这行命令粘贴进去。

这里我们稍微来解释一下这个命令，这里的group id就是 项目的组织id，一般是一个公司或者组织的唯一标识。可以根据自己的实际情况来填写，

比较常用的方式是把域名反过来写比如这里我们就可以把它修改成net.geekhour，

DartifactId 是项目的唯一标识，一般是项目工程的名字，由于是一个maven的示例项目，所以我们把它改成maven sample

在后面是一个模板的id （DarchetypeArtifactId），也就是maven为我们提供的各种不同类型的项目结构，这里我们直接保持默认就可以。

1
mvn -B archetype:generate -DgroupId=net.geekhour -DartifactId=maven-sample
2
-DarchetypeArtifactId=maven-archetype-quickstart -DarchetypeVersion=1.4

然后我们打开一个命令行终端，把这一行命令复制下来粘贴进去，然后回车执行一下，这里如果是第一次执行的话会需要一点时间因为会需要下载一些文件，我们稍微等一下好的执行完成了可以看到这里输出了一个build success，也就是构建成功的提示。

然后我们可以看到在当前目录下就多了一个maven sample这个目录。

这个就是maven帮我们生成的一个项目，来进入到这个目录下面，然后使用vs code单独来打开这个目录这样左边的目录结构看起来更加清晰一些，先来看一下这个项目的结构，这就是一个标准的maven项目结构，里面有一个SRC目录，下面分别是用来 存放项目源码的main目录 和 存放单元测试源码的test目录，

在他们里面也分别生成了两个源文件，

一个app.java文件，内容非常简单，就是打印一行hello world。

还有一个用来执行单元测试的appTest.java文件里面也自动生成了一些简单的测试用例代码。

然后下面还有一个pom.XML文件，这个文件就是maven工程的核心配置文件，

我们来看一下这个文件的内容，最上面的是XML的声明和一个project的标签以及模型的版本，这些内容基本上都是固定的不用太关注。

再往下是这个项目的一些基本信息，可以看到这里就是根据我们刚刚输入的命令行里面的参数来生成的，比如这里的group id，artifactid和version等等，

这就是maven项目的一个基本结构。

然后我们可以在终端输入maven compile来编译项目，

1
maven compile

也需要一点时间，

编译完成了，然后在vs code左边的目录树里面就可以看到多了一个 target目录， 这个目录就是刚刚执行编译指令之后生成的，一般用来 存放编译生成的字节码文件，以及打包后生成的jar包

点开这个目录来看一下，可以看到里面的一个classes目录，再点进去就可以看到我们编译生成的app.class文件也就是app.java编译之后生成的字节码文件，

但是现在还没有生成jar包，如果想要生成jar包的话，需要执行一个 ==打包的命令==，

方法就是在命令行终端再输入一个mvn package，

1
mvn package

就可以了

好的打包完成了，然后再来看一下target目录，可以看到里面就多了一个maven sample的jar包，这个就是刚刚打包生成的架包也是这个项目 最终的可执行文件。

如果想要运行这个jar包的话, 可以在终端输入java杠CP 后面加上加班的位置和入口类的名称回车之后可以看到控制台输出了hello world 就表示项目已经成功运行了这样我们就使用命令行来完成了一个maven项目从生成到编译再到打包和运行的整个构建过程

下面来看一下如何在idea中使用maven idea是一个非常强大的java集成开发环境它对于maven的支持也是非常友好的还没有安装的同学这里可以暂停去下载安装一下打开idea之后先来新建一个maven项目项目名称这里可以随便填一个比如这里就叫做mon demo archetype 这里选择一个maven的模板也就是maven帮我们定义好的一些不同类型的项目结构我们还是选择quick start 也就是快速开始的这个模板然后往下拉一下可以看到有一个高级设置的选项点开这个选项之后可以设置项目的group id artifact id和版本号其实这里和我们之前在命令行中输入参数的方式是一样的设置好之后点击一下右下角的创建按钮这样就创建好了一个maven项目我们先来看一下这个项目的结构可以看到和刚刚在命令行中创建的工程是完全相同的这里我们还需要再来修改一下idea的铭文配置打开idea的设置界面在左侧的菜单栏中找到构建执行部署这个选项点开之后找到构建工具再点开就可以看到maven了这里就是idea的maven配置界面我们需要设置一下maven的安装目录找到下面的maven home pass这个选项 idea默认会自带一个maven 比如这里使用的就是自带的3.9.6 这个版本一般我们都会把这里设置成使用自己安装的maven 点击下拉列表右边的这个扩展按钮然后选择maven的安装目录点击确定就可以了看到这里的版本号变成了3.9.8 就表示设置成功了还有一个需要设置的地方就是用户设置文件的位置也就是下面这一行的user settings file 这里默认的话这里是置灰的不可以直接修改需要勾选一下右侧的override 也就是覆盖这个选项这样左边的输入框就可以编辑了点一下右边这个打开文件的按钮然后选择之前安装好的maven的配置文件也就是settings点XML这个文件这里需要注意的是下面这个本地仓库的路径是直接从maven的配置文件中读取的现在是在默认的点M2这个目录下我们点击打开之后就可以看到这个本地仓库的位置也被自动的修改成了之前在settings文件中设置的位置当然这里也可以勾选右侧的覆盖栏手动修改但是一般我们都直接从配置文件中读取这样就设置好了idea的maven配置

回到项目中可以看到idea右侧有一个maven的图标点击一下就会打开maven的工具栏最上面的一排是一些常用的功能按钮包括重载所有项目下载源码或者文档分析项目依赖等等然后下面是一个profiles的列表这个其实就是我们在maven配置文件里面配置的一些profile 可以在这里选择使用哪一个profile 因为现在我们只配置了一个profile 所以这里也只会显示一个如果配置了多个的话这里也都会显示出来最下面就是main demo这个项目的一些信息了点开之后可以看到里面有四个目录分别是生命周期插件依赖和仓库这里的生命周期指的就是maven的构建生命周期它定义了一系列的阶段包括项目的清理编译测试打包部署等等几乎所有的构建过程生命周期的概念是抽象的实际上是由各种不同的插件来实现的点开下面插件这个目录可以看到里面列出了所有的插件插件本质上就是一些java类它们实现了maven的一些接口然后在不同的生命周期阶段被妹妹调用这些插件就是用来实现各种不同的生命周期的可以看到基本上和上面的生命周期是一一对应的比如这里的clean插件就是用来实现上面的clean生命周期的上面的生命周期中的每一个阶段也都是使用下面的一个或者多个插件来实现的梅文提供了三种主要的生命周期分别是clean default和set clean是用来清理项目的也就是把编译生成的字节码文件和打包生成的架包都删除掉这个和之前我们在命令行中执行过的maven clean命令其实是完全相同的在idea中可以通过双击来执行对应的生命周期比如这里我们双击一下clean按钮现在因为我们的项目还没有执行过编译和打包所以这里还看不出效果那我们先来编译一下可以看到现在就生成了一个target目录也就是我们编译生成的字节码文件那现在再来双击一下clean按钮的话就可以看到target目录被删除了这就是clean生命周期的作用除了clean之外第二个最主要的生命周期就是default 也就是默认的生命周期它包括了验证编译测试打包检查安装部署等等阶段这也就是我们从头开始构建一个项目的主要步骤其实也就是这里除了clean和set之外的所有步骤那我们就来逐个说明一下首先是validate 它的作用是用来验证项目是否正确并且所有必要的信息是可用的我们先来执行一下提示我们成功了那我们稍微来修改一下pm点XML文件把里面的group PID这一行注释掉再来执行一下validate 可以看到这里就会提示我们缺少group id 因为group id是一个必须的配置项如果没有配置的话就会报错 validate的主要作用也就是用来验证这些配置项是否正确那我们把这个注释去掉再来执行一下可以看到这次就没有问题了然后是compile compile的作用是用来编译项目的源代码也就是把java的源码文件编译成字节码文件这个和我们之前在命令行中输入的maven compile命令也是一样的那我们来执行一下可以看到执行之后也是生成了一个target目录点开就可以看到里面生成的字节码文件再往下是test 也就是单元测试他会把项目中的单元测试用例都执行一遍也就是我们工程中的test目录下面的所有测试用例我们来双击一下测试前需要先执行编译然后在下面执行了单元测试结果是执行了一个测试用例没有失败和错误表示单元测试通过了我们打开单元测试的原文件找到最下面这个测试用例函数然后把里面的断言改成false 再来执行一下测试可以看到这次就会提示测试失败这就是test的作用然后再往下是package package的作用是用来打包项目也就是把编译生成的字节码文件和其他的资源文件一起打包生成一个架包或者外包这个也是和我们在命令行中直接执行maven package 是一样的来双击执行一下这里有个需要注意的地方就是执行package的时候它不仅仅只是执行一个打包的动作而是会先执行一下编译和测试我们往上翻一下可以看到在执行package之前先执行了一下编译然后又执行了一下测试没有问题之后才会执行打包这就是梅文生命周期的一个特点它是有顺序的每个阶段都是依赖于上一个阶段的如果上一个阶段执行失败了那么下一个阶段就不会再执行了这样就可以保证整个构建过程的正确性打包之后可以看到在target目录下就生成了一个架包这个价包的命名也是有规则的前面是项目的artifact id 后面是项目的版本号然后是verify verify的作用是用来验证打包的结果也就是检查打包生成的价包是否正确是否符合质量标准以及各种规则比如执行集成测试验证代码质量等等一般是在打包之后执行的这个并不是很常用大家了解一下就可以了然后是install 也就是安装 install的作用是把项目打包之后生成的架包或者外包安装到本地仓库中也就是把这个加包复制到我们在settings点R XML文件中配置的本地仓库所在的文件夹下来执行一下可以看到执行完成之后它提示我们已经将这个架包复制到了这个位置那我们来复制一下这个路径然后打开一个终端来到这个目录下面然后输入一个ls命令可以看到里面就是我们刚刚打包生成的架包那有的同学可能对于LINUX命令不太熟悉那我们在访达里面再来打开看一下那这里有个小技巧就是在终端中输入一个open点号命令就可以在访达中打开这个目录然后把上面文件的显示方式改成芬兰的方式这样看起来会清晰一些可以看到最右边就是我们刚刚打包生成的架包它在本地仓库里面的位置也是有规则的上一级目录是版本号再往上一级是artifact id 也就是我们项目的名称然后再往上就是group id group id会以点号分隔成多级目录比如这里的net点GIO2就会被分隔成两级目录然后再往上一级就是我们配置的本地仓库的位置了这样我们本地仓库里面就有了这个加包其他模块就可以使用这个加包了这就是install的作用默认生命周期的最后一个阶段就是deploy deploy的作用是把项目打包之后生成的加包上传到远程仓库里面一般是发布到公司内部的私服仓库这里由于我们还没有配置私服仓库所以暂时先不给大家演示了等到后面我们讲解私服仓库的时候再来给大家演示如何配置和使用以上就是default生命周期的所有阶段之前我们说有三个主要的生命周期除了clean和default之外还有一个生命周期就是set set是用来生成项目的站点文档的也就是把项目的一些信息和文档生成一个静态的网站比如我们来执行一下执行完成之后可以看到target目录下面就多了一个set目录这个就是maven为我们生成的站点文档我们点开index点HTML 这个文件可以选择右上角的浏览器图标这样就可以使用浏览器来查看这个站点了这里可以查看到这个项目的一些基本信息包括他使用了哪些依赖它的插件等等最后还有一个需要提示的地方就是MVN命令后面可以跟上不同的生命周期阶段比如m VN clean compile 就会按顺序执行clean和compile这两个阶段那我们打开一个终端来执行一下输入mv n clean compile之后回车可以看到先执行了clean 然后后面紧接着又执行了compile 在实际项目中比较常用的是mn clean package和mn clean install 也就是清理之后再执行打包或者安装这样就可以一键完成整个构建的过程在很多CCD的自动化构建脚本中也经常会使用这样的方式

Firefly 代码块示例

Sat, 03 Jan 1970 00:00:00 GMT

在这里，我们将探索如何使用 Expressive Code 展示代码块。提供的示例基于官方文档，您可以参考以获取更多详细信息。

表达性代码#

语法高亮#

语法高亮

常规语法高亮#

1
console.log('此代码有语法高亮!')

渲染 ANSI 转义序列#

Terminal window展开收起

1
Standard ANSI colors:
2
- Dimmed:      Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
3
- Foreground:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
4
- Background:  Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
5
- Reversed:    Black  Red  Green  Yellow  Blue  Magenta  Cyan  White 
6

7
8-bit colors (showing colors 160-171 as an example):
8
- Dimmed:      160  161  162  163  164  165  166  167  168  169  170  171 
9
- Foreground:  160  161  162  163  164  165  166  167  168  169  170  171 
10
- Background:  160  161  162  163  164  165  166  167  168  169  170  171 
11
- Reversed:    160  161  162  163  164  165  166  167  168  169  170  171 
12

13
24-bit colors (full RGB):
14
- Dimmed:      ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
15
- Foreground:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
16
- Background:  ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
17
- Reversed:    ForestGreen - RGB(34,139,34)  RebeccaPurple - RGB(102,51,153) 
18

19
Font styles:
20
- Default
21
- Bold
22
- Dimmed
23
- Italic
24
- Underline
25
- Reversed
26
- Strikethrough

展开收起

编辑器和终端框架#

编辑器和终端框架

代码编辑器框架#

my-test-file.js

1
console.log('标题属性示例')

src/content/index.html

1
<div>文件名注释示例</div>

终端框架#

Terminal window

1
echo "此终端框架没有标题"

PowerShell 终端示例

1
Write-Output "这个有标题!"

覆盖框架类型#

1
echo "看，没有框架!"

PowerShell Profile.ps1

1
# 如果不覆盖，这将是一个终端框架
2
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
3
New-Alias tail Watch-Tail

文本和行标记#

文本和行标记

标记整行和行范围#

1
// 第1行 - 通过行号定位
2
// 第2行
3
// 第3行
4
// 第4行 - 通过行号定位
5
// 第5行
6
// 第6行
7
// 第7行 - 通过范围 "7-8" 定位
8
// 第8行 - 通过范围 "7-8" 定位

选择行标记类型 (mark, ins, del)#

line-markers.js

1
function demo() {
2
  console.log('此行标记为已删除')
3
  // 此行和下一行标记为已插入
4
  console.log('这是第二个插入行')
5

6
  return '此行使用中性默认标记类型'
7
}

为行标记添加标签#

labeled-line-markers.jsx

1
<button
2
  role="button"
3
  {...props}
4
  value={value}
5
  className={buttonClassName}
6
  disabled={disabled}
7
  active={active}
8
>
9
  {children &&
10
    !active &&
11
    (typeof children === 'string' ? <span>{children}</span> : children)}
12
</button>

在单独行上添加长标签#

labeled-line-markers.jsx展开收起

1
<button
2
  role="button"
3
  {...props}
4

5
  value={value}
6
  className={buttonClassName}
7

8
  disabled={disabled}
9
  active={active}
10
>
11

12
  {children &&
13
    !active &&
14
    (typeof children === 'string' ? <span>{children}</span> : children)}
15
</button>

展开收起

使用类似 diff 的语法#

1
此行将标记为已插入
2
此行将标记为已删除
3
这是常规行

1
--- a/README.md
2
+++ b/README.md
3
@@ -1,3 +1,4 @@
4
+this is an actual diff file
5
-all contents will remain unmodified
6
 no whitespace will be removed either

结合语法高亮和类似 diff 的语法#

1
function thisIsJavaScript() {
2
  // 整个块都会以 JavaScript 高亮显示，
3
  // 并且我们仍然可以为其添加 diff 标记！
4
  console.log('要删除的旧代码')
5
  console.log('新的闪亮代码！')
6
}

标记行内的单独文本#

1
function demo() {
2
  // 标记行内的任何给定文本
3
  return '支持给定文本的多个匹配项';
4
}

正则表达式#

1
console.log('单词 yes 和 yep 将被标记。')

转义正斜杠#

Terminal window

1
echo "Test" > /home/test.txt

选择内联标记类型 (mark, ins, del)#

1
function demo() {
2
  console.log('这些是插入和删除的标记类型');
3
  // return 语句使用默认标记类型
4
  return true;
5
}

自动换行#

自动换行

为每个块配置自动换行#

1
// 启用换行的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

1
// wrap=false 的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

配置换行的缩进#

1
// preserveIndent 示例（默认启用）
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

1
// preserveIndent=false 的示例
2
function getLongString() {
3
  return '这是一个非常长的字符串，除非容器极宽，否则很可能无法适应可用空间'
4
}

可折叠部分#

可折叠部分


5 collapsed lines
1
// 所有这些样板设置代码将被折叠
2
import { someBoilerplateEngine } from '@example/some-boilerplate'
3
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'
4

5
const engine = someBoilerplateEngine(evenMoreBoilerplate())
6

7
// 这部分代码默认可见
8
engine.doSomething(1, 2, 3, calcFn)
9

10
function calcFn() {
11
  // 您可以有多个折叠部分
3 collapsed lines
12
  const a = 1
13
  const b = 2
14
  const c = a + b
15

16
  // 这将保持可见
17
  console.log(`计算结果: ${a} + ${b} = ${c}`)
18
  return c
19
}
20

4 collapsed lines
21
// 直到块末尾的所有代码将再次被折叠
22
engine.closeConnection()
23
engine.freeMemory()
24
engine.shutdown({ reason: '示例样板代码结束' })

展开收起

行号#

行号

为每个块显示行号#

1
// 此代码块将显示行号
2
console.log('来自第2行的问候!')
3
console.log('我在第3行')

// 此块禁用行号
console.log('你好?')
console.log('抱歉，你知道我在第几行吗?')

更改起始行号#

5
console.log('来自第5行的问候!')
6
console.log('我在第6行')

Firefly 布局系统详解

Sat, 03 Jan 1970 00:00:00 GMT

📖 概述#

Firefly 提供了灵活的布局系统，允许您根据内容需求和个人喜好自定义博客的视觉呈现方式。布局系统主要包括侧边栏布局和文章列表布局两个维度，它们相互配合，共同决定了页面的整体结构。

本文将详细介绍 Firefly 的各种布局模式、它们的特点、使用场景，以及不同布局组合的效果。

左侧边栏+列表布局

右侧边栏+网格布局

左侧边栏+三列网格布局

双侧边栏+列表布局

双侧边栏+网格布局

双侧边栏+网格瀑布流布局

一、侧边栏布局系统#

侧边栏是博客页面的重要组成部分，用于展示导航、分类、标签、统计信息等辅助内容。Firefly 支持两种侧边栏布局模式。

1.1 单侧边栏模式#

左侧边栏 (position: “left”)#

左侧边栏布局

右侧边栏 (position: “right”)#

右侧边栏布局

特点#

侧边栏固定在页面其中一侧
文章阅读区域体验更佳，更宽敞
更加简约，没有那么紧凑

适用场景#

传统博客风格
强调导航和分类的博客
需要突出用户资料的个人博客
内容为主，辅助信息次之的场景

Tip

可以通过showBothSidebarsOnPostPage配置是否在文章详情页显示双侧边栏

当position为left或right时开启此项后，文章详情页将显示双侧边栏，主页等其他页面保持单侧边栏

适用在只想用单侧栏，但在文章详情页想用对侧栏的目录等组件的场景

配置示例#

src/config/sidebarConfig.ts

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "left", // 左侧边栏
4
  showBothSidebarsOnPostPage: true, // 是否在文章详情页显示双侧边栏
5
};

1.2 双侧边栏模式 (position: “both”)#

特点#

左右两侧同时存在侧边栏
主内容区域位于中间
最大化利用屏幕空间
可以展示更多辅助信息
适合宽屏显示器

布局结构#

双侧边栏+列表布局

双侧边栏+网格布局

适用场景#

宽屏桌面端浏览
信息密集型博客
需要展示大量辅助内容
专业性强的技术博客

配置示例#

src/config/sidebarConfig.ts

1
export const sidebarLayoutConfig: SidebarLayoutConfig = {
2
  enable: true,
3
  position: "both", // 双侧边栏

二、文章列表布局系统#

文章列表是博客首页和归档页的核心内容，Firefly 提供两种展示方式，并支持多种网格配置。

2.1 列表模式 (defaultMode: “list”)#

特点#

单列纵向排列
显示文章封面图
展示更多文章摘要
适合深度阅读

列表布局结构#

列表模式布局

优点#

✅ 视觉冲击力强，封面图吸引眼球
✅ 可以展示更多文章信息（摘要、标签等）
✅ 适合图片内容丰富的博客
✅ 移动端友好，单列更易阅读
✅ 兼容所有侧边栏配置（单侧、双侧）

配置示例#

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  postListLayout: {
3
    defaultMode: "list", // 列表模式
4
    allowSwitch: true,   // 允许用户切换
5
  },
6
};

2.2 网格模式 (defaultMode: “grid”)#

特点#

自适应列数，根据浏览器宽度自动调整
紧凑布局，信息密度高
适合快速浏览

自适应网格#

网格模式通过 columnWidth 配置卡片的最小宽度（单位 px），浏览器会根据容器可用宽度自动计算能容纳多少列。

网格布局

配置示例#

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  postListLayout: {
3
    defaultMode: "grid",
4
    allowSwitch: true,
5
    grid: {
6
      masonry: true,      // 开启瀑布流
7
      columnWidth: 320,   // 卡片最小宽度(px)，浏览器自动计算列数
8
    },
9
  },
10
};

2.3 瀑布流布局 (Masonry)#

Firefly 的网格模式内置了智能瀑布流布局支持，解决了网格布局中因图文混合文章导致的卡片高度不一致导致的空白问题。

瀑布流布局

智能排版：自动将卡片放置到最短的列，最大化利用垂直空间。
消除空白：通过绝对定位精确计算每个卡片的位置，让卡片紧贴上方卡片，消除垂直方向的空白间隙。
自适应列数：瀑布流同样根据 columnWidth 和容器宽度动态计算列数，无需固定配置。
配置灵活：您可以在 siteConfig.ts 中通过 postListLayout.grid.masonry 选项自由开启或关闭此功能。

三、布局组合指南#

Firefly 允许您自由组合侧边栏和文章列表布局。以下是各种组合的效果说明。

侧边栏模式	文章列表模式	推荐度	适用场景
单侧边栏	列表模式	⭐⭐⭐⭐⭐	摄影、设计、生活类博客，强调图片和沉浸感
单侧边栏	网格模式	⭐⭐⭐⭐⭐	技术、笔记类博客，平衡阅读与检索效率
双侧边栏	列表模式	⭐⭐⭐⭐⭐	需要展示大量侧边栏信息的站点
双侧边栏	网格模式	⭐⭐⭐⭐⭐	极客风格，追求最高信息密度

四、响应式布局行为#

Firefly 的布局系统具有智能的响应式设计，会根据屏幕尺寸自动调整。

为了保证最佳阅读体验，系统会在屏幕变窄时自动调整布局：

网格列数自动减少：网格模式的列数由 columnWidth 和容器宽度自动决定，屏幕越窄列数越少。
列表模式 -> 网格模式：当屏幕宽度小于 380px（超小屏设备）时，列表模式会自动切换为网格模式，以保证卡片内容的可读性。
双侧边栏 -> 单侧边栏：当屏幕宽度小于 1280px 时，会根据tabletSidebar配置显示单侧边栏，隐藏其中一个侧边栏，文章目录导航会切换成浮动目录导航。

五、常见问题#

Q1: 如何调整网格列数？#

A: 通过 columnWidth 配置卡片最小宽度即可。值越小，同等宽度下列数越多；值越大，列数越少。浏览器会自动根据可用宽度计算最佳列数。

六、总结#

Firefly 的布局系统给予了您更大的自由度，您都可以通过简单的配置实现。

我们建议您根据自己的内容类型和目标读者的设备偏好，尝试不同的组合，找到最适合您的博客形态。

Firefly 文章加密

Fri, 02 Jan 1970 00:00:00 GMT

这是一篇密码保护的示例文章，用于演示文章加密功能。

KaTeX 数学公式示例

Fri, 02 Jan 1970 00:00:00 GMT

本文展示了 Firefly 主题对 KaTeX 数学公式的渲染支持。

行内公式 (Inline)#

行内公式使用单个 $ 符号包裹。

例如：欧拉公式 eiπ+1=0e^{i\pi} + 1 = 0eiπ+1=0 是数学中最优美的公式之一。

质能方程 E=mc2E = mc^2E=mc2 也是家喻户晓。

块级公式 (Block)#

块级公式使用两个 $$ 符号包裹，会居中显示。

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}∫−∞∞e−x2dx=πx=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}x=2a−b±b2−4ac

复杂示例#

矩阵 (Matrices)#

(abcd)(αβγδ)=(aα+bγaβ+bδcα+dγcβ+dδ)\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} \alpha & \beta \\ \gamma & \delta \end{pmatrix} = \begin{pmatrix} a\alpha + b\gamma & a\beta + b\delta \\ c\alpha + d\gamma & c\beta + d\delta \end{pmatrix}(acbd)(αγβδ)=(aα+bγcα+dγaβ+bδcβ+dδ)

极限与求和 (Limits and Sums)#

∑n=1∞1n2=π26\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}n=1∑∞n21=6π2lim⁡x→0sin⁡xx=1\lim_{x \to 0} \frac{\sin x}{x} = 1x→0limxsinx=1

麦克斯韦方程组 (Maxwell’s Equations)#

∇⋅E=ρε0∇⋅B=0∇×E=−∂B∂t∇×B=μ0J+μ0ε0∂E∂t\begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\varepsilon_0\frac{\partial \mathbf{E}}{\partial t} \end{aligned}∇⋅E∇⋅B∇×E∇×B=ε0ρ=0=−∂t∂B=μ0J+μ0ε0∂t∂E

化学方程式 (Chemical Equations)#

CHX4+2 OX2→COX2+2 HX2O\ce{CH4 + 2O2 -> CO2 + 2H2O}CHX4+2OX2COX2+2HX2O

符号	代码	渲染结果
Alpha	`\alpha`	α\alphaα
Beta	`\beta`	β\betaβ
Gamma	`\Gamma`	Γ\GammaΓ
Pi	`\pi`	π\piπ
Infinity	`\infty`	∞\infty∞
Right Arrow	`\rightarrow`	→\rightarrow→
Partial	`\partial`	∂\partial∂

MDX 格式文章示例

Fri, 02 Jan 1970 00:00:00 GMT

Tip

Firefly 支持 MDX 和 Markdown 两种类型的文章，你可以在文章中混合使用两种格式，如果没有特别复杂内容和需求，推荐使用 Markdown 格式就够了。

Markdown 和 MDX 的区别#

Markdown (MD) 是一种轻量级标记语言，允许用户使用纯文本格式编写文档，然后将其转换为格式化的HTML。它因其简洁易用的语法而广受欢迎，特别适合编写文档和博客文章。
MDX 是一种扩展了 Markdown 语法的格式，允许在 Markdown 文档中无缝地插入 JSX 代码。通过 MDX，用户可以在文档中嵌入 React 组件，从而实现更丰富的交互性和动态性。

特性	Markdown	MDX
基础语法	支持 (CommonMark)	支持 (CommonMark)
HTML 标签	支持	支持 (作为 JSX)
组件导入	不支持	支持 (import)
动态数据	不支持	支持 (JS 表达式)
样式定制	有限 (class/style)	灵活 (className/CSS-in-JS)

使用组件#

这是一个图标组件：

1
import { Icon } from 'astro-icon/components'
2

3
<div class="flex items-center gap-2 my-4">
4
  <Icon name="fa7-solid:rocket" class="text-4xl text-red-500" />
5
  <span>火箭发射！</span>
6
</div>

火箭发射！

使用 JSX#

你也可以直接写 HTML/JSX：

1
<div className="p-4 bg-blue-100 dark:bg-blue-900 rounded-lg my-4">
2
  这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。
3
</div>

这是一个自定义样式的 div 块，使用了 Tailwind CSS 类。

简单的变量导出#

1
export const year = new Date().getFullYear()
2

3
今年是 {year} 年。

今年是 2026 年。

更多信息，请查看 MDX 文档

Markdown 扩展功能

Thu, 01 Jan 1970 00:00:00 GMT

GitHub 仓库卡片#

您可以添加链接到 GitHub 仓库的动态卡片，在页面加载时，仓库信息会从 GitHub API 获取。

CuteLeaf

Firefly

Waiting for api.github.com...

00K

Waiting...

使用代码 ::github{repo="CuteLeaf/Firefly"} 创建 GitHub 仓库卡片。

1
::github{repo="CuteLeaf/Firefly"}

提醒框(Admonitions)配置#

Firefly 采用了 rehype-callouts 插件，支持了三种风格的提醒框主题：GitHub、Obsidian 和 VitePress。您可以在 src/config/siteConfig.ts 中进行配置：

src/config/siteConfig.ts

1
export const siteConfig: SiteConfig = {
2
  // ...
3
  rehypeCallouts: {
4
    // 选项: "github" | "obsidian" | "vitepress"
5
    theme: "github",
6
  },
7
  // ...
8
};

注意：更改配置后需要重启开发服务器才能生效。

以下是各个主题支持的类型列表，每个主题风格和语法不同，可根据喜好选择。

1. GitHub 主题风格#

这是 GitHub 官方支持的 5 种基本类型。

GitHub

基本语法

1
> [!NOTE] NOTE
2
> 突出显示用户应该考虑的信息。
3

4
> [!TIP] TIP
5
> 可选信息，帮助用户更成功。
6

7
> [!IMPORTANT] IMPORTANT
8
> 用户成功所必需的关键信息。
9

10
> [!WARNING] WARNING
11
> 关键内容，需要立即注意。
12

13
> [!CAUTION] CAUTION
14
> 行动的负面潜在后果。
15

16
> [!NOTE] 自定义标题
17
> 这是一个带有自定义标题的示例。

展开收起

2. Obsidian 主题风格#

Obsidian 风格支持非常丰富的类型和别名。

点击展开 Obsidian 语法列表

1
> [!NOTE] NOTE
2
> 通用的笔记块。
3

4
> [!ABSTRACT] ABSTRACT
5
> 文章的摘要。
6

7
> [!SUMMARY] SUMMARY
8
> 文章的总结（同 Abstract）。
9

10
> [!TLDR] TLDR
11
> 太长不看（同 Abstract）。
12

13
> [!INFO] INFO
14
> 提供额外信息。
15

16
> [!TODO] TODO
17
> 需要完成的事项。
18

19
> [!TIP] TIP
20
> 实用技巧或提示。
21

22
> [!HINT] HINT
23
> 暗示（同 Tip）。
24

25
> [!IMPORTANT] IMPORTANT
26
> 重要信息（Obsidian 风格通常使用类似的图标）。
27

28
> [!SUCCESS] SUCCESS
29
> 操作成功。
30

31
> [!CHECK] CHECK
32
> 检查通过（同 Success）。
33

34
> [!DONE] DONE
35
> 已完成（同 Success）。
36

37
> [!QUESTION] QUESTION
38
> 提出问题。
39

40
> [!HELP] HELP
41
> 寻求帮助（同 Question）。
42

43
> [!FAQ] FAQ
44
> 常见问题（同 Question）。
45

46
> [!WARNING] WARNING
47
> 警告信息。
48

49
> [!CAUTION] CAUTION
50
> 注意事项（同 Warning）。
51

52
> [!ATTENTION] ATTENTION
53
> 引起注意（同 Warning）。
54

55
> [!FAILURE] FAILURE
56
> 操作失败。
57

58
> [!FAIL] FAIL
59
> 失败（同 Failure）。
60

61
> [!MISSING] MISSING
62
> 缺失内容（同 Failure）。
63

64
> [!DANGER] DANGER
65
> 危险操作警告。
66

67
> [!ERROR] ERROR
68
> 错误信息（同 Danger）。
69

70
> [!BUG] BUG
71
> 报告软件缺陷。
72

73
> [!EXAMPLE] EXAMPLE
74
> 展示一个例子。
75

76
> [!QUOTE] QUOTE
77
> 引用一段话。
78

79
> [!CITE] CITE
80
> 引证（同 Quote）。
81

82
> [!NOTE] 自定义标题
83
> 这是一个带有自定义标题的示例。

展开收起

Obsidian

3. VitePress 主题风格#

VitePress 风格提供了一套现代化的、扁平的默认样式。目前仅包含与 GitHub 一致的 5 种 基础类型。

点击展开 VitePress 语法列表

1
> [!NOTE] NOTE
2
> 对应 GitHub 的 Note。
3

4
> [!TIP] TIP
5
> 对应 GitHub 的 Tip。
6

7
> [!IMPORTANT] IMPORTANT
8
> 对应 GitHub 的 Important。
9

10
> [!WARNING] WARNING
11
> 对应 GitHub 的 Warning。
12

13
> [!CAUTION] CAUTION
14
> 对应 GitHub 的 Caution。
15

16
> [!TIP] 自定义标题
17
> VitePress 风格同样支持自定义标题。

展开收起

VitePress

4. Docusaurus 风格语法#

仅支持语法，风格保持跟上面三个主题相同。

点击展开 Docusaurus 语法列表

支持以下类型的提醒框：note tip important warning caution

1
:::note
2
突出显示用户应该考虑的信息，即使在快速浏览时也是如此。
3
:::
4

5
:::tip
6
可选信息，帮助用户更成功。
7
:::
8

9
:::important
10
用户成功所必需的关键信息。
11
:::
12

13
:::warning
14
由于潜在风险需要用户立即注意的关键内容。
15
:::
16

17
:::caution
18
行动的负面潜在后果。
19
:::
20

21
:::tip[自定义标题]
22
可选信息，帮助用户更成功。
23
:::

展开收起

剧透#

您可以为文本添加剧透。文本也支持 Markdown 语法。

内容被隐藏了哈哈！

1
内容 :spoiler[被隐藏了 **哈哈**]！

图片画廊网格 (Image Grid)#

您可以使用 [grid] 和 [/grid] 标签将多张图片纵向并排展示。这对于展示照片画廊或对比图非常有用。系统会自动根据包裹在其中的图片数量（最多支持并排展示4张）以响应式网格进行布局。

自动补齐图片高度： 同一排中如果有高度、大小或者比例不一的图片，会像「九宫格画廊相册」一样自动撑满。较短或不协调的图片会自动使用 object-cover 进行完美中心裁剪补充视野。图片边框水平彻底对齐无缝隙，但被裁剪后，只有点击图片通过灯箱才能查看完整图片，所以建议尽量避免使用长宽比例不一致的图片在同一排中。

图注恒定底端对齐： 不论上面的图片长宽如何变化，在同一行的所有图像解释文字（图注）都会对标到一条完美的水平基线上了。

示例图片一

示例图片二

基本语法

1
[grid]
2
![示例图片一](./images/firefly1.avif)
3
![示例图片二](./images/firefly2.avif)
4
![示例图片二](./images/firefly3.avif)
5
[/grid]

Markdown Mermaid 图表

Thu, 01 Jan 1970 00:00:00 GMT

Markdown 中 Mermaid 图表完整指南#

本文演示如何在 Markdown 文档中使用 Mermaid 创建各种复杂图表，包括流程图、时序图、甘特图、类图和状态图。

流程图示例#

流程图非常适合表示流程或算法步骤。

graph TD A[开始] --> B{条件检查} B -->|是| C[处理步骤 1] B -->|否| D[处理步骤 2] C --> E[子过程] D --> E subgraph E [子过程详情] E1[子步骤 1] --> E2[子步骤 2] E2 --> E3[子步骤 3] end E --> F{另一个决策} F -->|选项 1| G[结果 1] F -->|选项 2| H[结果 2] F -->|选项 3| I[结果 3] G --> J[结束] H --> J I --> J

时序图示例#

时序图显示对象之间随时间的交互。

sequenceDiagram participant User as 用户 participant WebApp as 网页应用 participant Server as 服务器 participant Database as 数据库 User->>WebApp: 提交登录请求 WebApp->>Server: 发送认证请求 Server->>Database: 查询用户凭据 Database-->>Server: 返回用户数据 Server-->>WebApp: 返回认证结果 alt 认证成功 WebApp->>User: 显示欢迎页面 WebApp->>Server: 请求用户数据 Server->>Database: 获取用户偏好 Database-->>Server: 返回偏好设置 Server-->>WebApp: 返回用户数据 WebApp->>User: 加载个性化界面 else 认证失败 WebApp->>User: 显示错误消息 WebApp->>User: 提示重新输入 end

甘特图示例#

甘特图非常适合显示项目进度和时间线。

gantt title 网站开发项目时间线 dateFormat YYYY-MM-DD axisFormat %m/%d section 设计阶段需求分析 :a1, 2023-10-01, 7d UI设计 :a2, after a1, 10d 原型创建 :a3, after a2, 5d section 开发阶段前端开发 :b1, 2023-10-20, 15d 后端开发 :b2, after a2, 18d 数据库设计 :b3, after a1, 12d section 测试阶段单元测试 :c1, after b1, 8d 集成测试 :c2, after b2, 10d 用户验收测试 :c3, after c2, 7d section 部署生产环境部署 :d1, after c3, 3d 发布 :milestone, after d1, 0d

类图示例#

类图显示系统的静态结构，包括类、属性、方法及其关系。

classDiagram class User { +String username +String password +String email +Boolean active +login() +logout() +updateProfile() } class Article { +String title +String content +Date publishDate +Boolean published +publish() +edit() +delete() } class Comment { +String content +Date commentDate +addComment() +deleteComment() } class Category { +String name +String description +addArticle() +removeArticle() } User "1" -- "*" Article : 写作 User "1" -- "*" Comment : 发表 Article "1" -- "*" Comment : 拥有 Article "1" -- "*" Category : 属于

状态图示例#

状态图显示对象在其生命周期中经历的状态序列。

stateDiagram-v2 [*] --> 草稿草稿 --> 审核中 : 提交审核中 --> 草稿 : 拒绝审核中 --> 已批准 : 批准已批准 --> 已发布 : 发布已发布 --> 已归档 : 归档已发布 --> 草稿 : 撤回 state 已发布 { [*] --> 活跃活跃 --> 隐藏 : 临时隐藏隐藏 --> 活跃 : 恢复活跃 --> [*] 隐藏 --> [*] } 已归档 --> [*]

饼图示例#

饼图非常适合显示比例和百分比数据。

pie title 网站流量来源分析 "搜索引擎" : 45.6 "直接访问" : 30.1 "社交媒体" : 15.3 "推荐链接" : 6.4 "其他来源" : 2.6

总结#

Mermaid 是在 Markdown 文档中创建各种类型图表的强大工具。本文演示了如何使用流程图、时序图、甘特图、类图、状态图和饼图。这些图表可以帮助您更清晰地表达复杂的概念、流程和数据结构。

要使用 Mermaid，只需在代码块中指定 mermaid 语言，并使用简洁的文本语法描述图表。Mermaid 会自动将这些描述转换为美观的可视化图表。

尝试在您的下一篇技术博客文章或项目文档中使用 Mermaid 图表 - 它们将使您的内容更加专业且更易理解！

Markdown PlantUML 图表

Thu, 01 Jan 1970 00:00:00 GMT

Markdown 中 PlantUML 图表指南#

PlantUML 是一种使用纯文本描述图表的工具。你只需要写一段结构化语法，就可以生成时序图、类图、用例图、活动图等常见工程图。

它特别适合写在技术博客和项目文档里：

图表和正文一起版本管理，便于协作与审阅
修改图只需要改文本，适合频繁迭代
能和 Markdown 无缝结合，保持文档统一

在 Firefly 中，plantuml 代码块会在构建阶段编码并生成服务器 SVG 地址，页面端再根据亮暗主题自动切换图源，并支持缩放、拖拽和全屏交互。

如果你想快速上手，可以记住这个最小模板：

活动图示例#

状态图示例#

用例图示例#

组件图示例#

部署图示例#

ER 图示例#

时序图示例（登录与刷新令牌）#

C4 风格容器图示例#

Markdown 教程

Thu, 01 Jan 1970 00:00:00 GMT

这是一个展示如何编写 Markdown 文件的示例。本文档汇总了核心语法与常见扩展（GFM）。

块级元素
- 段落与换行
- 标题
- 引用
- 列表
- 代码块
- 分割线
- 表格
内联元素
- 链接
- 强调
- 行内代码
- 图片
- 删除线
杂项
- 自动链接
- 反斜杠转义
内联 HTML

块级元素#

段落与换行#

段落#

HTML 标签：<p>

使用一个或多个空行分隔段落。（仅包含空格或制表符的行也视为空行。）

代码：

1
This will be
2
inline.
3

4
This is second paragraph.

预览：

This will be inline.

This is second paragraph.

换行#

HTML 标签：<br />

在行末添加两个或更多空格来产生换行。

代码：

1
This will be not
2
inline.

预览：

This will be not
inline.

标题#

Markdown 支持两种标题样式：Setext 与 atx。

Setext#

HTML 标签：<h1>，<h2>

使用等号 (=) 表示 <h1>、使用短横线 (-) 表示 <h2>，数量不限，作为“下划线”。

代码：

1
This is an H1
2
=============
3
This is an H2
4
-------------

预览：

This is an H1#

This is an H2#

atx#

HTML 标签：<h1>，<h2>，<h3>，<h4>，<h5>，<h6>

在行首使用 1-6 个井号 (#)，对应 <h1> 至 <h6>。

代码：

1
# This is an H1
2
## This is an H2
3
###### This is an H6

预览：

This is an H1#

This is an H2#

This is an H6#

可选：你可以在行尾“闭合” atx 标题。末尾的井号数量不必与开头一致。

代码：

1
# This is an H1 #
2
## This is an H2 ##
3
### This is an H3 ######

预览：

This is an H1#

This is an H2#

This is an H3#

引用#

HTML 标签：<blockquote>

Markdown 使用邮件风格的 > 作为引用符号。若手动换行并在每行前加 >，显示效果最佳。

代码：

1
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
2
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4
>
5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
> id sem consectetuer libero luctus adipiscing.

预览：

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Markdown 允许“偷懒”：在一个硬换行段落中，只在第一行前加 > 即可。

代码：

1
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
2
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
3
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
4

5
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
6
id sem consectetuer libero luctus adipiscing.

预览：

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

引用可以嵌套（引用中的引用），通过增加 > 层级实现。

代码：

1
> This is the first level of quoting.
2
>
3
> > This is nested blockquote.
4
>
5
> Back to the first level.

预览：

This is the first level of quoting.
This is nested blockquote.
Back to the first level.

引用内可包含其他 Markdown 元素，包括标题、列表与代码块。

代码：

1
> ## This is a header.
2
>
3
> 1.   This is the first list item.
4
> 2.   This is the second list item.
5
>
6
> Here's some example code:
7
>
8
>     return shell_exec("echo $input | $markdown_script");

预览：

This is a header.#

This is the first list item.

This is the second list item.

Here’s some example code:
1
return shell_exec("echo $input | $markdown_script");

列表#

Markdown 支持有序（数字）与无序（圆点）列表。

无序列表#

HTML 标签：<ul>

无序列表可使用 星号 (*)、加号 (+) 或 短横线 (-)。

代码：

1
*   Red
2
*   Green
3
*   Blue

预览：

Red
Green
Blue

等价于：

代码：

1
+   Red
2
+   Green
3
+   Blue

或者：

代码：

1
-   Red
2
-   Green
3
-   Blue

有序列表#

HTML 标签：<ol>

有序列表使用数字加英文句点：

代码：

1
1.  Bird
2
2.  McHale
3
3.  Parish

预览：

Bird
McHale
Parish

注意：像下面这样可能会“意外触发”有序列表：

代码：

1
1986. What a great season.

预览：

What a great season.

你可以用反斜杠转义 (\) 句点：

代码：

1
1986\. What a great season.

预览：

1986. What a great season.

列表中的缩进内容#

列表项里的引用#

在列表项内放置引用，需要将 > 符号整体缩进：

代码：

1
*   A list item with a blockquote:
2

3
    > This is a blockquote
4
    > inside a list item.

预览：

A list item with a blockquote:

This is a blockquote inside a list item.

列表项里的代码块#

在列表项内放置代码块，需要缩进两层——8 个空格或两个 Tab：

代码：

1
*   A list item with a code block:
2

3
        <code goes here>

预览：

A list item with a code block:
```
1
<code goes here>
```

嵌套列表#

代码：

1
* A
2
  * A1
3
  * A2
4
* B
5
* C

预览：

A
- A1
- A2
B
C

代码块#

HTML 标签：<pre>

将代码块中的每行缩进至少4 个空格或1 个制表符。

代码：

1
This is a normal paragraph:
2

3
    This is a code block.

预览：

This is a normal paragraph:

1
This is a code block.

代码块会一直持续，直到遇到未缩进的行（或文末）。

在代码块内，与号 (&) 和尖括号 (< >) 会自动转为 HTML 实体。

代码：

1
    <div class="footer">
2
        &copy; 2004 Foo Corporation
3
    </div>

预览：

1
<div class="footer">
2
    &copy; 2004 Foo Corporation
3
</div>

下文的“围栏代码块”和“语法高亮”属于扩展语法，你也可以用它们来书写代码块。

围栏代码块#

使用成对的反引号围起来（如下所示），就不需要四空格缩进了。

代码：

1
Here's an example:
2

3
```
4
function test() {
5
  console.log("notice the blank line before this function?");
6
}
7
```

预览：

Here’s an example:

1
function test() {
2
  console.log("notice the blank line before this function?");
3
}

语法高亮#

在围栏代码块后添加可选的语言标识，即可启用语法高亮（参见支持语言列表）。

代码：

1
```ruby
2
require 'redcarpet'
3
markdown = Redcarpet.new("Hello World!")
4
puts markdown.to_html
5
```

预览：

1
require 'redcarpet'
2
markdown = Redcarpet.new("Hello World!")
3
puts markdown.to_html

分割线（水平线）#

HTML 标签：<hr /> 一行中放置三个或以上的短横线 (-)、星号 (*) 或下划线 (_)。符号之间允许有空格。

代码：

1
* * *
2
***
3
*****
4
- - -
5
---------------------------------------
6
___

预览：

表格#

HTML 标签：<table>

这是扩展语法。

用竖线 (|) 分隔列，用短横线 (-) 分隔表头，使用冒号 (:) 指定对齐方式。

两侧的竖线 (|) 与对齐可选。用于表头分隔时，每列至少需要 3 个短横线。

代码：

1
| Left | Center | Right |
2
|:-----|:------:|------:|
3
|aaa   |bbb     |ccc    |
4
|ddd   |eee     |fff    |
5

6
 A | B
7
---|---
8
123|456
9

10

11
A |B
12
--|--
13
12|45

预览：

Left	Center	Right
aaa	bbb	ccc
ddd	eee	fff

A	B
123	456

A	B
12	45

内联元素#

链接#

HTML 标签：<a>

Markdown 支持两种链接样式：行内链接与引用式链接。

行内链接#

行内链接格式：[文本](URL "标题")

标题可选。

代码：

1
This is [an example](http://example.com/ "Title") inline link.
2

3
[This link](http://example.net/) has no title attribute.

预览：

This is an example inline link.

This link has no title attribute.

如果引用同一站点的本地资源，可以使用相对路径：

代码：

1
See my [About](/about/) page for details.

预览：

See my About page for details.

引用式链接#

可以预定义链接引用。定义格式：[id]: URL "标题"

标题同样可选。引用时使用：[文本][id]

代码：

1
[id]: http://example.com/  "Optional Title Here"
2
This is [an example][id] reference-style link.

预览：

This is an example reference-style link.

说明：

方括号中包含链接标识（不区分大小写，可在左侧缩进最多三格空格）；
随后是冒号；
再跟一个或多个空格（或 tab）；
然后是链接 URL；
URL 可选地用尖括号包裹；
可选地跟随标题属性，用引号或圆括号包裹。

以下三种定义等价：

代码：

1
[foo]: http://example.com/  "Optional Title Here"
2
[foo]: http://example.com/  'Optional Title Here'
3
[foo]: http://example.com/  (Optional Title Here)
4
[foo]: <http://example.com/>  "Optional Title Here"

如果使用空的方括号，则链接文本本身会作为名称。

代码：

1
[Google]: http://google.com/
2
[Google][]

预览：

Google

强调#

HTML 标签：<em>，<strong>

Markdown 使用 星号 (*) 或 下划线 (_) 表示强调。一个分隔符对应 <em>；两个分隔符对应 <strong>。

代码：

1
*single asterisks*
2

3
_single underscores_
4

5
**double asterisks**
6

7
__double underscores__

预览：

single asterisks

single underscores

double asterisks

double underscores

但如果两侧有空格，则会被视作普通字符而非强调语法。

你可以使用反斜杠进行转义：

代码：

1
\*this text is surrounded by literal asterisks\*

预览：

*this text is surrounded by literal asterisks*

行内代码#

HTML 标签：<code>

用反引号 (`) 包裹。

代码：

1
Use the `printf()` function.

预览：

Use the printf() function.

若行内代码中需要包含反引号字符，可使用多重反引号作为定界符：

代码：

1
``There is a literal backtick (`) here.``

预览：

There is a literal backtick (`) here.

行内代码两侧的定界符允许包含空格（开头一个、结尾一个），方便在代码起始或结尾放置反引号字符：

代码：

1
A single backtick in a code span: `` ` ``
2

3
A backtick-delimited string in a code span: `` `foo` ``

预览：

A single backtick in a code span: `

A backtick-delimited string in a code span: `foo`

图片#

HTML 标签：<img />

Markdown 的图片语法与链接类似，支持行内与引用两种方式。

行内图片#

行内图片语法：![替代文本](URL "标题")

标题可选。

代码：

1
![Alt text](/path/to/img.jpg)
2

3
![Alt text](/path/to/img.jpg "Optional title")

预览：

Alt text

说明：

一个感叹号 !；
后接方括号，放置图片的替代文本；
再接圆括号，内含图片 URL/路径，及可选的标题（引号包裹）。

引用式图片#

引用式图片语法：![替代文本][id]

代码：

1
[img id]: https://s2.loli.net/2024/08/20/5fszgXeOxmL3Wdv.webp  "Optional title attribute"
2
![Alt text][img id]

预览：

Alt text

删除线#

HTML 标签：<del>

这是扩展语法。

GFM 增加了删除线语法。

代码：

1
~~Mistaken text.~~

预览：

Mistaken text.

杂项#

自动链接#

Markdown 支持一种便捷写法来创建“自动链接”（URL 与邮箱地址）：只需用尖括号将其包住即可。

代码：

1
<http://example.com/>
2

3
<address@example.com>

预览：

http://example.com/

address@example.com

GFM 会自动识别标准 URL 并转换为链接。

代码：

1
https://github.com/emn178/markdown

预览：

https://github.com/emn178/markdown

反斜杠转义#

Markdown 允许使用反斜杠来转义那些本用于 Markdown 语法的特殊字符，使其按字面显示。

代码：

1
\*literal asterisks\*

预览：

*literal asterisks*

以下字符可通过反斜杠转义以按字面量输出：

Code:

1
\   backslash
2
`   backtick
3
*   asterisk
4
_   underscore
5
{}  curly braces
6
[]  square brackets
7
()  parentheses
8
#   hash mark
9
+   plus sign
10
-   minus sign (hyphen)
11
.   dot
12
!   exclamation mark

内联 HTML#

对于 Markdown 语法未覆盖的标记，直接使用原生 HTML 即可。无需特别声明从 Markdown 切换到 HTML，直接写标签就行。

代码：

1
This is a regular paragraph.
2

3
<table>
4
    <tr>
5
        <td>Foo</td>
6
    </tr>
7
</table>
8

9
This is another regular paragraph.

预览：

This is a regular paragraph.

Foo

This is another regular paragraph.

请注意：在块级 HTML 标签内不会处理 Markdown 语法。

与块级标签不同，在行内级标签内会处理 Markdown 语法。

代码：

1
<span>**Work**</span>
2

3
<div>
4
    **No Work**
5
</div>

预览：

Work

**No Work**

***

在文章中嵌入视频

Thu, 01 Jan 1970 00:00:00 GMT

只需从 YouTube 或其他平台复制嵌入代码，然后将其粘贴到 markdown 文件中。

1
---
2
title: 在文章中嵌入视频
3
published: 2023-10-19
4
// ...
5
---
6

7
<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>