前言

每次寫文章最痛苦的就是到各個平臺發布文章，歐陽的文章發布在：微信公眾號、掘金、知乎、CSDN、博客園。這也就意味著每次發布文章我都需要到這些平臺去上傳文章圖片、粘貼md內容、填寫摘要、上傳logo這些，每個平臺我都需要手動操作一次，非常繁瑣。也試過一些多平臺文章分發工具，但是效果都不太好。

加入歐陽的AI交流群

主要的痛點

痛點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文件發布到各個平臺。

如何將流程串起來，實現真正的一鍵發布

前面我們實現了幾個腳本和幾個瀏覽器插件，通過這些腳本和瀏覽器插件的組合可以讓我們實現自動化的多平臺文章發布，但是這些流程沒有串起來。

1、我需要手動執行這些腳本生成logo、各個平臺的md文件
2、啟動本地服務器
3、手動在瀏覽器中打開這些平臺的文章發布頁面，然后一個個點擊“一鍵發布”按鈕

接下來我們要將這些流程串起來。

首先要做的事情是將這些腳本串起來，這個很簡單，新增一個make命令就可以將這些腳本串起來：

通過這個make命令，就可以幫我們自動生成logo、生成各個平臺的md文件，啟動本地服務器。

接下來就是手動打開各個平臺的文章發布頁面，然后一個個點擊“一鍵發布”按鈕這個問題。

我的做法是Claude Code + mcp-chrome來實現。

mcp-chrome是一個操作瀏覽器的mcp，我選擇他主要有兩個原因：

• 可以復用當前瀏覽器的登錄狀態
• 可以操作瀏覽器同時打開多個tab

所以我將我的需求告訴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寫代碼。