MUKI space*
Front-end Development,
Effective Note-Taking.
如何免費使用 Algolia Search 服務，免外掛免客製化，美觀又好用
Algolia DocSearch 是一項專為技術文件和部落格提供的免費搜尋服務，使用這項服務不需要安裝 WordPress 外掛或自訂 CSS，實現一鍵安裝且開箱即用。要使用這項服務，需到 Algolia DocSearch 官網申請，經過人工審核後，若符合技術類別，便可獲得使用權限。這項服務提供美觀的搜尋介面和無限次的搜尋次數，非常適合流量不高的技術部落格。
申請成功後，Algolia 會自動為用戶新增一個應用程式，並提供 appID 和 apiKey，讓用戶可以輕鬆整合到網站。DocSearch 的搜尋框樣式統一，建議使用者只需調整其位置即可。若需要重新爬取網站內容，可以透過 Algolia 的後台主動發起爬蟲操作。對於需要高自由度和自訂搜尋畫面的人，可能更適合使用 Algolia 的付費服務。無論選擇哪種方案，Algolia 的核心搜尋功能都能帶來優質的使用體驗。...
什麼是 ts-rest？論 TypeScript Interface 的局限性與前後端導入 ts-rest 的優缺點
在前後端開發中，使用 TypeScript Interface 來定義 API 型別存在一些局限性，如前後端型別不一致和型別驗證不嚴謹等問題。這些問題在專案變得複雜時尤其明顯，因為 API 回應資料來自外部服務，無法保證每次都符合定義的型別。為了解決這些問題，ts-rest 提供了一種自動化的型別同步工具，能夠在前後端之間自動同步 API 型別，並結合 Zod 進行動態驗證，確保資料完整性。
然而，ts-rest 的最佳使用方式是前後端共同導入，這在台灣的產業生態中並不容易實現。即便如此，前端單獨導入 ts-rest 仍能透過 Zod 提供的型別驗證機制，減少錯誤發生的機率，相較於手動建立 TypeScript Interface，ts-rest 能夠提供更強大的型別檢查與資料驗證，特別適合大型或 API 變動頻繁的專案。儘管如此，對於小型或型別驗證需求不高的專案，手動建立 TypeScript Interface 仍然是一個合理的選擇...
WP Search with Algolia 外掛使用介紹：在 WordPress 使用 Algolia 的搜尋服務
Algolia 是一款快速、高效且易於整合的搜尋服務，適合需要即時搜尋功能的部落格平台。WordPress 的預設搜尋功能較為陽春，而透過 WP Search with Algolia 外掛，可以將 Algolia 的搜尋服務整合到 WordPress 網站中，提供更精確的搜尋結果和更佳的使用者體驗。雖然外掛標榜開箱即用，但實際安裝後可能需要進一步設定，如 API Key 的配置和 Instantsearch.js 的客製化。
安裝步驟包括在 WordPress 後台安裝外掛、設定 Algolia API Key、同步索引及客製化搜尋頁面。使用者需注意 Algolia 的免費方案有 API 呼叫次數限制，應定期檢查使用量以避免額外費用。此外，應確保只索引必要的資料，以維持搜尋速度和效能。通過這些設置，使用者可以在 WordPress 中體驗到更強大的搜尋功能。...
用 Dify 和 Firecrawl 建構自己的知識庫
Dify 和 Firecrawl 是兩個強大的工具，正在改變知識庫的建構和管理方式。Dify 是一個開源的 LLM 工具，專注於知識管理和內容生產，提供開箱即用的模板和框架，並支持多種知識庫來源和第三方 API 的整合。Firecrawl 則是一個自動化資料抓取工具，能從多個來源提取資料並整理成適合的格式，方便用戶將網路公開資訊或企業內部數據納入知識庫，確保資料的更新和準確性。
通過結合 Dify 和 Firecrawl，用戶可以輕鬆建構和管理自己的知識庫。例如，使用 Firecrawl 提取 Next.js 官方文件資料，再利用 Dify 的功能來建立和管理知識庫。這種組合不僅提高了知識管理的效率，還降低了實現的難度，適合企業和個人使用。這樣的工具組合為知識庫建構提供了一個全新且高效的解決方案，讓知識獲取和應用更加簡單和便捷。...
MUKI Series TOC：幫你產生系列文章目錄的 WordPress 外掛
Muki series TOC 是一款 WordPress 外掛，能自動生成系列文章目錄，增加文章連結，提升讀者瀏覽體驗。其主要功能包括建立和管理多個系列文章、自動生成目錄、設定顯示位置如文章上方或下方、修改系列文標題、支援快速編輯及客製化 CSS 樣式。
安裝步驟簡單，將文件夾上傳至 wp-content/plugins 目錄，啟用外掛後進行配置。外掛目前在 WordPress 官方審核中，可透過部落格下載試用。使用者可自定義 CSS 樣式，也可手動調整目錄顯示位置。...
MUKI AI Summary：用 AI 幫你生成文章摘要的 WordPress 外掛
Muki AI Summary 是一款 WordPress 外掛，透過串接 Open AI Key，自動生成文章摘要，提升用戶體驗。具備自動生成功能，支持多語言，包括英文、繁體中文等，並提供兩種模型選擇：GPT 3.5 turbo 和 GPT 4o。
此外掛易於使用，設有自定義摘要長度和簡單的設定界面，適合不同需求。安裝步驟簡單，目前正在 WordPress 官方審核中，有興趣者可先行下載試用。需注意的是，必須使用 Open AI Key 才能運作。...
使用 Ngrok 掛 API 代理出現 err_ngrok_6024 的解決方法
使用 Ngrok 免費版代理 API 時，因為前導頁導致出現 ERR_NGROK_6024 錯誤。這是因為 API 網址被導向前導頁，無法直接訪問 API 資料。由於 API server 是本機測試環境，無法修改 header 或使用攔截器解決。
可以透過 Chrome Extension Requestly 來解決此問題。安裝後，設定 HTTP 規則，添加 URL 規則：https://.ngrok-free.app/ 和 https://*.ngrok-free.app，並加入 ngrok-skip-browser-warning: true。這樣就能跳過 Ngrok 的介紹頁，成功取得 API 資料。此方法適用於本機開發，如需正式上線，建議使用 Ngrok 付費版。...
只用 ESLint 處理程式碼格式與規則，並在存檔時自動調整格式
ESLint 將於 2023 年 10 月起不再支援格式設定規則，建議使用 ESLint Stylistic 取代。Anthony Fu 將持續維護這些規則，使用者可安裝相關套件來保持程式碼格式的一致性。若需自動格式化功能，可在 VSCode 設定中加入 "eslint.run": "onSave"。
若需在開發網站時顯示 ESLint 警告，需安裝 vite-plugin-eslint 並修改 vite.config.js。安裝 ESLint 與相關插件後，設定 eslint.config.js 來管理規則。對於 Vue3 和 TypeScript 專案，需安裝特定版本的 ESLint 套件，並在 VSCode 中設定自動格式化。...
在 React 使用 Quill 編輯器，並加入上傳圖片至圖床的功能
在 React 中使用 Quill 編輯器，並增加上傳圖片至圖床的功能。react-quill 套件已久未更新，因此轉用官方 Quill 套件。Quill 預設將圖片轉為 base64，但專案需求改為上傳至圖床並插入網址。可在 toolbarOptions 中設定工具列，並增加 uploadImage 功能上傳圖片。
安裝 Quill React 使用 npm，編輯器分為 Editor.js(x) 和 EditorQuill.js(x) 兩部分。Editor.js(x) 載入 Quill 的 snow 或 bubble 主題樣式。EditorQuill.js(x) 設定工具列並新增上傳圖片功能，圖片上傳後插入編輯器，並設置樣式 max-width 為 100%。完整程式碼可在 codesandbox.io 參考。...