第 5 頁

Astro Logo 符號

Astro 系列文第二十三日:路徑別名

當網站規模愈複雜,使用相對關係路徑就會需要花費很多心力去解讀與撰寫,在撰寫引入路徑時會發現撰寫相對位置的路徑既又繁瑣又難維護,可以透過額外設置路徑別名來解決這個問題。本篇文章介紹如何透過設定 Astro 中的 TS 設定檔來達成路徑別名。

Astro Logo 符號

Astro 系列文第二十二日:環境變數

環境變數提供在不同開發階段切換伺服器地址的靈活性,避免硬編碼,同時安全存儲敏感信息,如 API 金鑰或數據庫密碼,使程式更具適應性和安全性。如果你熟悉 Vite 的話應該會非常熟悉,因為 Astro 即是使用 Vite 作為底層。

Astro Logo 符號

Astro 系列文第二十一日:部屬升空

到這個章節介紹了絕大多數會使用到的 Astro 功能,後續的章節會著重在講解一些額外的環境設置。讓我們把製作好的網站放到伺服器上可以被其他人造訪吧。到目前為止教學都是以靜態生產的方式的使用 Astro,也就是預先渲染的網頁文件可以被靜態的放置在伺服器上被索取。

Astro Logo 符號

Astro 系列文第二十日:實作搜尋功能

前面透過建立靜態端點實作了自己的 RSS Feed 算是一個簡單的練習起步,這次更進一步透過建立整個集合的資料來完成「集合文章搜尋功能」。隨著文章愈來愈多會需要一個查詢文章的功能,透過用戶輸入文章相關的訊息,比對文章資訊(標題、文章短描述)並顯示出最相關的文章。

Astro Logo 符號

Astro 系列文第十九日:RSS 端點

前面章節我們學會了如何使用 Markdown 或 MDX 、在內容集合中定義資料格式與索取資料。本章節將解釋如何在 Astro 中創造端點提供不同種類的資料,並實作生成一個 RSS 檔案作為練習,RSS 是一種標準化的方式,一種特定格式的 XML 檔案,設計來推播最新資訊給網站用戶。

Astro Logo 符號

Astro 系列文第十八日:實作集合分類功能

前面學習了內容集合與頁籤的製作,今天的主題練習透過整理集合抓取到的資料更進一步製作分類功能頁面。隨著內容集合發布的文章越來越多,裡面可能會有許多相同性質的文章你會想要集合起來並替他們分類,並且自動根據類別自動創建頁面方便查閱。

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……一切與瀏覽器貼近的行為都會放在這裡。