有關的文章： 第三方應用整合

如何使用 Claude Code 建立 Teachify 網站頁面（Beta 版）

Claude Code 可以透過 Teachify MCP（Loopwise），協助你完成 Teachify 的各種內容管理工作，像是新增網站頁面、建立課程章節與單元等，將許多原本需要手動操作的工作交給 AI 完成。



🖥️在正式使用前，你需要先完成 Claude Code 與 Teachify 的 MCP 連線設定。


MCP（Model Context Protocol）是一套開放的通用協定，讓不同的 AI 工具都能遵循同一套規格，安全地連接網站或其他外部系統。


只有完成 MCP 授權並建立連線後，Claude Code 才能存取 Teachify 的資料，並依照你的指令執行操作。


比如說，你可以直接對 Claude Code 下指令：「幫我做一個課程銷售頁」，Claude Code 就會自動建立頁面、部署到你的 Teachify 網站，並提供可直接開啟的網址，不需要再另外申請任何金鑰或密碼。


常見用途包括：製作課程銷售頁、活動報名頁、自我介紹頁，你也可以用來製作網站首頁。


整個過程不需要編寫程式碼，也不需要手動上傳檔案。


本篇教學將帶你完成 MCP 連線設定，並示範如何使用 Claude Code 建立第一個 Teachify 網站頁面。


開始前的準備


請先確認已完成以下兩件事：


  1. 你已安裝 Claude 桌機版 App。


請前往 claude.ai 下載安裝，Windows 與 Mac 都適用。
本文使用的 Claude Code，就是 App 內建的 Code 模式，不需要另外安裝。




  1. 請確認你的 Teachify 帳號具有該網站的管理權限，可以登入網站管理後台。


進入網站後台，請從左側找到「全站設定 ⭢ Beta 功能 ⭢ MCP 連線」點擊「啟用」。


若沒有先啟用這項功能，後續的授權步驟會無法完成。





操作步驟


步驟一：加入連線


這個步驟是把 Teachify 的 MCP 網址告訴 Claude Code，讓它知道要連到哪裡。


  1. 請開啟 Claude 桌機版 App。
  2. 請點選畫面左上方的「</> Code」，切換到 Claude Code 模式。



  1. 請複製以下這段話，貼到下方的對話框後送出：


請幫我把 Loopwise 的 MCP 加進來，網址是 https://mcp.loopwise.com/，要 user scope


對話框裡最後提到的「user scope」，是讓這條連線在你之後開啟的任何工作資料夾都能使用。少了這句，只有設定當下那個資料夾能用，換一個資料夾就會連不上。這個設定只決定「連線適用範圍」，不會讓 Claude Code 取得你電腦其他檔案存取權。




  1. 如果 Claude Code 詢問是否允許修改檔案，請點選同意。


送出後你可能會看到 Claude Code 執行一些指令、或顯示一段設定內容，這都是正常的，請給它一些時間、等它完成。


當 Claude Code 回覆已完成設定，這個步驟就結束了，你不需要做其他操作。




步驟二：完成授權


這個步驟是讓 Teachify 確認你的身分，並授權 Claude Code 存取你的網站資料。完成後就可以開始使用，不需要每次都重新授權。


  1. 請關閉 Claude 桌機版 App，再重新開啟。（設定需要重開才會生效）

⠀

  1. 請在對話框輸入「 幫我看一下我的 Teachify 網站基本資訊」，然後送出。（你可以輸入其他簡單的指令，這裡只是示範如何觸發授權。）

⠀

  1. 接著，畫面會跳出授權提示，瀏覽器會自動開啟 Loopwise 的授權頁面（網址是 app.loopwise.com）。請依照畫面提示操作，使用你的 Teachify 帳號完成授權。

⠀

  1. 請回到 Claude Code 對話框，畫面上應該會顯示你的 Teachify 網站名稱、網址、課程數量與會員人數。

⠀
▼ 當你在對話中，看到自己網站的名稱及相關資訊，跟實際情形是否相符，如正確，就代表你連線成功了。




