捨棄 create-react-app 之餘還架了個 astro blog 昭告天下：通用元件 Html.astro

2023-10-08 08:37 2023鐵人賽 astro

對於一個部落格來說，大部分的畫面都能共同一套 html metadata。這時除了在多個檔案間複製貼上以外，更便於維護的做法是把內容集中到一個 layout 元件，並讓整個部落格都建立在這個基礎元件之上。

今天會來分享一下個人的 Html 以及 GeneralLayout 元件設定（可點擊兩個元件名稱連結到完整的程式碼）。

元件 GeneralLayout

這邊沒有太複雜的內容，唯一的目的就是處理整個部落格的左側選單、右側主內容排版。在裝置小於 800px 寬時，畫面呈現垂直排版。而在螢幕寬度大於 800px 後，改用 display: flex 讓 .side-content / .main-content 呈現水平排列。並設定 .main-content 的 overflow-y 為 auto，使畫面右半可獨立捲動。

元件 Html

GA 部分

發文當下還沒找到合用的 plugin，目前想要在透過 astro 建立的靜態網站中埋設 GA 只能回歸手動設定 data steam + Google tag 的方式。

在設定好 Google Analytics 的 Data Streams 後（後續鐵人賽會介紹較完整的設定流程），請將 Google 提供的 script 內容整包複製貼上到 astro 元件中，並在 script 標籤加上 is:inline，讓 astro 不要介入這段 script 中的內容。

這裡可以透過 .env 來避免 data stream Id 直接暴露出來~~（雖然打包後還是直接公開了）~~，操作如下：

  1. 專案根目錄建立 .env 檔案，設定好變數 PUBLIC_GA4_ID 與 PUBLIC_GTAG_ID；注意變數一定要是 PUBLIC_ 開頭，才能讓瀏覽器這類無 process 的環境也能順利取得變數資料
  2. 在 astro 元件的 Component Script 部位透過 import.meta.env.${.env 中的變數名} 取出變數資訊
  3. 在 Component Template 中「使用到變數的 script 部位」透過 define:vars="..." 將步驟二取得的變數傳入

有用到變數的 script 標籤在 astro 元件中應該要長得像以下這樣：

<script is:inline define:vars={{ ga4Id }}>
  /* ... */
</script>

astro 官方在介紹環境變數的文件沒有特別提及，總之請記得——如果要在 script 標籤中使用變數，務必要將變數納入 define:vars 裡，否則什麼都拿不到。

metadata 部分

元件最上方 Component Script 的部分引用了 Footer 元件、整個 astro 專案通用的 avatar 路徑（其實就是 ./public/alexander-andrews-mEdKuPYJe1I.jpg）以及共用的 global.css 內容。

接著就是從 props 取用外部元件提供的 title / description / image 內容（若有）並帶入 Component Template 中，主要用於 Primary Meta Tags 區塊以及 Open Graph 等連結區塊。設定 OG 可以讓使用者分享網站網址時帶入指定的圖片以及描述內容，而不只是單純的網址。

最後就是在 head 中引用整個部落格會用到的字型（Noto Sans TC）資料。

總結

今天介紹的 Html 元件是所有部落格畫面的基礎，並透過 Astro.props 來決定是否要在單一文章頁的情況下為 og 連結顯示該篇文章的 banner 圖。沒有太難的技術，但可以讓連結被分享時看起來更吸引人一點 ☆ ﾟ.*･｡

感謝你今天的閱讀。

參考