1
import { defineCollection, z } from 'astro:content';
2

3
const blogCollection = defineCollection({
4
  type: 'content', // 支持 .md 和 .mdx
5
  schema: ({ image }) => z.object({
6
    title: z.string(),
7
    description: z.string(),
8
    publishDate: z.date(),
9
    updatedDate: z.date().optional(),
10
    author: z.string(),
11
    tags: z.array(z.string()).default([]),
12
    // 图片支持
13
    coverImage: image()
14
      .refine((img) => img.width >= 1080, {
15
        message: "封面图片宽度至少1080px",
16
      })
17
      .optional(),
18
    // 自定义验证
19
    readingTime: z.number().min(1).optional(),
20
    // 枚举类型
21
    status: z.enum(['draft', 'published', 'archived']).default('draft'),
22
    // 关联其他内容
23
    relatedPosts: z.array(z.string()).optional(),
24
  }),
25
});
26

27
const authorsCollection = defineCollection({
28
  type: 'data', // 纯数据集合，如 JSON、YAML
29
  schema: z.object({
30
    name: z.string(),
31
    bio: z.string(),
32
    avatar: image(),
33
    social: z.object({
34
      twitter: z.string().optional(),
35
      github: z.string().optional(),
36
    }),
37
  }),
38
});
39

40
export const collections = {
41
  'blog': blogCollection,
42
  'authors': authorsCollection,
43
};

1
---
2
import { getCollection, render } from 'astro:content';
3
import BlogLayout from '../../layouts/BlogLayout.astro';
4

5
// 1. 获取单个条目
6
const post = await getEntry('blog', 'post-slug');
7

8
// 2. 复杂查询和过滤
9
const allPosts = await getCollection('blog', ({ data }) => {
10
  // 类型安全的过滤
11
  return data.status === 'published' &&
12
         data.publishDate <= new Date() &&
13
         data.tags.includes('tutorial');
14
});
15

16
// 3. 排序和分页
17
const sortedPosts = allPosts.sort((a, b) =>
18
  b.data.publishDate.getTime() - a.data.publishDate.getTime()
19
);
20

21
// 4. 关联查询
22
const author = await getEntry('authors', post.data.author);
23

24
// 5. 渲染内容
25
const { Content, headings } = await render(post);
26
---
27

28
<BlogLayout
29
  title={post.data.title}
30
  author={author}
31
  headings={headings}
32
>
33
  <Content />
34
</BlogLayout>

1
---
2
import { getCollection } from 'astro:content';
3

4
// 动态生成所有博客文章的路径
5
export async function getStaticPaths() {
6
  const posts = await getCollection('blog');
7

8
  return posts.map((post) => ({
9
    params: { slug: post.slug },
10
    props: { post },
11
  }));
12
}
13

14
// 或者使用更灵活的方式
15
export async function getStaticPaths() {
16
  const posts = await getCollection('blog', ({ data }) => {
17
    return data.status === 'published';
18
  });
19

20
  // 支持嵌套路由
21
  return posts.flatMap((post) => {
22
    const date = new Date(post.data.publishDate);
23
    const year = date.getFullYear();
24
    const month = String(date.getMonth() + 1).padStart(2, '0');
25

26
    return [
27
      // /blog/post-slug
28
      { params: { slug: post.slug }, props: { post } },
29
      // /blog/2023/10/post-slug
30
      {
31
        params: { slug: `${year}/${month}/${post.slug}` },
32
        props: { post }
33
      },
34
    ];
35
  });
36
}
37
---
38

39
<!-- 动态路由页面 -->

1
import { toString } from 'mdast-util-to-string';
2
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
3
import rehypeSlug from 'rehype-slug';
4
import remarkGfm from 'remark-gfm';
5
import { remarkReadingTime } from './remark-reading-time';
6

7
// 自定义 Markdown 转换
8
export const markdownConfig = {
9
  remarkPlugins: [
10
    remarkGfm, // GitHub Flavored Markdown
11
    remarkReadingTime, // 自定义插件
12
    // 添加表情符号支持
13
    [require('remark-emoji'), { emoticon: false }],
14
    // 添加目录生成
15
    [require('remark-toc'), { maxDepth: 3 }],
16
  ],
17
  rehypePlugins: [
18
    rehypeSlug, // 为标题添加 ID
19
    [rehypeAutolinkHeadings, { behavior: 'wrap' }], // 自动链接标题
20
    // 语法高亮
21
    [require('rehype-pretty-code'), {
22
      theme: 'github-dark',
23
      keepBackground: false,
24
    }],
25
  ],
26
};
27