步驟三：建立第一個頁面



接下來，我們以「課程銷售頁」為例，帶你完成第一次操作。



  1. 請在 Claude Code 對話框輸入以下這段話，然後送出。其中的 /my-course 可以換成你想要的網址路徑。


請幫我在 Teachify 網站做一個課程銷售頁，網址路徑放在 /my-course。需要的課程資訊請一次問我一題，我回答完再問下一題。做好後先給我預覽網址，不要直接上線。


📍頁面上線後，網址就是你的 Teachify 網站網址加上你設定的路徑。


例如你的網站是 example.kaik.io、路徑填 /my-course，新頁面網址就會是 example.kaik.io/my-course。



  1. 接著，Claude Code 會開始詢問課程資訊，例如課程名稱、適合的對象、價格等。


請一題一題回答，還沒決定的部分，給大概的方向即可。



  1. 問完之後，Claude Code 會協助建立頁面，並提供一個預覽網址。你可以點開查看頁面內容。

⠀

  1. 想調整內容的話，請直接告訴 Claude Code 要改哪裡，它會重新產生預覽。

⠀

  1. 確認沒問題後，請輸入「把剛剛那個頁面正式部署上線」。（小提醒：如果這個頁面最後完全沒有要使用，就不要進行這個步驟哦！ ）




如何從 Teachify 後台找到用 Claude Code 所建立的頁面？


進入 Teachify 網站後台，點擊左側列表的「頁面」，即可在「所有頁面」看到你所建立的網頁。



如果你的頁面還在預覽版面，尚未部署到正式網址，「是否發布？」欄位就會只有「-」


在列表中點擊「藍字名稱」進入編輯頁後，請在下方部署歷史處，點選「推上正式」即可。


當網頁部署上正式網址，「是否發布？」欄位就會只更換狀態為「已就緒」。





💡補充說明


這裡我們先列了幾個在操作過程中，你可能會有的疑問：


1️⃣為什麼要先建立預覽版


預覽版有獨立的網址，不會直接出現在你的網站上，所以逛你網站的訪客不會看到它。


你可以反覆修改，確認內容無誤再正式部署上線。


頁面上線後仍然可以修改，直接告訴 Claude Code 要改哪裡即可。


請注意：預覽網址本身是可以直接開啟的，知道網址的人都看得到。它的作用是「還沒放到網站上」，不是「加密保護」。



2️⃣「網址路徑」要怎麼設定


網址路徑由你自行命名，你可以根據頁面屬性或課程名稱，來取個相對應的英文字詞。


比如說，你想要做自我介紹頁面，填 /about，頁面網址就是「你的網站/about」；


要做課程介紹頁面，填 /course-intro，網址就是「你的網站/course-intro」。


每個頁面各自獨立，只要路徑不重複，就不會影響到網站現有的頁面。


但如果你指定將內容部署到「已經存在的頁面」，那一頁的原有內容會被取代。


所以如果你目前網站的課程已經數十門了，建議在建立新頁面前，先跟 Claude Code 說「請列出我 Teachify 網站現有的頁面和它們的路徑」，確認你要用的路徑還沒有被使用。



3️⃣ 想將新製作的頁面換成網站首頁的話，該如何設定？


  1. 請進入「所有頁面」，點選頁面右側的「設定」按鈕，進入「頁面設定」。



⠀

  1. 請將「頁面網址」後方空白欄位處，改成 「index」，點選「更新頁面」按鈕，即可設為首頁。



首頁是訪客進入你網站看到的第一頁，操作前請務必先確認兩件事：


① 現有首頁的內容是否還需要保留？需要的話請先自行備份。


② 請仔細檢查預覽版頁面，確認新首頁沒問題再上線。



如以上說明都無法解決你的問題，請點選右下角藍色 icon 跟我們聯絡，我們將盡快回覆。

更新時間： 07/08/2026

這篇說明對您有幫助嗎？

分享您的反饋

取消

感謝！