2023.07.04

Notion 模板分享

善用 Notion 行事曆，一次規劃行程與待辦事項

Notion 的行事曆功能提供了資料呈現的靈活性，適合用於行程與待辦事項的規劃。可以分開私人與工作行程，並識別小孩的活動。行事曆與待辦清單可用標籤管理，讓行程與待辦事項清晰可見。

行事曆使用 calendar view，待辦清單則用 table view，並設定提醒功能。選擇日期時可設置提醒，包含時與分的靈活選項，方便管理日常事務。這樣的設計讓行程安排更有條理，提醒功能則確保不會遺漏重要事項。...

2023.06.30

陸劇閃耀的她觀後心得

秦嵐與王陽的 CP 吸引觀看，劇中秦嵐飾演女強人，演技成熟，但與王陽的 CP 感不足。劇情著重事業發展，32 集中大部分時間在描繪職場成就，感情線略顯突兀。管文角色強大，獨立不需戀愛對象，兩人職場合作展現強強聯手魅力。

劇中景知秋與陳萱萱的婚姻故事展示不同面向，王立仁忠於婚姻，支持妻子追求夢想；林浩則是虛偽，出軌對妻子不忠。婚姻應基於平等與愛，犧牲需衡量，無人應成附屬品。每個人都應成為獨立、閃耀的自己。...

2023.06.26

透過 img object-fit 屬性取代 CSS 的 background 語法，輕鬆實現圖片背景的效果

在網頁開發中，使用 object-fit 屬性可取代 CSS 的 background 語法，輕鬆實現圖片背景效果。object-fit 支援 SEO，圖片可用 img 標籤寫在 HTML 檔案中，讓搜尋引擎更易索引。這避免了 background 將圖片寫在 CSS 檔案中，無法被搜尋引擎收錄的問題。

object-fit 可應用於圓形頭像、整齊縮圖排列、Banner 底圖等場景，保持圖片比例不變，提升 SEO 效果。這屬性提供了靈活的圖片顯示方式，簡化了代碼，適用於多數現代瀏覽器。object-position 也可用於調整圖片定位，進一步增強設計靈活性。...

2023.06.08

效能優化

在 Vite 專案中按需引入檔案，並自訂 chunk 分割代碼

在 Vite 專案中，按需引入檔案可減少不必要的資源載入。使用 Vue Router 的路由懶加載，將每個路由拆分成獨立的 chunk，僅在需要時載入相關檔案。設定 import 動態載入路由，能有效提升效能。

完成路由懶加載後，若發現過大的檔案，可使用 Vite 的 build.rollupOptions.output.manualChunks 手動拆分 node_modules 的 package。對於 element-plus 等框架，使用其內建的按需引入功能。另可透過 vite-plugin-compression 插件進行 gZip 壓縮，減少檔案大小，提升載入速度。...

2023.05.09

多國語系

用 v-html 來載入語系檔案的缺點與解決方案

用 v-html 會導致 XSS 攻擊風險，因為 HTML 標籤直接暴露。為了避免這種風險，可以使用替換參數的方法。將語系中的 HTML 標籤替換為參數，如 ${0}，然後在 template 中使用標籤來替換參數，這樣可以避免安全漏洞。

這種方法不僅提高了網站安全性，還避免了 console 報錯。建議檢查網站是否有類似問題，並採用這種寫法來增強安全性。...

2023.04.25

API

Vue 父元件傳遞 API 資料給子元件

Vue 父子元件可以傳遞資料，但若在 onMounted 時渲染非即時資料，可能會報 undefined。此時可使用 watch 監聽資料變化，確保父元件資料改變時，子元件能即時處理。

使用 Vue3 + TypeScript + setup 語法糖，父元件透過 props 傳遞資料給子元件，子元件利用 watch 監聽 props.data，資料變化時執行 fetchData 操作，達到資料同步更新。...

2023.04.13

CSS 樣式分享

用 CSS 製作垂直滾動的跑馬燈

HTML 的標籤已被淘汰，但可以用 CSS 製作垂直滾動的跑馬燈。需要一個包含多張圖片的容器，並設置樣式來實現效果。使用 CSS 變數設定圖片間距、滾動時間等。.marquee 容器使用 flex 布局，隱藏溢出內容。

aria-hidden="true" 用於隱藏第二個 .marquee--group，避免滾動時出現空白。--scroll-end: calc(-100% - var(--gap)); 確保無縫滾動。調整滾動速度和間距，只需修改 CSS 變數。...

2023.03.10

用 React Hook 規劃路由

學習 React 路由時，需自行處理更多細節，並了解底層邏輯。利用 React Hook 將類似 Vue 的功能串聯，如 router-view 和導航守衛。未登入時，所有網址跳轉至 /login；登入後顯示固定元件，並根據不同網址渲染對應元件。建立 PublicRoute 和 ProtectedRoute 來實現導航守衛，並在 Routes.tsx 中配置路由。最後在 App.tsx 渲染路由元件，根據 token 顯示 Navbar。...

2023.02.17

使用 Vue 自定義指令(custom directive)製作網站權限

Vue 支援自定義指令，如 v-role，可用來設計網站權限。只需在 template 中使用 v-role 設定會員權限即可。這些指令可應用於 router，實現選單的顯示與隱藏，並可連接後端資料庫動態修改會員權限。

在 main.ts 中定義指令，並封裝後匯入。使用 pinia 管理 roles data，或暫存於 localStorage。設置 router meta 定義不同權限的訪問路由，使用 nav guard 確保未授權用戶被導回 /home。...

MUKI space*