❧ Astro框架使用

Astro基本使用

# 使用 npm 创建一个新项目
npm create astro@latest

# 启动
npm run dev

# 打包
npm run build

# 运行打包后的项目
npm run preview

Astro配置

Astro具体配置文档地址

1. output配置

import { defineConfig } from 'astro/config';
export default defineConfig({
    output: 'static', // 'static' | 'server' | 'hybrid'
});
// 默认是 'static'，SSR使用 'server'，混合使用 'hybrid'

2.adapter（配置适配器来使用 Astro SSR）

# 自动安装 nodejs 适配器
npx astro add node

3.i18n（国际化）

import { defineConfig } from 'astro/config';
export default defineConfig({
    i18n: {
        defaultLocale: "en", // 默认语言
        locales: ["en", "zh"], // 支持的语言列表
        routing: {
            prefixDefaultLocale: false // 默认语言前缀是否显示
        }
    },
});

4.路径配置 (tsconfig.json)

{
    "extends": "astro/tsconfigs/strict",
    "compilerOptions": {
        "baseUrl": "E:/root/ttproject/short-video",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        "jsx": "preserve"
    }
}

Astro文件的 frontmatter

在 Astro 组件中，--- 之间 frontmatter 中的代码在服务器上运行，而不是在浏览器中。

1.将 frontmatter 变量传递给脚本

方法一：使用 data-* 属性在 HTML 中存储变量值输出

---
const { message = '你好，世界！' } = Astro.props;
---

<!-- 将消息存储为数据属性。 -->
<astro-greet data-message={message}>
  <button>Say hi!</button>
</astro-greet>

方法二：使用 define:vars={...} 标签将变量传递客户端的 <script> 或 <style> 标签

---
const foregroundColor = "rgb(221 243 228)";
const backgroundColor = "rgb(24 121 78)";
const message = "Astro is awesome!";
---

<style define:vars=\{\{ textColor: foregroundColor, backgroundColor \}\}>
  h1 {
    background-color: var(--backgroundColor);
    color: var(--textColor);
  }
</style>

<script define:vars={{ message }}>
  alert(message);
</script>

在 <script> 标签上使用 define
相当于使用 is
指令，这意味着脚本不会被打包，将直接内联到 HTML 中。如果要使用打包脚本使用方法一。

2.服务器构建页面期间组件之间共享变量；

运行时API参考文档

Astro.locals 是一个对象，通过中间件把数据和通用函数存储在 locals 中，在组件中可以通过 Astro.locals 获取。

---
const { isLogin, userInfo } = Astro.locals;
---
<p>{isLogin ? `欢迎回来，${userInfo.name}` : '请先登录'}</p>

中间件创建的方法

创建 src/middleware.js|ts（或者，你也可以创建 src/middleware/index.js|ts）

import { defineMiddleware } from "astro:middleware";

// `context` 和 `next` 会自动被类型化
export const onRequest = defineMiddleware(async ({locals, cookies}, next) => {

    // 登录验证
    locals.isLogin = false;
    locals.userInfo = {};

    return next();
});

Astro.locals 内的信息定义类型，也就是在 .astro 文件和中间件代码中能提供自动补全

// 修改 src/env.d.ts

/// <reference types="astro/client" />
declare namespace App {
    interface Locals {
        locals.isLogin: boolean;
        locals.userInfo: {[key: string]: any};
    }
}

模板指令

模板指令参考文档

默认情况下，UI框架组件不会在客户端激活。如果没有 client:* 指令，它的 HTML 将被渲染到页面上，而没有 JavaScript。
只能作用于 UI框架组件不能用于.astro组件，且不能用于动态标签或组件。
添加 is:inline 指令，<script> 或 <style> 标签里的代码不会被打包；
添加 is:raw 指令，元素中任何子项都视为文本（禁用模版解析）；

视图过渡动画

视图过渡动画文档

---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="en">
  <head>
    <title>我的主页</title>
    <ViewTransitions />
  </head>
  <body>
    <h1>欢迎来到我的网站！</h1>
  </body>
</html>

手动跳转路由使用 navigate 方法
组件的脚本要注意使用生命周期事件，因为切换页面dom元素会重绘，导致脚本失效；

`env.d.ts` 文件的使用

// 扩展浏览器 window 对象
interface Window {

}

// 扩展 globalThis 对象，浏览器和服务器都可使用
declare let isLogin: boolean;
declare let userInfo: {[key: string]: any};

// 第三方库cdn script标签引入全局类型定义
// 火山播放器SDK
declare const VePlayer: any;

// import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
// 第三方cdn库导入
declare module "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
declare module "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";

404页面定义

---
return Astro.redirect('/');
---

组件共享状态

Astro组件使用组件共享状态
UI组件使用状态管理