28
// 自定义插件：计算阅读时间
29
export function remarkReadingTime() {
30
  return function (tree, { data }) {
31
    const textOnPage = toString(tree);
32
    const wordsPerMinute = 200;
33
    const readingTime = Math.ceil(textOnPage.length / wordsPerMinute);
34

35
    data.astro.frontmatter.readingTime = readingTime;
36
  };
37
}

1
---
2
import { ViewTransitions } from 'astro:transitions';
3

4
// 启用视图过渡
5
const isTransitionEnabled = true;
6
---
7

8
<html lang="zh-CN">
9
  <head>
10
    <title>首页</title>
11
    <!-- 添加视图过渡支持 -->
12
    {isTransitionEnabled && <ViewTransitions />}
13
  </head>
14
  <body>
15
    <nav>
16
      <a href="/" data-astro-transition="animate">首页</a>
17
      <a href="/about" data-astro-transition="fade">关于</a>
18
      <a href="/contact" data-astro-transition="slide">联系</a>
19
    </nav>
20

21
    <!-- 主要内容 -->
22
    <main>
23
      <h1>欢迎来到我的网站</h1>
24
      <article>
25
        <p>这是一个使用视图过渡的示例。</p>
26
      </article>
27
    </main>
28

29
    <!-- 页面特定的过渡配置 -->
30
    <script>
31
      // 自定义过渡行为
32
      document.addEventListener('astro:page-load', () => {
33
        // 页面加载完成后的回调
34
        console.log('页面过渡完成');
35
      });
36
    </script>
37
  </body>
38
</html>

1
/* 自定义视图过渡动画 */
2

3
/* 1. 淡入淡出效果 */
4
::view-transition-old(root),
5
::view-transition-new(root) {
6
  animation-duration: 0.3s;
7
}
8

9
/* 2. 滑动效果 */
10
.slide-transition::view-transition-old(root) {
11
  animation: 0.3s ease-in slide-out;
12
}
13

14
.slide-transition::view-transition-new(root) {
15
  animation: 0.3s ease-out slide-in;
16
}
17

18
@keyframes slide-in {
19
  from { transform: translateX(100%); }
20
  to { transform: translateX(0); }
21
}
22

23
@keyframes slide-out {
24
  from { transform: translateX(0); }
25
  to { transform: translateX(-100%); }
26
}
27

28
/* 3. 共享元素过渡 */
29
.product-image {
30
  view-transition-name: product-image;
31
}
32

33
/* 4. 自定义动画时序 */
34
::view-transition-group(*) {
35
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
36
}
37

38
/* 5. 响应式过渡 */
39
@media (prefers-reduced-motion: reduce) {
40
  ::view-transition-group(*),
41
  ::view-transition-old(*),
42
  ::view-transition-new(*) {
43
    animation: none !important;
44
  }
45
}

1
---
2
import ProductCard from '../../components/ProductCard.astro';
3

4
const product = await getProduct(Astro.params.id);
5
---
6

7
<main>
8
  <!-- 共享元素过渡 -->
9
  <div class="product-image" style="view-transition-name: product-image-{product.id}">
10
    <img src={product.image} alt={product.name} />
11
  </div>
12

13
  <h1 style="view-transition-name: product-title">{product.name}</h1>
14

15
  <!-- 延迟过渡 -->
16
  <div
17
    class="product-details"
18
    data-astro-transition="fade"
19
    data-astro-transition-delay="200"
20
  >
21
    <p>{product.description}</p>
22
    <p class="price">¥{product.price}</p>
23
  </div>
24

25
  <!-- 条件性过渡 -->
26
  <button
27
    data-astro-transition={product.inStock ? 'animate' : 'none'}
28
    class="buy-button"
29
  >
30
    {product.inStock ? '立即购买' : '缺货'}
31
  </button>
32
</main>
33

