🔧 阿川の電商水電行
忍耐一年多，我做了一個工具將文章一鍵發布到多個平台
前言
每次寫文章最痛苦的就是到各個平台發布文章，歐陽的文章發布在：微信公眾號、掘金、知乎、CSDN、博客園。這也就意味著每次發布文章我都需要到這些平台去上傳文章圖片、粘貼md內容、填寫摘要、上傳logo這些，每個平台我都需要手動操作一次，非常繁瑣。也試過一些多平台文章分發工具，但是效果都不太好。
主要的痛點
痛點1：文章是以md檔案寫在本地機器，並且文中有不少圖片，發布文章的時候需要依次將本地的圖片上傳到這些平台，每個平台都要執行一次，很麻煩。
痛點2：不是所有平台都支持直接將md內容粘貼到編輯器
- 微信就只支持富文本編輯器，我的做法是先將md粘貼到mdnice生成html，然後粘貼到微信中。
- 知乎只支持md檔案的上傳
痛點3：由於每個平台規則不同，引流方式也不同
痛點4：公眾號平台的logo和其他平台都不同，需要定制化
基於我這些痛點，目前市場上的多平台文章分發工具基本都不能滿足我的需求，所以幹脆就使用Vibe Coding為自己的工作流量身定做一個多平台分發工具。
這篇文章來聊聊我是如何做這個工具的過程。
想要做一個什麼樣的工具？
首先要明確這個工具的目標是什麼？
我期望的工作流是：在本地寫完文章，然後一鍵將本地的md檔案發布到各個平台。
這裡的一鍵要做很多事情，這個是事情清單：
- 生成logo，分別是微信logo和其他平台logo
- 將文章中的圖片上傳到圖床
- 將每個平台對應的引流鉤子插入到文章中，生成對應平台的md文章
- 打開掘金文章發布頁面、輸入標題、將md文章粘貼到編輯器、選擇分類、標籤、創造話題、上傳logo
- 打開CSDN和博客園文章發布頁，發布流程和掘金差不多
- 打開知乎的文章發布頁，發布流程也是差不多，大的區別就是知乎是將md檔案上傳而不是粘貼
- 因為公眾號編輯器只支持富文本，所以公眾號這裡區別大一點：
- 打開mdnice，然後將md文章內容粘貼到編輯器中，生成富文本的html，點擊複製按鈕將富文本複製到剪貼板
- 打開公眾號文章發布頁面，首先選擇我設置的模板，將模板內容填充到編輯器中
- 將從mdnice複製的富文本粘貼到模板的正文
- 上傳logo，因為公眾號的logo分為消息列表和卡片兩種形式，所以我將兩個logo合併成一個logo檔案，然後在上傳的時候手動調整
- 聲明原創、填充描述、開啟贊賞
上面的清單差不多就是歐陽每次發布文章需要做的事情，在已經很熟練的情況下，人工來做一般要30分鐘左右才能完成，而且還可能出錯，所以一般還要檢查一遍。
做這個工具的難點？
明確了工具要做的事情後，來分析一下這個工具的難點在哪裡？
難點1: logo如何生成？
好在我的logo風格都很簡單，純色的背景+白色的手寫字體文案。
普通的logo如圖：
微信的logo如圖：
這裡的唯一難點在於使用程序生成logo時什麼時候進行換行，比如上面的圖中 Claude Code 換行就不錯。
這個問題很簡單，直接調用大模型，讓大模型告訴我就行了。將整個logo的文案丟給大模型配合提示詞，然後大模型就會輸出換行後的logo文案。
難點2：公眾號、掘金等平台沒有提供API進行文章發布
這裡我的做法是為每個平台量身定做一個瀏覽器插件，插件會注入一個名為“一鍵發布”的按鈕，點擊這個按鈕後將對應平台的md文章內容填充到編輯器、以及前面提到的描述、logo上傳、分類標籤等。
這個“一鍵發布”按鈕其實就是將我之前手工做的事情改為程序自動化執行，具體的實現也沒有想像中的那麼難，說白了還是操作DOM，以前是手工點按鈕和輸入內容，現在變成了程序操作DOM的方式點按鈕和輸入內容，這裡前端的同學應該特別清楚。
這是點擊“一鍵發布”按鈕之前的樣子：
這是點擊“一鍵發布”按鈕之後的樣子：
通過這個瀏覽器插件，歐陽現在只需要點擊“一鍵發布”按鈕，然後等待幾秒鐘，就能將文章發布到掘金了。這個插件將所有的發布文章要做的事情都做了。
瀏覽器插件部分是工作量最大的一環，因為每個平台的文章發布頁面都不同，需要進行量身定制。
實現這個工具
前面我們已經理清楚了工具的難點和工具要做的事情清單，接下來我們只需要按照清單順序將功能依次填充即可。
生成logo
前面已經講過了，寫了一個logo-generator.js，執行這個腳本後就會生成兩個logo檔案，分別是普通logo和微信logo。這個很簡單，直接讓Claude Code來寫就行了。
將文章中的圖片上傳到圖床
博客園是支持API上傳和發布文章的，並且圖片上傳到博客園後也不會添加水印。所以我的做法是實現一個cnblogs-uploader.js腳本，執行這個腳本後就會將文章中的圖片上傳到博客園，然後拿到一個新的md檔案，這個檔案裡面的圖片地址已經轉換為了博客園的地址。
這個cnblogs-uploader.js腳本也是我指導Claude Code寫的。
添加引流鉤子
通過上一步已經拿到了將文章圖片上傳到圖床後的md檔案，這裡我只需要給不同的平台創建不同的md檔案，然後使用腳本遍歷這些md檔案插入引流鉤子。如圖：
啟動本地伺服器
前面的瀏覽器插件你可能有個疑問，點擊插件的“一鍵發布”按鈕後就將md檔案的內容填充到頁面，那麼這個md檔案的內容從哪裡來呢？
這裡我在本地啟用了一个node伺服器，將前面添加引流鉤子後的各平台md檔案通過介面暴露給瀏覽器插件，所以在瀏覽器插件裡面可以直接拿到對應平台的md檔案內容，然後就可以通過一鍵發布按鈕將本地md檔案發布到各個平台。
如何將流程串起來，實現真正的一鍵發布
前面我們實現了幾個腳本和幾個瀏覽器插件，通過這些腳本和瀏覽器插件的組合可以讓我們實現自動化的多平台文章發布，但是這些流程沒有串起來。
- 我需要手動執行這些腳本生成logo、各個平台的md檔案
- 啟動本地伺服器
- 手動在瀏覽器中打開這些平台的文章發布頁面，然後一個個點擊“一鍵發布”按鈕
接下來我們要將這些流程串起來。
首先要做的事情是將這些腳本串起來，這個很簡單，新增一個make命令就可以將這些腳本串起來：
通過這個make命令，就可以幫我們自動生成logo、生成各個平台的md檔案，啟動本地伺服器。
接下來就是手動打開各平台的文章發布頁面，然後一個個點擊“一鍵發布”按鈕這個問題。
我的做法是Claude Code + mcp-chrome來實現。
mcp-chrome是一個操作瀏覽器的mcp，我選擇他主要有兩個原因：
- 可以重用當前瀏覽器的登錄狀態
- 可以操作瀏覽器同時打開多個標籤
所以我將我的需求告訴Claude Code，讓他給我寫一個prompt，大意是使用mcp-chrome打開掘金、CSDN、知乎、公眾號的文章發布頁面，然後一個個點擊“一鍵發布”按鈕。
現在我們通過提示詞已經解決了自動化打開瀏覽器、加載各平台文章發布頁、點擊“一鍵發布”按鈕的問題。
接著我們還需要將前半段的make publish-with-logo命令也集成到前面的提示詞裡面，讓AI先執行make publish-with-logo命令生成要發布的md檔案和logo，然後在打開瀏覽器點擊“一鍵發布”按鈕進行發布。
現在我們已經有了一個提示詞，通過將這個提示詞丟給Claude Code，AI就能自動完成將本地md檔案定制化發布到各個平台。
每次都輸入這一堆提示詞太麻煩了，所以我將這些提示詞封裝為Claude Code的自定義指令：
這樣我就可以直接輸入/auto-publish命令，AI就能自動完成將本地md檔案定制化發布到各個平台，實現真正的全流程一鍵發布。
總結
這篇文章介紹了我實現多平台文章一鍵發布工具的過程，主要介紹還是在思路方面，文中沒有貼代碼。並且整個工具的所有代碼和方案全部都是由Claude Code完成的，我做的事情只有：告訴Claude Code需求、和Claude Code討論技術方案、監督Claude Code寫代碼。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
