/

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

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

註：22 Jan 2023 更新：我剛發現在最新版的 Astro 中（以前的版本沒有這個問題..），這個方法已經無法使用了。不確定為什麼，在 Google 上也找不到相關的捲動錯誤，而且我也沒有時間去弄清楚。所以現在我改用在 config.mjs 文件中寫入，並載入該文件而不是 astro.config.mjs。

我有一個全局的標誌，當標誌為 true 時，我想要顯示一些內容。如果為 false，則希望該信息被隱藏，這涉及到多個頁面組件。

因此，只需更改一個標誌，就可以改變整個網站的外觀。

這是我所做的。

我把該標誌放在 astro.config.mjs 中：

1
2
3
4
5
6
7
export default /\*\* @type {import('astro').AstroUserConfig} \*/ ({
 renderers: ['@astrojs/renderer-react'],
 devOptions: {
 tailwindConfig: './tailwind.config.cjs',
 },
 signupsOpen: false,
})

請注意最後一個項目 signupsOpen。這是我添加的項目。

然後，在我想使用該標誌的每個組件中引用它。

類似於以下方式：

1
2
3
4
5
6
7
---
import Config from '../../astro.config.mjs'
---

<div>
 {Config.signupsOpen && <p>標誌為 true</p>}
</div>

tags: [“Astro”, “配置值”, “組件”, “網站開發”]