前端筆記：第2頁
部落格Nuxt 2升級Nuxt 3（一）：bootstrapVue置換成自製的bootrap5元件
如之前規劃，部落格升級 Nuxt3 的第一步是先把 bootstrapVue 抽換成自己實做的 bootstrap5。這篇是紀錄過程中覺得特別困難或是需要研究的部份。
Nuxt3中使用vite-pwa實現pwa功能
之前在 Nuxt2 時可以滿無痛的使用 nuxt/pwa 來為網站新增 PWA 功能，但因為此模組沒有開發 Nuxt3 版本，最近開始接觸 Nuxt3 後得尋找替代品，在官方模組清單頁面中搜尋 pwa 只發現一個模組：vite-pwa-nuxt。
在Nuxt Content v1中實現程式碼區塊複製貼上功能
用 Nuxt Content 作為部落格的基底讓我最開心的部份，就是 markdown 中的程式碼區塊了，自動上色、格式化、支援的語言非常多，這是很多部落格平台都無法提供的，但若需要程式碼複製貼上功能，就得自己額外處理。
在Nuxt 2中建立動態routes的sitemap
Sitemap 雖然對網站來說非必要，但為了 SEO 考量通常都還是會建立。而在 Nuxt 2 中可以透過@nuxt/sitemap模組來簡單建立 sitemap。但若遇到動態頁面，這個模組無法自動新增，官方文件要求使用者必須自行新增，而官方建議的作法以及網路上查到的方式好像都滿麻煩的，所以自己搞了一個小撇步出來，覺得頗方便，所以就紀錄下來。
個人作品集
這篇是整理自己工作中產出或參與的可公開網站，以及自己開發的一些個人專案紀錄。
解決底部Sticky元素在Android Chrome滾動時渲染位置錯誤的問題
如果不是複雜的需求，對於在元素流中有滾動後要固定的元素，像是頂部 header 滾動後要固定或底部 footer 在滾動前要固定，我都會偏好用position: sticky這個方式去處理，簡單粗暴，不像position: fixed那樣要去計算高度來給其他元素 padding 以防遮住主要內容，或是滾動後要用 JS 去偵測來修改，瀏覽器會幫你做好運算。
使用nuxt-content-git取得Nuxt2 Content中正確的檔案時間
建完這個部落格之後，發現好像不太對，怎麼前幾天發的文章，日期卻變成今天。後來發現是因為若從 A 電腦更新文章，在 B 電腦用 git 同步更新檔案之後，檔案的更新日期會變成當下的時間。
Nuxt2中的BootstrapVue TreeShaking
Bootstrap 是個很好用的 UI 框架，在 Vue 生態系中主要由 Bootstrap Vue 去作銜接，然而在專案中幾乎不會完全使用到 Bootstrap 的所有功能，這時如果把不必要的 css / js 編譯移除，可以降低編譯後專案的大小，這種行為也被稱為 Tree shaking。本篇紀錄了自己在 Nuxt2 中使用 Bootstrap Vue 時，Tree Shaking 的一些步驟。
