Skip to content
Read You

Starlight 组件展示

Starlight 组件展示

Section titled “Starlight 组件展示”

本页展示 Starlight 框架的各种 UI 组件用法。

Badge 徽标

Section titled “Badge 徽标”
新功能实验性已弃用推荐

Aside 提示块

Section titled “Aside 提示块”

Tabs 标签页

Section titled “Tabs 标签页”
Terminal window
npm create astro@latest

Steps 步骤

Section titled “Steps 步骤”
  1. 创建项目
    使用 npm create astro@latest 初始化一个新项目。
  2. 添加 Starlight
    运行 npx astro add starlight 安装集成。
  3. 配置项目
    编辑 astro.config.mjs 设置站点信息。
  4. 编写内容
    在 src/content/docs/ 下添加 Markdown/MDX 文件。
  5. 部署上线
    使用 Cloudflare Pages 或 Vercel 一键部署。

FileTree 文件树

Section titled “FileTree 文件树”
  • Directorysrc/
    • Directorycontent/
      • Directorydocs/
        • index.mdx
        • guide.md
        • components-demo.mdx
      • Directoryguides/
        • example.md
    • Directoryassets/
      • houston.webp
      • logo.svg
  • astro.config.mjs
  • package.json
  • tsconfig.json

LinkCard 链接卡片

Section titled “LinkCard 链接卡片”
讲个笑话忙里偷闲，来看看今天份的程序员笑话。
HJW 个人简介一个模拟的个人简介页面，全栈开发者 HJW。

LinkButton 链接按钮

Section titled “LinkButton 链接按钮”
回到首页Starlight 文档去看笑话