Hello Astro

Astro核心特性

1. 岛屿架构：通过部分 hydration 实现最佳性能，保持页面90+ Lighthouse评分
2. 组件优先：支持React/Vue/Svelte组件无缝集成
3. 内容驱动：内置Markdown/MDX支持，配合Content Collections类型安全

基础组件示例

---
const message = '欢迎使用Astro!';
---

<header class="astro-gradient">
  <h1>{message}</h1>
  <slot />
</header>

<style>
.astro-gradient {
  background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}
</style>

工程化配置

1. astro.config.mjs 启用SSG模式：

export default defineConfig({
  output: 'static',
  adapter: static()
});

2. 打包优化配置：

{
  "scripts": {
    "build": "astro build && astro check"
  }
}

RSS订阅

// src/pages/rss.xml.js
export async function get() {
  const posts = await getCollection('blog');
  return rss({
    stylesheet: '/rss-style.xsl',
    items: posts.map(...)
  });
}

评论组件

// src/components/Giscus.astro
<iframe 
  src="https://giscus.app/client.html"
  data-repo="your-repo"
  data-theme="preferred_color_scheme"
/>

目录结构

├── src
│   ├── content/blog    # 博客MD文档
│   ├── layouts         # 页面模板
│   ├── components      # 公共组件
│   ├── pages           # 路由入口
│   └── styles          # 全局样式

静态站点优势

✅ 零JS默认交付 ✅ 自动代码拆分 ✅ 增量构建（<1s热更新）