Astro Color Picker|使用框架 Astro 打造的色票複製工具
Ray C
Ray C

Astro Color Picker|使用框架 Astro 打造的色票複製工具

2022-04-03|閱讀時間約 2 分鐘

簡介

去年看到 Astro 剛發布時所宣稱的「用較少的 JavaScript 打造極速網站」就對這樣的框架產生興趣,那時雖然也試玩了一下,不過因為遇到一些開發初期的 bug 放棄研究。直到近期拿過去使用 petite-vue 開發的專案 — HTML Reserved Colors 來透過 Astro 重新打造外觀和功能完全一樣的姐妹網站,體驗到提升網站載入速度和 SEO 效果的靜態網頁生成,也在實作上發現一些值得注意的地方:(1) <script> 中 fetch 資料時不可使用本地路徑,必須使用網址;(2) Astro 預設在打包時會清除 JavaScript 程式碼,如果想要元件裡的 JS 一同被打包,就要在引入時加入 Astro 的標籤,如 <MyComponent client:visible />,詳細說明見 Partial Hydration in Astro;(3) 如果想要讓頁面中的 JavaScript 程式碼被打包,就要加上 hoist tag,也就是 <script hoist></script>,但是在開發時加入 hoist tag 會導致熱重載 (hot-reload) 中斷,所以我的作法是開發時先移除標籤,待程式碼打包時再利用 git record 的變更提示來提醒自己加上,目前算是比較麻煩的地方。總體而言,使用 Astro 框架開發的過程還算滿意,將 JavaScript 產生的元件打包成 HTML String、以及對 Astro 意圖 整合所有主流前端框架 的作法感到新奇,是一個會想繼續使用的工具。,是一個會想繼續使用的工具。

外觀與互動設計

開發紀錄

  • 將 <head> 與色票卡片做成元件載入
  • 使用 Sass 做出在頁面引入的 全域樣式 和元件中配合使用的 設定樣式
  • 將通用型程式碼 (utils.js) 與專案用程式碼進行拆分,需要時再模組化引入做使用 (module import)
  • 以原生 DOM 操作實現透過網址查詢參數 (Query String) 過濾色票卡片的功能
  • 專案打包後使用 VS Code 套件 MinifyAll 進一步壓縮 HTML 檔案
  • 其他見原專案:HTML Reserved Colors
0
贊助支持創作者,成為他繼續創作的動力吧!
作者介紹
Ray C
Ray C
居住於台北市,熱衷網站開發和設計,認為兩者相輔相臣,致力於做到開發如同揮劍一般優雅。更多關於我:https://rayc.dev/links
本文發佈於
嗯... 就把專案設計和開發的紀錄放在這邊吧!
如果要發表留言,請先登入註冊會員
領取見面禮
只要設定追蹤作者,即可享有 48小時
Premium 閱讀權限