2024-01-15

Markdown 基本元素

标题

H1

H2

H3

H4

H5

H6

强调

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. ~~Scratch this.~~

列表

Definition List (dl)

Definition List Title: This is a definition list division.

Ordered List (ol)

List Item 1
List Item 2
List Item 3

Unordered List (ul)

List Item 1
List Item 2
List Item 3

段落

Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. ~~Deleted text~~ tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget.

This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet.

表格

Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

Markdown	Less	Pretty
Still	`renders`	nicely
1	2	3

其他元素 - abbr, acronym, sub, sup, kbd, etc.

Lorem ^superscript dolor _subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE. Use Crtl + C to stop.

图片

代码块

本主题支持多种编程语言的语法高亮，以下是常用语言的示例：

1
// JavaScript 示例
2
function greet(name) {
3
  return `Hello, ${name}!`;
4
}
5

6
const user = {
7
  name: "World",
8
  greet: () => greet(user.name),
9
};
10

11
console.log(user.greet());

1
# Python 示例
2
def fibonacci(n):
3
    """生成斐波那契数列"""
4
    if n <= 1:
5
        return n
6
    return fibonacci(n-1) + fibonacci(n-2)
7

8
# 打印前10个斐波那契数
9
for i in range(10):
10
    print(f"F({i}) = {fibonacci(i)}")

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>示例页面</title>
6
    <style>
7
      body {
8
        font-family: Arial, sans-serif;
9
      }
10
      .container {
11
        max-width: 800px;
12
        margin: 0 auto;
13
      }
14
    </style>
15
  </head>
16
  <body>
17
    <div class="container">
18
      <h1>Hello World</h1>
19
      <p>这是一个HTML示例。</p>
20
    </div>
21
  </body>
22
</html>

1
/* CSS 示例 */
2
.container {
3
  max-width: 1200px;
4
  margin: 0 auto;
5
  padding: 20px;
6
}
7

8
.card {
9
  background: #fff;
10
  border-radius: 8px;
11
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
12
  transition: transform 0.3s ease;
13
}
14

15
.card:hover {
16
  transform: translateY(-5px);
17
}

1
{
2
  "name": "astro-theme-reimu",
3
  "version": "1.0.0",
4
  "description": "A beautiful Astro theme",
5
  "keywords": ["astro", "theme", "blog"],
6
  "author": "D-Sketon",
7
  "license": "MIT",
8
  "dependencies": {
9
    "astro": "^4.0.0",
10
    "@astrojs/mdx": "^3.0.0"
11
  }
12
}

1
#!/bin/bash
2

3
# Bash 脚本示例
4
echo "开始构建项目..."
5

6
# 检查 Node.js 版本
7
if command -v node &> /dev/null; then
8
    echo "Node.js 版本: $(node --version)"
9
else
10
    echo "未找到 Node.js"
11
    exit 1
12
fi
13

14
# 安装依赖
15
npm install
16

17
# 构建项目
18
npm run build
19

20
echo "构建完成！"

代码折叠

本主题支持代码块折叠功能，可以隐藏部分代码以保持页面整洁：


5 collapsed lines
1
// 这部分代码默认折叠
2
function setupDatabase() {
3
  console.log("连接数据库...");
4
  // 数据库配置代码
5
  const config = {
6
    host: "localhost",
7
    port: 5432,
8
    database: "myapp"
9
  };
10
  return config;
11
}
3 collapsed lines
12

13
// 这部分代码默认展开
14
function initializeApp() {
15
  const dbConfig = setupDatabase();
16
  console.log("应用初始化完成");
17
  return dbConfig;
18
}
19

20
// 这部分代码也默认折叠
21
function cleanup() {
22
  console.log("清理资源...");
23
  // 清理代码
24
  process.exit(0);
25
}
26

27
initializeApp();

数学公式

$f(n) = \Theta(g(n)) \land g(n) = \Theta(h(n)) \rightarrow f(n) = \Theta(h(n))$

$\omega(g(n))=\{f(n):\text{存在正常量}c\text{和}n_0\text{，使得对所有}n \geq n_0\text{，有}0\leq cg(n) < f(n)\}$

f^{(i)}(n) = \begin{cases} n \qquad & i = 1 \\ f(f^{(i-1)}(n)) \qquad & i>1 \end{cases}

A = \begin{bmatrix} A_{11} & A_{12} \\ A_{21} & A_{22} \end{bmatrix} , B = \begin{bmatrix} B_{11} & B_{12} \\ B_{21} & B_{22} \end{bmatrix} , C = \begin{bmatrix} C_{11} & C_{12} \\ C_{21} & C_{22} \end{bmatrix}

$\sum^{\lfloor lgn \rfloor}_{h=0} \lceil \frac{n}{2^{h+1}} \rceil O(h) = O(n \sum^{\lfloor lgn \rfloor}_{h=0} \frac{h}{2^h}) = O(n \sum^{\infty}_{h=0} \frac{h}{2^h}) =O(n)$

