MUKI space*
Front-end Development,
Effective Note-Taking.
喜歡研究手帳術與時間管理，
寫過 WordPress 與手帳書籍的
用 Obsidian 設計自己的週計畫與週誌
使用 Obsidian 設計週計畫與週誌，結合其高自由度與客製化功能，能滿足生活記錄與待辦事項管理的需求。建議安裝兩個插件：Periodic Notes 生成日誌計畫版面，Tasks 管理待辦事項。設定 Periodic Notes 時，選擇合適的格式與資料夾路徑，並設計模板以顯示每週的日期範圍與待辦事項。Tasks 插件的語法可調整顯示的任務資訊，並透過篩選條件確保重要任務不被遺漏。
製作待辦清單的筆記頁面後，利用 Periodic Notes 的模板自動分類待辦事項，並在 Obsidian 中整合顯示。可選擇美化 Tasks 圖示以提升視覺效果。整體流程是透過 Tasks 管理待辦清單，再用 Periodic Notes 搭配模板顯示，達到有效的計畫與紀錄。希望這些設定能幫助用戶創建理想的 Obsidian 模板，有問題可留言討論。...
如何製作 GitHub issue 和 PR 的 template
公司專案從 GitLab 轉移到 GitHub，為了團隊協作更順利，建立了 PR 和 issue template。PR template 放在 .github 資料夾，檔名為 PULL_REQUEST_TEMPLATE.md。issue template 有 markdown 和 yml 兩種格式，yml 支援表單元件，推薦使用 yml。建立多個 issue template 時，資料夾命名為 ISSUE_TEMPLATE，並建立 config.yml 檔案。所有更改需推到預設 branch 才能自動載入 template。...
如何使用 GitHub 的 Actions 自動產生 Release 文件
公司從 GitLab 遷移到 GitHub，需重新設定自動生成 Release 文件。GitHub Actions 提供便捷性，內建 Release template 省去額外配置。需開啟專案權限，進入 Settings > Actions > General，調整權限並分別儲存。建立 .github 資料夾，放入 yml 檔案，設定 tags 格式為 v*.*.* 後推送，即可自動生成 Release。
發 Pull Request 時需設標籤，Release 文件會根據標籤分類。可自訂 release.yml 與標籤對應，發 PR 並設標籤後，Add Tag 並推送，workflow 自動生成 Release 文件。最後在 Actions 頁籤查看執行狀態，確保流程順利。...
Zeabur：簡單好用的一鍵部署服務，支援前後端與多語言，讓部署變得輕鬆簡單
Zeabur 是一個簡單好用的一鍵部署服務，能直接從 Github 部署專案，支援多種後端語言如 PHP、Node.js 和 Python，整合前後端，提升部署效率。Zeabur 是台灣唯一在 Product Hunt 獲得第一名的新創公司，提供 24 小時繁體中文客服，並與 Google Cloud 和 AWS 合作。
Zeabur 採用彈性付費機制，僅需支付實際使用的資源費用，透明公開。相比傳統虛擬主機，Zeabur 自動化部署更省時省力，適合個人和小型團隊。它支援多種後端語言和框架，提供一站式服務，並有免費試用一個月的贊助專案。...
Vue3 如何用 defineModel 實作 props / emit 的父子元件傳值，讓傳值變得更方便簡單
Vue.js 開發常用 props 和 emit 傳遞資料，但這方法複雜難維護。Vue3 引入 v-model 簡化操作，讓資料變更自動同步，提升傳遞效率。Vue3.4 推出 defineModel()，進一步簡化 props / emit，是官方推薦寫法。
defineModel() 可傳多個資料，並支持型別與預設值設定。使用 v-model 修飾符時，需解構 defineModel() 回傳值。若出現 defineModel is not defined 錯誤，更新 vue 和 @vitejs/plugin-vue 版本，並修改 vite.config.js 設定。...
陸劇 大理寺少卿遊 觀後心得：躲過了高玄，避掉了賀喬宴，卻在邱慶之身上栽了
《大理寺少卿遊》是一部出色的群像劇，每個角色都充滿靈魂。劇中細節如孫豹忘劍一段，讓角色性格鮮明可感。這些細膩的刻畫，使得觀眾能夠清晰地記住每一位角色的獨特之處。
邱慶之這角色讓人意外驚喜。魏哲鳴飾演的邱慶之，雖然古裝造型初看不習慣，但隨劇情推進卻令人著迷。他在劇中知曉一切，影響著一枝花和李餅的命運。儘管戲份不多，最後的回憶錄完整了他的故事線，讓人深感與李餅的深厚情誼。邱慶之的拔牙場景更是令人印象深刻。...
如何重構一個已上線且完整的功能或程式設計
重構程式碼能改善結構和品質，增強系統的可維護性和可擴展性。最近重構公司的圖表功能，目的是簡化程式碼，提高可讀性和可維護性。
重構前需要熟悉功能的所有規格和資料結構，做好備份並使用 git worktree 瀏覽舊檔案。重構過程中將設定拆成獨立的 function，避免在 template 放太多邏輯，減少 if...else 和重複的 function，保持程式碼乾淨和一致性。...
初探 Singleton Pattern 設計模式
最近在學習 JavaScript 設計模式時，發現自己常用 Singleton Pattern，但未深入理解。設計模式是可重複使用的解決方案，像數學公式一樣，能提高程式碼的可讀性與開發效率。設計模式分為建立型、結構型與行為型。
Singleton Pattern 屬於建立型設計模式，確保類別只有一個實例，避免資源浪費，適合用於全域狀態與共享資料管理。然而，過度使用可能導致狀態難以管理與測試困難。選擇是否使用 Singleton 需視具體需求而定。...
在 Vue.js 設定多個入口網址，並顯示對應的網站標題
公司開發網站後台，使用 Vue.js 結合 SPA 開發，無需 SEO。後來因 B 公司需求，增加多個入口網址，並替換登入頁 LOGO。未登入時，訪客會看到不同 LOGO，登入後 LOGO 依 platform 顯示。設定路由匹配同元件，使用 meta.platform 區分 LOGO。網站標題問題透過複製 index.html 為 b.html，修改標題，並用 nginx 指向不同入口解決。這樣可達成多入口網址，且有獨立標題與 LOGO。...