测试文章：图片、视频和排版测试

这是一篇测试文章，用来验证博客的渲染效果。包含各种排版元素：图片、视频、代码块、引用、表格、列表等。

图片测试

单张图片

这张图片展示了占位图的效果。实际使用时，你可以使用本地图片或者外部链接。

多张图片

YouTube 视频测试

注意：上面是一个测试视频（Rick Astley - Never Gonna Give You Up）。实际使用时，替换 src 中的视频 ID 即可。

响应式视频容器

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/你的视频ID"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

代码块测试

JavaScript 代码

// 这是一个测试代码块
function greet(name) {
  return `Hello, ${name}!`;
}

const message = greet('World');
console.log(message);

CSS 代码

/* 北欧风格配色 */
:root {
  --bg-primary: #F8F6F2;
  --bg-secondary: #EDE8DF;
  --text-primary: #2B2B2B;
  --text-secondary: #5A5A5A;
}

HTML 代码

<!-- 文章结构示例 -->
<article>
  <header>
    <h1>文章标题</h1>
    <time>2026-06-22</time>
  </header>
  <div class="content">
    <!-- 文章内容 -->
  </div>
</article>

引用块测试

完美不是当没有什么可以添加时，而是当没有什么可以移除时。 — Antoine de Saint-Exupéry

设计不仅仅是外观和感觉。设计是关于如何运作的。 — Steve Jobs

表格测试

项目	描述	状态
Astro	静态站点生成器	✅
Netlify	免费托管平台	✅
Cloudflare	CDN + DNS	⏳
Catbox	免费图床	✅

列表测试

无序列表

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

有序列表

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

其他测试

加粗和斜体

这是加粗文本，这是斜体文本，这是加粗斜体文本。

行内代码

使用 npm install 安装依赖，然后运行 npm run dev 启动开发服务器。

链接

访问我的博客

分割线

---

结语

测试完毕。如果以上所有元素都能正常渲染，说明博客的排版功能正常。