34
<script>
35
// 编程式控制过渡
36
document.addEventListener('DOMContentLoaded', () => {
37
  const links = document.querySelectorAll('a[data-transition-control]');
38

39
  links.forEach(link => {
40
    link.addEventListener('click', (e) => {
41
      if (link.dataset.transitionControl === 'none') {
42
        e.preventDefault();
43

44
        // 禁用过渡
45
        document.startViewTransition(() => {
46
          window.location.href = link.href;
47
        }).skipTransition();
48
      }
49
    });
50
  });
51

52
  // 自定义过渡前/后逻辑
53
  document.addEventListener('astro:before-transition', (event) => {
54
    console.log('开始过渡:', event.from.pathname, '→', event.to.pathname);
55

56
    // 可以在这里保存滚动位置
57
    sessionStorage.setItem('scrollPos', window.scrollY);
58
  });
59

60
  document.addEventListener('astro:after-transition', () => {
61
    // 恢复滚动位置
62
    const savedScroll = sessionStorage.getItem('scrollPos');
63
    if (savedScroll) {
64
      window.scrollTo(0, parseInt(savedScroll));
65
    }
66
  });
67
});
68
</script>

1
class TransitionManager {
2
  constructor() {
3
    this.pendingTransitions = new Map();
4
    this.setupGlobalHandlers();
5
  }
6

7
  setupGlobalHandlers() {
8
    // 拦截链接点击
9
    document.addEventListener('click', (e) => {
10
      const link = e.target.closest('a');
11
      if (!link || !link.href) return;
12

13
      if (link.hostname !== window.location.hostname) return;
14

15
      e.preventDefault();
16
      this.navigate(link.href, link.dataset.transitionType);
17
    });
18

19
    // 监听前进/后退
20
    window.addEventListener('popstate', () => {
21
      this.navigate(window.location.href, 'popstate');
22
    });
23
  }
24

25
  async navigate(url, transitionType = 'default') {
26
    // 检查是否有未完成的过渡
27
    if (this.pendingTransitions.has(url)) {
28
      return;
29
    }
30

31
    const transitionKey = Symbol();
32
    this.pendingTransitions.set(url, transitionKey);
33

34
    try {
35
      // 开始视图过渡
36
      const transition = document.startViewTransition(async () => {
37
        // 获取新页面内容
38
        const response = await fetch(url);
39
        const html = await response.text();
40

41
        // 解析 HTML
42
        const parser = new DOMParser();
43
        const newDocument = parser.parseFromString(html, 'text/html');
44

45
        // 替换内容
46
        document.documentElement.innerHTML = newDocument.documentElement.innerHTML;
47
      });
48

49
      // 过渡事件
50
      transition.ready.then(() => {
51
        console.log('过渡准备就绪');
52
      });
53

54
      transition.finished.then(() => {
55
        console.log('过渡完成');
56
        this.pendingTransitions.delete(url);
57
      });
58

59
      await transition.finished;
60

61
      // 更新浏览器历史
62
      window.history.pushState({}, '', url);
63

64
    } catch (error) {
65
      console.error('过渡失败:', error);
66
      this.pendingTransitions.delete(url);
67

68
      // 降级：普通跳转
69
      window.location.href = url;
70
    }
71
  }
72

73
  // 自定义过渡动画
74
  createCustomAnimation(element, animationName) {
75
    return document.startViewTransition(() => {
76
      element.style.viewTransitionName = animationName;
77
    });
78
  }
79
}
80

81
// 初始化
82
if (typeof window !== 'undefined') {
83
  window.transitionManager = new TransitionManager();
84
}

1
import { defineMiddleware } from 'astro:middleware';
2

3
// 1. 基础中间件
4
export const onRequest = defineMiddleware(async (context, next) => {
5
  // 请求前逻辑
6
  console.log('请求 URL:', context.url.pathname);
7
  console.log('请求方法:', context.request.method);
8

9
  // 修改请求头
10
  const request = new Request(context.request, {
11
    headers: {
12
      'X-Requested-With': 'Astro',
13
      ...Object.fromEntries(context.request.headers),
14
    },
15
  });
16

17
  // 继续处理
18
  const response = await next({
19
    ...context,
20
    request,
21
  });
22

23
  // 响应后逻辑
24
  console.log('响应状态:', response.status);
25

26
  // 添加响应头
27
  response.headers.set('X-Powered-By', 'Astro');
28

29
  return response;
30
});
31

