Skip to content
My Docs

Rapide主题功能测试

Rapide主题功能测试

Section titled “Rapide主题功能测试”

本页面用于测试Starlight Rapide主题的各种功能和组件是否正常工作。

访问Rapide官方网站

基本段落测试

Section titled “基本段落测试”

这是一个基本的段落，测试文本渲染是否正常。

这是加粗文本

这是斜体文本

这是引用文本

列表测试

Section titled “列表测试”

无序列表:

  • 项目1
  • 项目2
  • 项目3

有序列表:

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

徽章测试 新功能

Section titled “徽章测试 ”

这里测试不同样式的徽章：

默认徽章 提示徽章 危险徽章 成功徽章 警告徽章

旁白组件测试

Section titled “旁白组件测试”

以下是不同类型的旁白组件测试：

卡片组件测试

Section titled “卡片组件测试”

单个卡片

Section titled “单个卡片”

单独的卡片示例

这是一个独立的卡片组件，用于展示特定的信息。

卡片网格

Section titled “卡片网格”

快速上手

轻松开始使用Starlight构建文档网站。

完全可定制

使用丰富的配置选项自定义网站外观。

Markdown增强

使用MDX和各种组件增强内容表现力。

SEO友好

自动生成元数据，提高搜索引擎排名。

可点击卡片

Section titled “可点击卡片”

点击跳转到主页

点击这张卡片将跳转到网站主页。鼠标悬停时会有轻微的上浮效果，并且边框会变为主题强调色。

选项卡组件测试

Section titled “选项卡组件测试”

Starlight是Astro的官方文档主题，它提供了一系列内置功能来构建美观、高性能的文档网站。

带代码块的选项卡

Section titled “带代码块的选项卡”
Terminal window
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML示例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, World!</h1>
  <p>这是一个HTML示例。</p>
</body>
</html>

步骤组件测试

Section titled “步骤组件测试”

  1. 安装依赖

    使用你喜欢的包管理器安装依赖。

    Terminal window
    npm install @astrojs/starlight starlight-theme-rapide

  2. 配置Astro

    在astro.config.mjs文件中添加Starlight集成和Rapide主题。

  3. 创建内容

    在src/content/docs/目录下创建Markdown或MDX文件。

  4. 启动开发服务器

    Terminal window
    npm run dev

文件树组件测试

Section titled “文件树组件测试”
  • Directorysrc/
    • Directorycontent/
      • Directorydocs/
        • Directoryguides/
          • getting-started.md
          • rapide-test.mdx
        • index.md
    • Directorycomponents/
      • CustomHeader.astro
      • ThemeSelect.astro
    • Directorystyles/
      • custom.css
  • astro.config.mjs
  • package.json

LaTeX公式测试

Section titled “LaTeX公式测试”

Starlight支持通过插件显示数学公式：

行内公式: E=mc2E=mc^2

行间公式:

ddx(∫axf(u) du)=f(x)\frac{d}{dx}\left( \int_{a}^{x} f(u)\,du\right)=f(x)

微分方程:

dydx+P(x)y=Q(x)\frac{dy}{dx} + P(x)y = Q(x)

矩阵:

(abcd)\begin{pmatrix} a & b \\ c & d \end{pmatrix}

代码块测试

Section titled “代码块测试”

基本代码块:

Terminal window
// 这是一个JavaScript代码示例
function hello() {
  console.log("Hello, Starlight!");
}

表格测试

Section titled “表格测试”
名称描述
AstroWeb框架
Starlight文档主题
Rapide主题样式

链接测试

Section titled “链接测试”

Starlight文档

图片测试

Section titled “图片测试”

占位图

自定义CSS测试

Section titled “自定义CSS测试”

这是一个使用自定义CSS样式的容器