對於一個部落格來說,大部分的畫面都能共同一套 html metadata。這時除了在多個檔案間複製貼上以外,更便於維護的做法是把內容集中到一個 layout 元件,並讓整個部落格都建立在這個基礎元件之上。
今天會來分享一下個人的 Html 以及 GeneralLayout 元件設定(可點擊兩個元件名稱連結到完整的程式碼)。
這邊沒有太複雜的內容,唯一的目的就是處理整個部落格的左側選單、右側主內容排版。在裝置小於 800px
寬時,畫面呈現垂直排版。而在螢幕寬度大於 800px
後,改用 display: flex
讓 .side-content
/ .main-content
呈現水平排列。並設定 .main-content
的 overflow-y
為 auto
,使畫面右半可獨立捲動。
發文當下還沒找到合用的 plugin,目前想要在透過 astro 建立的靜態網站中埋設 GA 只能回歸手動設定 data steam + Google tag 的方式。
在設定好 Google Analytics 的 Data Streams 後(後續鐵人賽會介紹較完整的設定流程),請將 Google 提供的 script 內容整包複製貼上到 astro 元件中,並在 script 標籤加上 is:inline,讓 astro 不要介入這段 script 中的內容。
這裡可以透過 .env
來避免 data stream Id 直接暴露出來~~(雖然打包後還是直接公開了)~~,操作如下:
.env
檔案,設定好變數 PUBLIC_GA4_ID
與 PUBLIC_GTAG_ID
;注意變數一定要是 PUBLIC_
開頭,才能讓瀏覽器這類無 process 的環境也能順利取得變數資料import.meta.env.${.env 中的變數名}
取出變數資訊define:vars="..."
將步驟二取得的變數傳入有用到變數的 script 標籤在 astro 元件中應該要長得像以下這樣:
<script is:inline define:vars={{ ga4Id }}>
/* ... */
</script>
astro 官方在介紹環境變數的文件沒有特別提及,總之請記得——如果要在 script 標籤中使用變數,務必要將變數納入 define:vars 裡,否則什麼都拿不到。
元件最上方 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