→ 如有資源無法下載，請第一時間聯系站長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將您的網絡項目提升到新的高度！