32
// 2. 多个中间件组合
33
export const authMiddleware = defineMiddleware(async (context, next) => {
34
  const token = context.cookies.get('auth-token');
35

36
  if (!token) {
37
    // 重定向到登录页
38
    return new Response(null, {
39
      status: 302,
40
      headers: {
41
        'Location': '/login',
42
      },
43
    });
44
  }
45

46
  // 验证 token
47
  const isValid = await validateToken(token.value);
48

49
  if (!isValid) {
50
    context.cookies.delete('auth-token');
51
    return new Response(null, {
52
      status: 302,
53
      headers: {
54
        'Location': '/login',
55
      },
56
    });
57
  }
58

59
  // 将用户信息添加到上下文
60
  context.locals.user = await getUserFromToken(token.value);
61

62
  return next();
63
});
64

65
export const loggingMiddleware = defineMiddleware(async (context, next) => {
66
  const start = Date.now();
67
  const response = await next();
68
  const duration = Date.now() - start;
69

70
  console.log(`${context.request.method} ${context.url.pathname} - ${response.status} (${duration}ms)`);
71

72
  return response;
73
});
74

75
// 3. 条件性中间件
76
export const conditionalMiddleware = defineMiddleware(async (context, next) => {
77
  // 只在特定路径应用
78
  if (context.url.pathname.startsWith('/api')) {
79
    // API 请求处理
80
    context.locals.apiRequest = true;
81

82
    // 验证 API 密钥
83
    const apiKey = context.request.headers.get('X-API-Key');
84
    if (!apiKey || !await validateApiKey(apiKey)) {
85
      return new Response(
86
        JSON.stringify({ error: 'Invalid API key' }),
87
        {
88
          status: 401,
89
          headers: { 'Content-Type': 'application/json' },
90
        }
91
      );
92
    }
93
  }
94

95
  // 处理静态资源
96
  if (context.url.pathname.startsWith('/uploads/')) {
97
    // 添加缓存头
98
    const response = await next();
99
    response.headers.set('Cache-Control', 'public, max-age=31536000');
100
    return response;
101
  }
102

103
  return next();
104
});

1
import { defineMiddleware } from 'astro:middleware';
2

3
// 1. 身份验证和授权
4
export const auth = defineMiddleware(async (context, next) => {
5
  const publicPaths = ['/login', '/signup', '/', '/about'];
6

7
  // 检查是否为公开路径
8
  if (publicPaths.some(path => context.url.pathname.startsWith(path))) {
9
    return next();
10
  }
11

12
  // 获取会话
13
  const sessionId = context.cookies.get('session');
14

15
  if (!sessionId) {
16
    return Response.redirect(new URL('/login', context.url));
17
  }
18

19
  // 验证会话
20
  const session = await getSession(sessionId.value);
21

22
  if (!session) {
23
    context.cookies.delete('session');
24
    return Response.redirect(new URL('/login', context.url));
25
  }
26

27
  // 检查权限
28
  const user = await getUser(session.userId);
29

30
  if (!hasPermission(user, context.url.pathname)) {
31
    return new Response('Forbidden', { status: 403 });
32
  }
33

34
  // 将会话信息添加到 locals
35
  context.locals.user = user;
36
  context.locals.session = session;
37

38
  return next();
39
});
40

41
// 2. 请求重写和重定向
42
export const redirects = defineMiddleware(async (context, next) => {
43
  // 维护重定向映射
44
  const redirectMap = new Map([
45
    ['/old-blog', '/blog'],
46
    ['/legacy', '/new-feature'],
47
    ['/docs/v1', '/docs'],
48
  ]);
49

50
  const target = redirectMap.get(context.url.pathname);
51

52
  if (target) {
53
    return Response.redirect(new URL(target, context.url));
54
  }
55

56
  // 处理尾部斜杠
57
  if (context.url.pathname.endsWith('/') && context.url.pathname !== '/') {
58
    const newUrl = context.url.pathname.slice(0, -1);
59
    return Response.redirect(new URL(newUrl, context.url));
60
  }
61

62
  return next();
63
});
64

65
// 3. 数据处理和转换
66
export const dataProcessing = defineMiddleware(async (context, next) => {
67
  // 只处理 POST、PUT、PATCH 请求
68
  if (['POST', 'PUT', 'PATCH'].includes(context.request.method)) {
69
    try {
70
      // 解析请求体
71
      const contentType = context.request.headers.get('content-type') || '';
72

73
      if (contentType.includes('application/json')) {
74
        const body = await context.request.clone().json();
75

76
        // 数据验证
77
        const validationResult = validateRequestBody(body);
78

79
        if (!validationResult.valid) {
80
          return new Response(
81
            JSON.stringify({ errors: validationResult.errors }),
82
            {
83
              status: 400,
84
              headers: { 'Content-Type': 'application/json' },
85
            }
86
          );
87
        }
88

89
        // 清理数据
90
        const cleanedData = sanitizeData(body);
91

92
        // 替换请求体
93
        const request = new Request(context.request, {
94
          body: JSON.stringify(cleanedData),
95
        });
96

97
        return next({ ...context, request });
98
      }
99
    } catch (error) {
100
      return new Response(
101
        JSON.stringify({ error: 'Invalid request body' }),
102
        {
103
          status: 400,
104
          headers: { 'Content-Type': 'application/json' },
105
        }
106
      );
107
    }
108
  }
109

110
  return next();
111
});

