Astro 系列文第十一日:全域狀態管理
前面章節了解到在 Astro 中引用不同框架的元件是極其容易的事情,但這些元件中的狀態要怎麼去管理呢?在一些 UI 框架中會提供創建 `context` 的方式來管理狀態,但由於 Astro 採用「局部 Hydration」的方式來渲染頁面,因此無法辦到,但我們可以額外使用 Nano Stores 來達成這點。
前面章節了解到在 Astro 中引用不同框架的元件是極其容易的事情,但這些元件中的狀態要怎麼去管理呢?在一些 UI 框架中會提供創建 `context` 的方式來管理狀態,但由於 Astro 採用「局部 Hydration」的方式來渲染頁面,因此無法辦到,但我們可以額外使用 Nano Stores 來達成這點。
前面提到如何在 `.astro` 格式中添加客戶端 JavaScript 使元件具備互動性。Astro 最吸引人的一項特點就是可以整合各大 UI 框架到元件之中,享受不同技術與其生態域帶來的便利與好處。在本章節將會從安裝整合到製作一個 React 元件。
當你希望 Astro 處理腳本時可以直接撰寫 <script> 標籤到元件模板之中,當需要直接插入行內腳本可以使用 is:inline 模板指令。通常操縱 DOM 的行為都會放在客戶端腳本中,像是事件監聽、動畫、Ajax……一切與瀏覽器貼近的行為都會放在這裡。
這個章節更偏向我在 Astro 中使用 Tailwind 的歷程心得,如果你沒有打算導入 Tailwind 可以直接前往下一章節即可。透過兩個章節都在練習寫按鈕,現在推薦你嘗試撰寫各式各樣的元件熟悉使用 Astro,對你來說都不會是問題了。
網站中要用到許多種類的按鈕,在本章節綜合了先前「基礎元件」與「樣式」兩章節的內容,打造出一個通用的網頁按鈕元件,一起來實作看看吧。按鈕是網頁極具代表性的元件之一,下一章節講解整合 Tailwind 也會以這個例子出發,敬請期待!
綜合來說 Astro 讓你用自己習慣的方式撰寫 CSS,不管是 import 還是 <link> 還是 Scoped CSS 或是各式各樣的預處理語言或框架皆有支援。stro 中撰寫樣式是一件非常容易的事,並且有多樣選項可供挑選。
藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!今日介紹構成 Astro 最核心的概念 —— 元件。前面除了創建新專案之外也了解了 Astro CLI 與設定檔的大致樣貌,本章節會從創建基本 Astro 元件開始。
藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!今日介紹 Astro 的 CLI 指令與設置 `astro.config` 檔案。你可以使用自己喜愛的套件管理器來執行 Astro ,不管是 npm、pnpm、yarn 甚至是 bun。
藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!今日介紹如何從頭建構一個專案並且了解資料夾結構。前面提到 Astro 是如何建構頁面的,像是將網頁拆分成「元件」以及透過 Astro Island 的方式來建構網頁,接著本章節就要來實際創建一個 Astro 專案囉!
This series will continuously update for 30 days, helping you get started with it! Today, we understand the difference between dynamic and static websites.
藉由本系列文章将持续 30 日不间断的更新带领你上手它!今天理解到了动态网站与静态网站的区别,关系到了网页「渲染模式」的抉择,而 Astro 就及是一个瞄准生成静态页面为主的框架。要了解 Astro 的优势就需要了解现有的问题,需要进一步了解什么是所谓的「静态网站」什么是「动态网站」。
藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!今天理解到了動態網站與靜態網站的區別,關係到了網頁「渲染模式」的抉擇,而 Astro 就及是一個瞄準生成靜態頁面為主的框架。要了解 Astro 的優勢就需要了解現有的問題,需要進一步了解什麼是所謂的「靜態網站」什麼是「動態網站」。
Through this series of articles, I will continuously update for 30 days to help you get started! Learning Astro will be a new trend in front-end development.
藉由本系列文章将持续 30 日不间断的更新带领你上手它!学习 Astro 将会成为前端开发的一股新气象,事实上也被前端社群评价为:「最喜爱的」、「最期待的」新技术之一,凭借着它极为平缓的学习曲线、活耀的社群、踩到痛点的定位和极高的扩充性,它可以轻易上手成为前端的主力生产力工具之一。
藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!學習 Astro 將會成為前端開發的一股新氣象,事實上也被前端社群評價為:「最喜愛的」、「最期待的」新技術之一,憑藉著它極為平緩的學習曲線、活耀的社群、踩到痛點的定位和極高的擴充性,它可以輕易上手成為前端的主力生產力工具之一。