Astro

Astro Props（Astro 屬性）

你可能對於像 React、Vue 或 Svelte 這樣的現代 JavaScript 框架中的屬性概念很熟悉。注意：我之前寫過相關文章，你可以在 React Props、Vue Props 和 Svelte Props 找到這些文章。屬性是我們將信息傳遞給組件的方式。這包括變數和函數。 Astro 組件也支持屬性。以下是如何使用它們。假設你在 src/components/Hello.astro 中定義了一個 Hello 組件： <p>Hello！</p> 在使用組件時，你可以為它傳遞一個名為 name 的屬性，像這樣：<Hello name="Flavio" />，你可以使用以下語法在組件輸出中顯示名稱： <p>Hello {Astro.props.name}！</p> 通常，在組件的 frontmatter 部分使用對象解構將屬性提取到單獨的變量中，這在擁有複雜組件時很方便： --- const { name } = Astro.props --- <p>Hello {name}！</p> 下面是如何處理多個屬性，以支持這樣的使用方式：<Hello name="Flavio" message="歡迎" /> --- const { name, message } = Astro.props --- <p>{message} {name}！</p> 以這種方式，你可以為未設置的屬性提供默認值： --- const { name = '', message = 'Hello' } = Astro....

Astro介紹

最近我在各種地方聽到很多關於Astro的討論，於是我決定去瞭解一下。我有一個困擾：我討厭伺服器。我討厭管理伺服器，我討厭建立伺服器，我討厭必須擔心伺服器。安全性、維護、升級，這些都不是我喜歡的事情，除非是必需的。這就是為什麼我喜歡使用像Netlify和Vercel這樣的平臺。我使用了很多靜態網站生成器，如Hugo、Next.js、SvelteKit和傳統的簡單HTML網站。 Astro看起來很有趣，因為它朝著這個方向前進，但有著不同的觀點。以下是Astro對我來說主要的賣點：它生成靜態網站，對我來說這是一大優點，因為我不想管理伺服器，而且我愛靜態網站。它不依賴於特定的框架，這讓我在使用不同框架的不同網站時更靈活。它似乎非常簡單，我喜歡簡單的東西。它致力於盡可能少地將JavaScript發送到客戶端。你知道，我看到自十多年來不斷有新的JavaScript框架出現，必須有一些顯著的不同才能出現。我所看到的第一件事是，Astro是一個不依賴於框架的工具。在這個領域，它在JavaScript相關的領域是獨一無二的。Next.js和Gatsby是建立在React上的，SvelteKit是建立在Svelte上的，Nuxt是建立在Vue上的。我可以使用Astro來創建一個使用React的網站，然後在另一個網站中使用Svelte或Vue，但可以重用我的Astro專業知識。如果需要，你還可以將不同框架混合使用在網站的不同部分。這並不是我在我的網站中想要做的事情，但對於各種場景來說可能很有用。最終生成的是一個靜態的HTML網站。在瀏覽器中運行時不需要任何JavaScript庫，除非明確需要。這是一種稱為以HTML為先，僅在需要時使用JavaScript的方法。這很酷。我們使用JavaScript構建網站，但大部分工作在構建時完成。它似乎使用了很多組合的概念，重用我們用其他庫（React/Vue/Svelte/*）構建的東西。它還借用了其他項目中出現的一些好的想法，比如frontmatter、內置的MDX支持、作用域CSS和基於文件系統的路由。 Astro在2021年6月正式推出，自那時以來引起了很大的熱議。讓我們來看看它到底是什麼。我要使用Astro安裝幾個不同的Astro網站，這樣我們就可以看到不同的網站是如何構建的，從非常簡單的網站開始，然後逐步變得更複雜。創建一個空文件夾，然後運行： npm init astro 這將提示您選擇一個起始模板：選擇Minimal。等它完成後，運行： npm install 然後運行： npm run dev 在http://localhost:3000/上啟動本地開發伺服器。選擇Minimal模板將生成一個非常簡單的網站。現在讓我們創建另一個網站，選擇Blog模板。以下是Finder中的項目結構：所有模板默認使用Preact，它是類似React的庫，只是更快、更小。您可以使用Starter Kit選項來選擇其他框架。作為第二步，您可以選擇React、Solid、Svelte或Vue：讓我們按下空格選擇Svelte（注意，您可以選擇多個框架）。這將生成一個簡單的單頁網站：注意底部的小部件，帶有+和-按鈕的數字。這是一個Svelte組件。現在讓我們來看看生成這三個網站的代碼。在查看代碼之前，請在VS Code中安裝Astro擴展：這將對您的.astro文件應用正確的語法突出顯示。我有說過.astro文件嗎？是的，因為這是任何Astro項目的構建塊。我們有兩種不同類型的.astro文件：頁面和組件。頁面是任何與路由相關的內容，例如/或/blog或/blog/hello-world。組件是頁面使用的任何代碼，用於抽象或提取公共代碼。我們將頁面放在src/pages中，將組件放在src/components中。與往常一樣，我們有一個public文件夾，用於存放需要直接訪問的任何文件，例如圖像或其他資源。在.astro文件中，組織方式有點新穎，但我不想洩露太多，我們將在下一篇博文中看到，因為這是Astro簡短系列的開端。以下是Astro系列中的文章： Astro組件在Astro中構建可組合的佈局 Astro Props 將一個簡單的網站轉移到Astro 從網絡中提取數據在Astro

在 Astro 中構建可組合的布局

在建立網站時，我喜歡將所有的布局分散在不同的文件中。假如我想建立一個登陸頁面。我之前做的是一個純HTML的頁面。這非常好，沒有比這更簡單和更簡約的了。但是後來我意識到我還想在網站上創建另一個類似的頁面，但具有相同的樣式和結構。開始出現重複代碼的問題。然後我想要另一個頁面，最後我決定對所有頁面的標題進行更改，而這變得讓人沮喪。這就是靜態網站生成器發揮作用的時候了。在許多工具中，比如 Hugo，你可以使用 partials（局部文件）。在 Astro 中，這全部基於組件，因此我們可以導入和嵌入 JSX 中的組件： --- import Header from ../components/Header.astro import Footer from ../components/Footer.astro --- <html> <body> <Header /> <h1>A page</h1> <Footer /> </body> </html> 然後我們可以在組件中複製/粘貼這個結構。請注意，其中仍然有一些我們可以提取的 HTML 內容，以避免複製/粘貼代碼。我們使用佈局來實現這一點。您可以在 src/layouts 文件夾中創建佈局： --- import Header from ../components/Header.astro import Footer from ../components/Footer.astro --- <html> <body> <Header /> <slot /> <Footer /> </body> </html> 注意 <slot /> 的使用方式。這是我們可以在其中嵌入任何來自其他組件的內容的方法。我們可以這樣使用佈局： --- import MyLayout from '....

如何在 Astro 組件中訪問配置值

註：22 Jan 2023 更新：我剛發現在最新版的 Astro 中（以前的版本沒有這個問題..），這個方法已經無法使用了。不確定為什麼，在 Google 上也找不到相關的捲動錯誤，而且我也沒有時間去弄清楚。所以現在我改用在 config.mjs 文件中寫入，並載入該文件而不是 astro.config.mjs。我有一個全局的標誌，當標誌為 true 時，我想要顯示一些內容。如果為 false，則希望該信息被隱藏，這涉及到多個頁面組件。因此，只需更改一個標誌，就可以改變整個網站的外觀。這是我所做的。我把該標誌放在 astro.config.mjs 中： export default /\*\* @type {import('astro').AstroUserConfig} \*/ ({ renderers: ['@astrojs/renderer-react'], devOptions: { tailwindConfig: './tailwind.config.cjs', }, signupsOpen: false, }) 請注意最後一個項目 signupsOpen。這是我添加的項目。然後，在我想使用該標誌的每個組件中引用它。類似於以下方式： --- import Config from '../../astro.config.mjs' --- <div> {Config.signupsOpen && <p>標誌為 true</p>} </div>

