第 4 頁

Astro Logo 符號

Astro 系列文第十七日:頁籤

透過內容集合動態的生成 Route 是件方便美好的事情,但一旦數量一多就必須要想辦法分批次顯示這些資料,恰好 Astro 內建頁籤可以幫助我們打造這方面功能,會建議等到網站真的有這麼大量的內容再來考慮製作頁籤,嘗試添加分頁功能並創建分頁元件吧。

Astro Logo 符號

Astro 系列文第十六日:內容集合

除了定義資料在元件中、在 `src` 中 `import` 進來或者是 `fetch` 遠端資料之外有其他撰寫內容的方式嗎?有的!內容集合於 2.0 版本推出,用於替網站的本地內容提供易於使用管理、自動化型別驗證的功能。如果你有大量文件需要注入網頁中便可以使用該項功能。

Astro Logo 符號

Astro 系列文第十五日:基礎布局

先前了解了如何使用 Markdown 與 MDX 來撰寫網頁,接著這個章節將會學習到如何替這些檔案設置畫面布局 (Layout)。布局可以想像成是常見的頁面的模板用於管理頁面常見的模式,定義布局頁面可以解省重複並統一管理頁面。

Astro Logo 符號

Astro 系列文第十四日:圖片最佳化

通常文件會伴隨著圖片,而圖片可以佔據一個頁面絕大多數的運算資源與流量!你會希望圖片能夠被好好處理避免它們壓垮整個網站的體驗,Astro 預設自帶相關的元件與方法幫助你處理這些事務。了解儲存圖片位址 src/ 和 public/ 的差異與如何最佳化圖片。

Astro Logo 符號

Astro 系列文第十三日:Markdown 與 MDX

撰寫網站最終還是要回歸到易於維護,能不能不需要接觸程式,只需透過編寫文件就能更改頁面內容呢?也就是將內容與版面、邏輯做分離。本章節我們將會學習 Markdown 與 MDX 來達成這件事,它們主要用途是作為傳達與標記內容。

Astro Logo 符號

Astro 系列文第十二日:基礎路由

在上一章節介紹了基礎元件的使用,並且你也大概猜到了,只要元件放置在 src/pages/ 之內就會自動的成為 Astro 的頁面,在本章節會更細緻的介紹關於 Astro 的路由設置。Astro 採用的路由策略被稱為「基於檔案的路由 File-based Routing」。

Astro Logo 符號

Astro 系列文第十一日:全域狀態管理

前面章節了解到在 Astro 中引用不同框架的元件是極其容易的事情,但這些元件中的狀態要怎麼去管理呢?在一些 UI 框架中會提供創建 `context` 的方式來管理狀態,但由於 Astro 採用「局部 Hydration」的方式來渲染頁面,因此無法辦到,但我們可以額外使用 Nano Stores 來達成這點。

Astro Logo 符號

Astro 系列文第十日:整合 UI 框架

前面提到如何在 `.astro` 格式中添加客戶端 JavaScript 使元件具備互動性。Astro 最吸引人的一項特點就是可以整合各大 UI 框架到元件之中,享受不同技術與其生態域帶來的便利與好處。在本章節將會從安裝整合到製作一個 React 元件。

Astro Logo 符號

Astro 系列文第九日:腳本

當你希望 Astro 處理腳本時可以直接撰寫 <script> 標籤到元件模板之中,當需要直接插入行內腳本可以使用 is:inline 模板指令。通常操縱 DOM 的行為都會放在客戶端腳本中,像是事件監聽、動畫、Ajax……一切與瀏覽器貼近的行為都會放在這裡。

Astro Logo 符號

Astro 系列文第八日:實作整合 Tailwind

這個章節更偏向我在 Astro 中使用 Tailwind 的歷程心得,如果你沒有打算導入 Tailwind 可以直接前往下一章節即可。透過兩個章節都在練習寫按鈕,現在推薦你嘗試撰寫各式各樣的元件熟悉使用 Astro,對你來說都不會是問題了。

Astro Logo 符號

Astro 系列文第七日:實作按鈕元件

網站中要用到許多種類的按鈕,在本章節綜合了先前「基礎元件」與「樣式」兩章節的內容,打造出一個通用的網頁按鈕元件,一起來實作看看吧。按鈕是網頁極具代表性的元件之一,下一章節講解整合 Tailwind 也會以這個例子出發,敬請期待!

Astro Logo 符號

Astro 系列文第六日:樣式

綜合來說 Astro 讓你用自己習慣的方式撰寫 CSS,不管是 import 還是 <link> 還是 Scoped CSS 或是各式各樣的預處理語言或框架皆有支援。stro 中撰寫樣式是一件非常容易的事,並且有多樣選項可供挑選。

Astro Logo 符號

Astro 系列文第五日:基礎元件

藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!今日介紹構成 Astro 最核心的概念 —— 元件。前面除了創建新專案之外也了解了 Astro CLI 與設定檔的大致樣貌,本章節會從創建基本 Astro 元件開始。

Astro Logo 符號

Astro 系列文第四日:基礎指令與設定

藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!今日介紹 Astro 的 CLI 指令與設置 `astro.config` 檔案。你可以使用自己喜愛的套件管理器來執行 Astro ,不管是 npm、pnpm、yarn 甚至是 bun。

Astro Logo 符號

Astro 系列文第三日:建構新專案

藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!今日介紹如何從頭建構一個專案並且了解資料夾結構。前面提到 Astro 是如何建構頁面的,像是將網頁拆分成「元件」以及透過 Astro Island 的方式來建構網頁,接著本章節就要來實際創建一個 Astro 專案囉!