1
import { defineMiddleware, sequence } from 'astro:middleware';
2

3
// 1. 中间件组合
4
const securityHeaders = defineMiddleware(async (context, next) => {
5
  const response = await next();
6

7
  // 添加安全头
8
  response.headers.set('X-Frame-Options', 'DENY');
9
  response.headers.set('X-Content-Type-Options', 'nosniff');
10
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
11
  response.headers.set(
12
    'Content-Security-Policy',
13
    "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'"
14
  );
15

16
  return response;
17
});
18

19
const rateLimiting = defineMiddleware(async (context, next) => {
20
  const ip = context.clientAddress;
21
  const path = context.url.pathname;
22
  const key = `rate-limit:${ip}:${path}`;
23

24
  // 使用 Redis 或其他存储
25
  const requests = await redis.get(key) || 0;
26

27
  if (requests > 100) { // 每分钟限制
28
    return new Response('Too many requests', { status: 429 });
29
  }
30

31
  // 增加计数
32
  await redis.incr(key);
33
  await redis.expire(key, 60); // 60 秒过期
34

35
  return next();
36
});
37

38
const caching = defineMiddleware(async (context, next) => {
39
  // 检查缓存
40
  const cacheKey = context.url.pathname;
41
  const cached = await cache.get(cacheKey);
42

43
  if (cached && !context.request.headers.get('Cache-Control')?.includes('no-cache')) {
44
    return new Response(cached.body, {
45
      status: cached.status,
46
      headers: cached.headers,
47
    });
48
  }
49

50
  const response = await next();
51

52
  // 缓存静态资源
53
  if (context.url.pathname.match(/\.(css|js|png|jpg|svg)$/)) {
54
    await cache.set(cacheKey, {
55
      body: await response.clone().text(),
56
      status: response.status,
57
      headers: Object.fromEntries(response.headers),
58
    }, 3600); // 缓存1小时
59
  }
60

61
  return response;
62
});
63

64
// 2. 中间件序列
65
export const onRequest = sequence(
66
  loggingMiddleware,
67
  redirects,
68
  auth,
69
  rateLimiting,
70
  securityHeaders,
71
  caching,
72
  dataProcessing,
73
  conditionalMiddleware
74
);
75

76
// 3. 动态中间件加载
77
export const dynamicMiddleware = defineMiddleware(async (context, next) => {
78
  // 根据环境加载不同的中间件
79
  if (import.meta.env.PROD) {
80
    const { prodMiddleware } = await import('./prod-middleware');
81
    return prodMiddleware(context, next);
82
  }
83

84
  // 开发环境中间件
85
  const { devMiddleware } = await import('./dev-middleware');
86
  return devMiddleware(context, next);
87
});
88

89
// 4. 错误处理中间件
90
export const errorHandler = defineMiddleware(async (context, next) => {
91
  try {
92
    return await next();
93
  } catch (error) {
94
    console.error('Middleware error:', error);
95

96
    // 生产环境返回通用错误
97
    if (import.meta.env.PROD) {
98
      return new Response(
99
        JSON.stringify({
100
          error: 'Something went wrong',
101
          requestId: context.locals.requestId
102
        }),
103
        {
104
          status: 500,
105
          headers: { 'Content-Type': 'application/json' },
106
        }
107
      );
108
    }
109

110
    // 开发环境返回详细错误
111
    return new Response(
112
      JSON.stringify({
113
        error: error.message,
114
        stack: error.stack,
115
        url: context.url.toString(),
116
      }),
117
      {
118
        status: 500,
119
        headers: { 'Content-Type': 'application/json' },
120
      }
121
    );
122
  }
123
});

1
import { defineConfig } from 'astro/config';
2