流程图

  sequenceDiagram
  participant 客户端
  participant 代理对象
  participant 代理处理器
  participant 目标对象
  客户端->>代理对象:调用方法
  代理对象->>代理处理器:转发代理处理器<br>Invoke()方法
  代理处理器->>目标对象:判断Method<br>调用目标对象的方法
  目标对象->>代理处理器:返回结果
  代理处理器->>代理对象:返回结果
  代理对象->>客户端:返回结果

  graph LR
  c1[Client1<br>Socket]--客户端发出连接-->ss[ServerSocket]
  c2[Client2<br>Socket]--客户端发出连接-->ss[ServerSocket]
  ss--服务器接受请求并创建新的Socket-->s1[为Client1创<br>建的Socket]
  ss--服务器接受请求并创建新的Socket-->s2[为Client2创<br>建的Socket]
  c1--两个Socket间建立专线连接-->s1
  c2--两个Socket间建立专线连接-->s2

MDX 组件展示

本主题提供了丰富的内置 MDX 组件，以下是各组件的使用示例和效果展示。

Link 组件

内部链接

内部链接组件可以创建美观的文章链接卡片，显示文章标题、封面和摘要。

1
<Link slug="astro-theme-reimu-content" title="astro-theme-reimu效果展示" cover="https://d-sketon.top/img/backwebp/bg1.webp" />

astro-theme-reimu效果展示

Astro Theme Reimu 效果展示

外部链接

外部链接组件会自动识别为外部链接，创建美观的外部网站链接卡片。

1
<Link url="https://github.com/D-Sketon/astro-theme-reimu" title="astro-theme-reimu" cover="auto" />

astro-theme-reimu

https://github.com/D-Sketon/astro-theme-reimu

FriendCard 组件

友链卡片组件显示友情链接列表，每个链接包含头像、名称和描述。

1
<FriendCard />

D-Sketon

My Site with hexo-theme-reimu

D-Sketon

My Site with hugo-theme-reimu

HeatMapCard 组件

热力图卡片组件基于访问数据生成热力图可视化，显示内容活跃度。

1
<HeatMapCard levelStandard="1000,5000,10000" />

TagRoulette 组件

标签轮盘组件以轮盘形式显示标签列表，点击可以随机选择标签。

1
<TagRoulette tags="Astro,React,TypeScript,MDX,Vite" icon="🎯" />

🎯

Tabs 组件

标签页组件创建多标签界面，在同一区域显示不同内容。

1
<Tabs active={1} center={false}>
2
  <TabItem title="Tab 1">这是第一个标签页的内容</TabItem>
3
  <TabItem title="Tab 2">这是第二个标签页的内容</TabItem>
4
  <TabItem title="Tab 3">这是第三个标签页的内容</TabItem>
5
</Tabs>

这是第一个标签页的内容

这是第二个标签页的内容

这是第三个标签页的内容

Details 组件

详情折叠组件创建可展开/折叠的内容区域，用于隐藏次要信息。

1
<Details summary="点击展开更多信息">
2
这里是折叠的内容。你可以在这里放置任何 Markdown 内容，包括**粗体**、_斜体_、[链接](https://example.com)等。
3

4
- 列表项 1
5
- 列表项 2
6
- 列表项 3
7
</Details>

点击展开更多信息

这里是折叠的内容。你可以在这里放置任何 Markdown 内容，包括粗体、斜体、链接等。

列表项 1
列表项 2
列表项 3

Grid 组件

网格布局组件创建响应式网格布局，用于灵活的内容排列。

1
<Grid col={3}>
2
  <GridCell>
3
    <h3>卡片 1</h3>
4
    <p>这是第一个网格单元格的内容</p>
5
  </GridCell>
6
  <GridCell>
7
    <h3>卡片 2</h3>
8
    <p>这是第二个网格单元格的内容</p>
9
  </GridCell>
10
  <GridCell>
11
    <h3>卡片 3</h3>
12
    <p>这是第三个网格单元格的内容</p>
13
  </GridCell>
14
</Grid>

卡片 1

这是第一个网格单元格的内容

卡片 2

这是第二个网格单元格的内容

卡片 3

这是第三个网格单元格的内容

Gallery 组件

图片画廊组件创建带有灯箱效果的美观图像展示墙。

1
<Gallery>
2
  ![风景图片 1](https://d-sketon.top/img/backwebp/bg1.webp)
3
  ![风景图片 2](https://d-sketon.top/img/backwebp/bg2.webp)
4
  ![风景图片 3](https://d-sketon.top/img/backwebp/bg3.webp)
5
</Gallery>

风景图片 1 风景图片
2 风景图片
3

AlertBlockquote 组件

提示信息框组件创建不同类型的提示信息，具有各种样式。

1
<AlertBlockquote type="info" title="提示">
2
这是一个信息提示框，用于显示一般性信息。
3
</AlertBlockquote>
4

5
<AlertBlockquote type="warning">
6
这是一个警告提示框，用于显示警告信息。
7
</AlertBlockquote>
8

9
<AlertBlockquote type="danger">
10
这是一个危险提示框，用于显示错误或危险信息。
11
</AlertBlockquote>
12

13
<AlertBlockquote type="tip" title="小贴士">
14
这是一个小贴士提示框，用于显示有用的提示信息。
15
</AlertBlockquote>
16

17
<AlertBlockquote type="important">
18
这是一个重要提示框，用于显示重要信息。
19
</AlertBlockquote>

提示

这是一个信息提示框，用于显示一般性信息。

WARNING

这是一个警告提示框，用于显示警告信息。

DANGER

这是一个危险提示框，用于显示错误或危险信息。

小贴士

这是一个小贴士提示框，用于显示有用的提示信息。

IMPORTANT

这是一个重要提示框，用于显示重要信息。