→ 如有资源无法下载，请第一时间联系站长QQ:23467321处理！诚信让我们共赢！
→ 为更好的沟通和解决用户需求，建议新老用户都采用QQ邮箱来注册账号！
什么是Astro
Astro 是「集多功能于一体的 Web 框架」，用于构建「快速、以内容为中心」的网站。
Astro主要特性
「以内容为中心」：Astro 专为内容丰富的网站而设计。
「服务器优先」：网站在服务器上渲染 HTML 时运行速度更快。
「默认快速」：在 Astro 中构建缓慢的网站是不可能的。
「易于使用」：您不需要成为专家即可使用 Astro 构建某些内容。
「功能齐全且灵活」：超100多种 Astro 集成可供选择。
说人话：默认服务端渲染、没有JavaScript，所以很快；可以集成多种框架
Astro 的目标是构建内容（静态网站），而不是web APP级别的应用。
Astro安装
// 全局安装
npm i -g astro
// 初始化项目
npm create astro@latest
接着根据提示回车即可
Astro语法
类似 jsx的表达式的 HTML 超集
「Astro 组件」是 Astro 项目的基础构建块。它们是纯 HTML、无需客户端运行时的模板组件。你可以通过文件扩展名 .astro 来写 Astro 组件。
vscode 中可以使用 Astro 插件进行代码高亮
如果组件种需要 JavaScript ，那么你可以在代码栅栏、script 标签等方式加入 JavaScript 代码。
---
// 组件脚本（JavaScript）
---
<!-- 组件模板（HTML + JS 表达式）-->
「Astro 组件语法」采用类似jsx的写法，不过他们还是有一些区别
区别1：属性采用 html 语法
- <div className="box" dataValue="3" />
+ <div class="box" data-value="3" />
区别2：没有根元素限制
---
// 包含多个元素的模板
---
<p>无需将元素包装在单个容器元素中。</p>
<p>Astro 支持模板中的多个根元素。</p>
区别3：多种注释写法
---
---
<!-- HTML 注释语法在.astro 文件中是有效的 -->
{/* JS 注释语法也是有效的 */}
Astro模板语法
定义变量
---
const name = "Astro";
---
<div>
<h1>你好 {name}!</h1> <!-- 输出 <h1>Hello Astro!</h1> -->
</div>
动态属性
---
const name = "Astro";
---
<h1 class={name}>支持属性表达式</h1>
<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />
Fragment 片段
---
const htmlString = '<p>Raw HTML content</p>';
---
<Fragment set:html={htmlString} />
<>helloe!!!</>
动态标签
---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Hello!</Element> <!-- 渲染成 <div>Hello!</div> -->
<Component /> <!-- 渲染成 <MyComponent /> -->
CSS 样式
Astro <style> 标签内的 CSS 规则「默认自动限定范围」。即仅当前组件有效
<style>
h1 {
color: red;
}
.text {
color: blue;
}
</style>
如果你想全局生效，需要使用指令
<style is:global>
h1 {
color: red;
}
.text {
color: blue;
}
</style>
Script 标签
Astro 允许你不使用任何框架，那么将会严格按照 html 进行编译，此时，此时你可以使用 script 标签处理事件，包括点击事件。
// <button class="alert" onClick={onClick}>Click me!</button>
// 上面的点击写法是无效的
<button class="alert">Click me!</button>
<script>
// 在页面上找到所有带有 `alert` 类的按钮。
const buttons = document.querySelectorAll('button.alert');
// 处理每个按钮上的点击事件。
buttons.forEach((button) => {
button.addEventListener('click', () => {
alert('按钮被点击了！');
});
});
</script>
指令
class:list
class:list 接收数组，其中有几种不同的可能值：
string：添加到 class 元素
Object：添加到键值对到 class 元素
Array：扁平化
false, null, or undefined: skipped
<!-- 原先 -->
<span class:list={[ 'hello goodbye', { world: true }, [ 'friend' ] ]} />
<!-- 输出 -->
<span class="hello goodbye world friend"></span>
set:html
set:html={string} 将 HTML 字符串注入元素中，类似于设置 el.innerHTML
---
const rawHTMLString = "Hello <strong>World</strong>"
---
<h1>{rawHTMLString}</h1>
<!-- 输出：<h1>Hello <strong>World</strong></h1> -->
<h1 set:html={rawHTMLString} />
<!-- 输出：<h1>Hello <strong>World</strong></h1> -->
set:text
set:text={string} 将文本字符串注入元素中，类似于设置 el.innerText。
客户端指令
默认情况下，UI 框架组件不会在客户端激活。如果没有 client:* 指令，它的 HTML 将被渲染到页面上，而无需 JavaScript。
client:load 立即加载并激活组件的 JavaScript。
client:idle 一旦页面完成了初始加载，并触发 requestIdleCallback 事件，就会加载并激活组件中的 JavaScript
client:visible 一旦组件进入用户的视口，就加载组件的 JavaScript 并使其激活
client:media 一旦满足一定的 CSS 媒体查询条件，就会加载并激活组件的 JavaScript。
client:only 跳过 HTML 服务端渲染，只在客户端进行渲染
<BuyButton client:load />
<ShowHideButton client:idle />
<HeavyImageCarousel client:visible />
<SidebarToggle client:media="(max-width: 50em)" />
<SomeReactComponent client:only="react" />
<SomePreactComponent client:only="preact" />
<SomeSvelteComponent client:only="svelte" />
<SomeVueComponent client:only="vue" />
<SomeSolidComponent client:only="solid-js" />
集成第三方框架
安装集成组件
npx astro add react
在 astro.config.mjs 配置文件中添加如下
import { defineConfig } from 'astro/config';
import react from "@astrojs/react";
// https://astro.build/config
export default defineConfig({
integrations: [react()]
});
添加组件
定义 React 组件
import React from "react"
import { useState } from "react"
const ReactComponent = () => {
const [count, setCount] = useState(0)
return <div onClick={() => setCount(count + 1)}>React：{count}</div>
}
export default ReactComponent
引入组件
---
import Layout from '../layouts/Layout.astro';
import ReactComponent from "../components/ReactComponent";
---
<Layout title="Welcome to Astro.">
<main>
<ReactComp client:load></ReactComp>
</main>
</Layout>
其他框架的流程类似
❝ 只有在 .astro 文件中才可以使用多种框架的语言
Astro总结
Astro 是一个以内容为中心的框架，默认服务端渲染，尽量没有JavaScript，所以速度很快。
Astro 除了可以集成流行的框架之外，还对标准的 markdown 语法内置支持。包括 frontmatter YAML 语法。
Astro 3.0 前端框架闪亮登场，一场视图过渡和图像优化的变革
网站前端开发的领域不断演进，随着Astro 3.0的发布，它正在迈出巨大的一步。Astro 3.0引入了突破性的功能和增强功能，承诺改变我们构建和体验网络应用程序的方式。在本文中，我们将探讨Astro 3.0的主要亮点以及如何赋予开发人员创建更快、更引人入胜和视觉上令人惊叹的网络体验的能力。
视图过渡：提升页面导航
Astro 3.0的杰出功能之一是其支持视图过渡API（View Transitions API）。在历史上，平滑且类似于本机的页面过渡是与单页面应用程序（SPA）相关联的，需要复杂的JavaScript设置。Astro 3.0通过使这些过渡对每个人都可访问，而无需复杂的JavaScript设置，改变了这一情况。
使用视图过渡，您可以在一个页面到另一个页面时无缝地将元素变形，淡入淡出内容以获得更愉悦的导航体验，滑动内容以增加吸引力，甚至在页面之间保持常见的UI元素，所有这些都无需繁重的JavaScript。集成非常简单，通常只需要两行代码。其结果是以前仅保留给SPA的视觉吸引力用户旅程。
自从Astro 2.9以来，Astro用户一直很幸运地提前访问视图过渡。社区的实验和反馈对于优化这一功能至关重要，确保其达到了最高的质量和性能标准。由Astro开发人员创建的演示展示了可能性，展示了感觉像本机客户端体验的应用程序，但实际上是由Astro 3.0和新的视图过渡API带到生活的服务器渲染的HTML。
此外，Astro 3.0为支持较旧的浏览器提供了额外的支持，通过自动向您的页面添加的小型，约3KB的脚本来实现一致的用户体验。
---
// src/pages/index.astro
// 注意：确保将 "<ViewTransitions />" 组件添加到其他页面，而不仅仅是一个页面。
import {ViewTransitions} from 'astro:transitions';
---
<head>
<title>My View Transition Demo</title>
<ViewTransitions />
</head>
<body>
<!-- -->
</body>
更快的渲染性能：性能是核心
性能是Astro 3.0的核心。渲染性能得到了显著提升，与Astro 2.9相比，大多数组件的渲染速度提高了高达30%。在更复杂的基准测试中，这一改进可能达到惊人的75%。
这种性能飞跃是Astro 2.10开始的精心重构工作的结果，并在Astro 3.0中达到了顶峰。从构建管道的关键路径中剔除了不必要的代码，并在可能的地方进行了优化。消除了冗余的生成器和异步代码是实现这一印象深刻的速度提升的关键策略之一。
图像优化：简单与效率相结合
在Astro 3.0中，图像优化现已稳定，并可在所有项目中使用。引入内置的<Image>组件简化了导入和放置图像在网页上的过程。Astro在构建过程中会自动检测和优化每个图像，确保性能最佳。
Astro还负责为最终渲染的图像标记添加了推断的宽度和高度属性，以防止布局移位并增强累积布局移位（CLS）保护。这使得在Astro中处理图像变得比以往更加流畅和高效。
---
// Import the <Image /> component
import { Image } from "astro:assets"
// Import a reference to the image itself
import myImage from "../assets/penguin.png"
---
<Image src={myImage} alt="A very cool penguin!" />
这部分代码的作用是导入 <Image /> 组件以及图像的引用，然后将该图像显示在页面上。在此之前，已经实现了一些重要的改进，包括：
完全支持Vercel的内置图像服务。通过将 imageService: true 添加到您的Vercel集成配置中，您可以在其全球CDN上看到优化后的生产图像。
迁移到Sharp作为我们的新默认优化库。Sharp取代了之前的默认库 @squoosh/lib，后者已不再维护。
支持优化远程图像。内容团队可以继续使用其现有的工作流程和CMS工具来管理图像。
服务器端渲染（SSR）增强功能
Astro与Vercel的合作带来了对Astro 3.0的服务器端渲染（SSR）的显著增强。这些增强功能使所有用户受益，无论他们选择的托管平台如何。
按路由代码拆分：服务器端用户现在可以通过为网站的每个路由创建较小的个别服务器文件来减少每个请求上不必要的代码加载，从而获得更好的性能。
边缘中间件：Astro现在可以捆绑您的中间件以在边缘部署，确保您的应用程序尽可能靠近用户运行。
主机自定义：Astro的新API帮助用户了解并利用他们选择的托管提供商的独特功能，从而做出更明智的开发决策，顺利的生产体验。
JSX的HMR增强功能：轻松开发
Astro 3.0引入了React Fast Refresh，显著改进了Hot Module Reloading（HMR）和整体开发服务器的稳定性。此功能允许本地更改智能地推送到浏览器，而无需进行全页面刷新，从而保持UI的当前状态。这不仅加快了开发速度，还消除了在更新UI时频繁页面状态重置的困扰。
优化的构建输出：简化和高效
Astro 3.0不仅关注性能，还着眼于整体响应时间。通过自动HTML缩小、更清晰的组件ID和自动CSS内联等一系列优化措施，Astro 3.0的构建输出在各方面都变得更加高效和流畅。这意味着您的网站将更快地加载，用户将获得更迅速的响应，从而提升了整体用户体验。
立即尝试Astro 3.0
Astro 3.0现已在npm上提供。要开始使用，请访问 astro.new 在您的浏览器中尝试Astro 3.0，或者在终端中运行以下命令以创建新项目：
npm install -g create-astro create-astro my-project cd my-project npm start
对于现有项目，您可以在 v3.0升级指南 中找到详细的升级指导，以获取每个更改的详细信息和个别的升级指导。
总之，Astro 3.0标志着网站前端开发的一个重要里程碑。它的创新功能、改进的性能和开发人员友好的增强功能使网络开发人员能够轻松创建出色的用户体验。无论您是构建个人博客还是复杂的网络应用程序，Astro 3.0都将重新定义您对网络开发的方法。深入了解，探索可能性，并通过Astro 3.0将您的网络项目提升到新的高度！