3
export default defineConfig({
4
  experimental: {
5
    // 启用混合渲染
6
    hybridOutput: 'experimental',
7
  },
8

9
  output: 'hybrid', // 混合输出模式
10

11
  adapter: node({
12
    mode: 'standalone',
13
  }),
14
});

1
---
2
import { getProduct, getRelatedProducts } from '../../api/products';
3

4
// 指定渲染模式
5
export const prerender = false; // 动态渲染
6

7
const product = await getProduct(Astro.params.id);
8
const relatedProducts = getRelatedProducts(product.category); // 可以标记为异步
9
---
10

11
<html>
12
<body>
13
  <!-- 产品详情页 - 动态渲染 -->
14
  <h1>{product.name}</h1>
15
  <p>价格: ¥{product.price}</p>
16

17
  <!-- 相关产品 - 可以静态生成 -->
18
  <div class="related-products">
19
    {relatedProducts.map(related => (
20
      <a href={`/products/${related.id}`} rel="prefetch">
21
        {related.name}
22
      </a>
23
    ))}
24
  </div>
25
</body>
26
</html>

1
---
2
import { action, isError } from 'astro:actions';
3

4
// 定义服务端操作
5
export const server = {
6
  actions: {
7
    async submitContactForm({ request }) {
8
      const formData = await request.formData();
9
      const name = formData.get('name');
10
      const email = formData.get('email');
11
      const message = formData.get('message');
12

13
      // 验证
14
      if (!name || !email || !message) {
15
        return { success: false, error: '所有字段都是必填的' };
16
      }
17

18
      // 处理逻辑（发送邮件、保存到数据库等）
19
      try {
20
        await sendContactEmail({ name, email, message });
21
        await saveContactToDatabase({ name, email, message });
22

23
        return { success: true, message: '提交成功！' };
24
      } catch (error) {
25
        console.error('提交失败:', error);
26
        return { success: false, error: '提交失败，请重试' };
27
      }
28
    },
29

30
    async updateProfile({ request, locals }) {
31
      // 访问上下文信息
32
      const userId = locals.user?.id;
33
      if (!userId) {
34
        return { success: false, error: '未授权' };
35
      }
36

37
      const formData = await request.formData();
38
      const updates = Object.fromEntries(formData);
39

40
      await updateUserProfile(userId, updates);
41

42
      return { success: true };
43
    },
44
  },
45
};
46
---
47

48
<html>
49
<body>
50
  <form method="POST" action={action('submitContactForm')}>
51
    <div>
52
      <label for="name">姓名</label>
53
      <input type="text" id="name" name="name" required />
54
    </div>
55

56
    <div>
57
      <label for="email">邮箱</label>
58
      <input type="email" id="email" name="email" required />
59
    </div>
60

61
    <div>
62
      <label for="message">消息</label>
63
      <textarea id="message" name="message" rows="5" required></textarea>
64
    </div>
65

66
    <button type="submit">提交</button>
67
  </form>
68

69
  <script>
70
    // 客户端处理
71
    document.querySelector('form').addEventListener('submit', async (e) => {
72
      e.preventDefault();
73

74
      const form = e.target;
75
      const formData = new FormData(form);
76

77
      try {
78
        const response = await fetch(form.action, {
79
          method: 'POST',
80
          body: formData,
81
        });
82

83
        const result = await response.json();
84

85
        if (result.success) {
86
          alert(result.message || '操作成功！');
87
          form.reset();
88
        } else {
89
          alert('错误: ' + result.error);
90
        }
91
      } catch (error) {
92
        alert('网络错误，请重试');
93
      }
94
    });
95
  </script>
96
</body>
97
</html>

1
import { defineConfig } from 'astro/config';
2

3
export default defineConfig({
4
  experimental: {
5
    assets: true, // 启用增强的资产处理
6
  },
7

8
  image: {
9
    service: {
10
      entrypoint: 'astro/assets/services/sharp',
11
      config: {
12
        // Sharp 配置
13
        limitInputPixels: false,
14
      },
15
    },
16

17
    // 远程图片优化
18
    remotePatterns: [
19
      {
20
        protocol: 'https',
21
        hostname: '**.example.com',
22
      },
23
    ],
24

25
    // 默认优化选项
26
    defaults: {
27
      formats: ['avif', 'webp', 'png'],
28
      quality: 80,
29
      densities: [1, 2],
30
      loading: 'lazy',
31
      decoding: 'async',
32
    },
33
  },
34
});