内置组件参考（详尽版）

import CodeBlock from '@/components/CodeBlock.astro';<CodeBlock type="terminal" code={`ls -la`} />

<div class="grid grid-cols-2 gap-3"><DownloadCard title="镜像A" href="https://..." /><DownloadCard title="镜像B" href="https://..." type="aliyun" /></div>

:::tip[这是标题]这里是提示框的正文，支持 **加粗**、行内 `code` 与[链接](https://example.com)。::::::warning{collapsible="true"}[可折叠的注意事项]默认收起，点击标题展开。:::

<CodeBlock type="code" lang="python" code={`import osprint(os.getcwd())`} />

<CodeBlock type="terminal" code={`$ npm installadded 245 packages in 30s$ npm run buildBuild complete!`} /><!-- Windows cmd / PowerShell 用 shell 指定 --><CodeBlock type="terminal" shell="cmd" code={`> dir`} /><CodeBlock type="terminal" shell="powershell" code={`PS> Get-Process`} />

<CodeBlock type="network" vendor="huawei" code={`interface GigabitEthernet0/0ip address 192.168.1.1 255.255.255.0no shutdown`} />

<CodeBlock type="config" code={`server {  listen 80;  server_name example.com;  root /var/www/html;}`} filePath="/etc/nginx/nginx.conf" label="Nginx" />

<CodeBlock type="log" level="error" code={`ERROR 2026-07-17 main.py:42 Connection refusedWARN  2026-07-17 config.py:18 Using default settingsINFO  2026-07-17 server.py:100 Listening on :8080`} />

<Callout type="tip" title="小技巧">这里写正文，支持 **Markdown**、行内 `code` 与[链接](https://example.com)。</Callout><Callout type="danger" collapsible collapsed title="排错清单">点击标题可展开。</Callout>

<StepCard title="初始化配置" type="success"><ol>  <li>打开终端，进入项目目录。</li>  <li>执行 <code>npm install</code> 安装依赖。</li>  <li>运行 <code>npm run dev</code> 启动本地服务。</li></ol></StepCard>

<AuthorCardname="张三"role="高级网络工程师"avatar="/avatars/zhangsan.png"avatarUrl="https://blog.example.com"bio="专注数据中心网络与自动化运维。"blogUrl="https://blog.example.com"wechatQrCode="/qrcode/wechat.png"links={[  { label: 'GitHub', url: 'https://github.com/xxx' },  { label: '邮箱', url: 'mailto:me@example.com' }]}/>

<DownloadCardtitle="EVE-NG 社区版镜像"href="https://pan.baidu.com/s/xxx"size="1.8 GB"version="2.0.1"type="baidu"tag="官方"description="社区版，含常用网络设备镜像"/><DownloadCard title="文档合集" href="https://www.aliyundrive.com/xxx" type="aliyun" />

<BilibiliPlayer bvid="BV1kj59zGEqV" p={2} />

<FAQitems={[  { question: '如何安装依赖？', answer: '运行 <code>npm install</code> 即可。' },  { question: '支持深色模式吗？', answer: '支持，跟随系统或手动切换。' }]}/>

<FAQ><FAQItem question="如何安装依赖？">  运行 `npm install` 即可，详见[快速开始](https://example.com)。</FAQItem><FAQItem question="支持深色模式吗？">  **支持**。组件已适配系统深色与手动切换。</FAQItem></FAQ>

<LinkButton href="https://example.com" variant="primary">主要按钮</LinkButton><LinkButton href="https://example.com" variant="secondary">次要按钮</LinkButton><LinkButton href="https://example.com" variant="minimal">极简按钮</LinkButton><LinkButton href="https://example.com" variant="inline" size="sm">内联小按钮</LinkButton>

<References items={[{  type: 'M',  author: '谢希仁',  title: '计算机网络',  version: '第8版',  place: '北京',  source: '电子工业出版社',  date: '2021'},{  type: 'J',  author: '李某, 王某',  title: 'SDN 研究综述',  source: '计算机学报',  date: '2022',  volume: '45',  issue: '3',  pages: '512-530'},{  type: 'EB/OL',  author: 'Astro',  title: 'Astro Documentation',  date: '2026',  accessDate: '2026-07-17',  url: 'https://docs.astro.build'}]} />

<ComparisonTableheaders={['特性', 'EVE-NG', 'GNS3', 'CML']}rows={[  ['开源免费', ['✅ 社区版'], ['✅'], ['❌']],  ['图形界面', '有', '有', '有'],  ['支持厂商', '多', '多', 'Cisco 为主']]}/>

<Copyrighttitle="EVE-NG 安装与使用手册"author="ICT学习客栈"link="https://www.ictstu.com/eve-ng"license="CC BY-NC-ND 4.0">本文档仅供学习交流，禁止用于商业用途。</Copyright>

<Timeline items={[{ date: '2024-01', title: '项目启动', content: '确定技术栈为 Astro + MDX。' },{ date: '2024-06', content: '完成首批网络实验文档。' },{ date: '2025-03', content: '上线组件库与本站手册。' }]} />

<ImageSearchiolImages={['L2-ADVENTERPRISEK9-M', 'L3-ADVENTERPRISEK9-M']}qemuImages={['vEOS-4.28.0.qemu', 'vSRX-22.4.qemu']}/>

{"global": { "enabled": true },"popup": {  "enabled": true,  "title": "站点公告",  "content": "欢迎访问 ICT学习客栈！",  "buttonText": "知道了",  "expireDate": "2026-12-31"},"scrolling": {  "enabled": true,  "speed": 60,  "items": [    { "text": "新教程上线", "link": "https://..." }  ]},"pages": {  "/eve-ng/intro": {    "popup": { "enabled": true, "customTitle": "EVE-NG 专题", "customContent": "..." }  }}}

<Announcement />

{"title": "技术栏目","subtitle": "按方向浏览教程","items": [  {    "title": "网络技术",    "description": "华为/eve-ng/网络实验",    "link": "/network",    "iconColor": "#3b82f6",    "iconSvg": "<path d='...'/>"  }]}

<Categories />

import Callout from '@/components/Callout.astro';import StepCard from '@/components/StepCard.astro';import DownloadCard from '@/components/DownloadCard.astro';import References from '@/components/References.astro';<Callout type="tip" title="开始之前">请确保已安装 Node.js 18+。</Callout><StepCard title="安装步骤" type="success"><ol>  <li>克隆仓库：<code>git clone https://...</code></li>  <li>安装依赖：<code>npm install</code></li>  <li>启动服务：<code>npm run dev</code></li></ol></StepCard><DownloadCard title="安装包" href="https://..." type="aliyun" size="120 MB" /><References items={[{ type: 'EB/OL', title: '官方文档', url: 'https://docs.astro.build', accessDate: '2026-07-17' }]} />