iT邦幫忙

2023 iThome 鐵人賽

DAY 23
0

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

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

元件 GeneralLayout

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

元件 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_IDPUBLIC_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 圖。沒有太難的技術,但可以讓連結被分享時看起來更吸引人一點 ☆ ゚.*・。

感謝你今天的閱讀。

參考


本文同步發佈於普通文組 2.0


上一篇
處理首頁樣式
下一篇
靜態路由與 /archive
系列文
捨棄 create-react-app 之餘還架了個 astro blog 昭告天下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言