如何在安裝 Prettier 後修復 package.json 中的錯誤

在為 Astro 安裝 prettier 設定後，我在 package.json 檔案中遇到了一個錯誤，該錯誤實際上並不存在於該檔案的任何一行。原來是 tailwind.config.js 是空的，加上兩個空括號即可修復此問題： { }

如何解決「Parse failure: Unterminated string constant」錯誤

我遇到了這個錯誤，發生在一位學生的 Windows 電腦上執行 Astro (在 macOS 上無法複製此問題) 的 npm run dev 指令後。經過一番思考🤔，我們解決了這個問題，方法是將父資料夾重新命名，原來的名稱可能包含了一個奇怪的字符，可能是非 ASCII 字符。如果你遇到這個問題，請試著將你執行的資料夾 (或路徑中的某個父資料夾) 重新命名為純 ASCII 文字，例如「test」。

如何解決tsconfig.json的\"設定檔中找不到任何輸入\"錯誤

我的幾位學生在Astro專案中遇到了這個問題。預設情況下，Astro會包含一個tsconfig.json檔案，這個檔案在VS Code中給他們帶來了一個錯誤。該錯誤來自於tsconfig.json，並顯示以下訊息：設定檔中找不到任何輸入我們並沒有使用TypeScript，所以這是一個奇怪的問題。以下是一些可能的解決方法：首先，嘗試重新啟動VS Code。如果這樣不行，請在tsconfig.json檔案相同的資料夾中添加一個空的file.ts檔案。或者刪除tsconfig.json。除非您計劃使用TypeScript，否則您可以配置它以指向您專案中的TypeScript檔案，方法如下：從： { "compilerOptions": { "moduleResolution": "node" } } 修改為： { "compilerOptions": { "moduleResolution": "node" }, "include": [ "./src/\*\*/\*.ts" ] }