1. 程式人生 > >內容創作者不要再複製貼上啦,一勞永逸自建個文章多發平臺吧!

內容創作者不要再複製貼上啦,一勞永逸自建個文章多發平臺吧!

![](https://img2020.cnblogs.com/blog/759200/202101/759200-20210110135122375-1977107278.jpg)

本文作者:HelloGitHub-蔡文心

大家好!這裡是 HelloGitHub 推出的[《講解開源專案》](https://github.com/HelloGitHub-Team/Article)系列,今天給大家帶來的一款基於 Node.js 實現的**一文多發平臺**開源專案——**ArtiPub**(文章釋出者)。 ## 一、介紹 眾所周知文章每發到一個平臺,就能增加一絲讓更多人看到的機會。所以內容創作者們不僅需要編寫高質量的文章,還要手動分發到不同的平臺。這個同步可不是簡單地複製貼上,需要重新排版、上傳圖片等,十分耗時和繁瑣。 HelloGitHub 明白你的痛,所以今天帶來一款免費開源的文章自動分發管理平臺——ArtiPub,它可以幫助內容創作者將編寫好的文章自動釋出到掘金、SegmentFault、CSDN、知乎、開源中國等技術社群,傳播技術內容的同時獲取更多的曝光和關注。它不僅能完成檔案的線上編輯和同步,還有資料統計的功能,簡直是內容創作的必備神器呀! > 專案地址:https://github.com/crawlab-team/artipub 讓我們來跟著本文了解下 ArtiPub 的優點和功能,然後跟著步驟用起來,最後讓你從 **手動同步** 內容變為 **自動同步**。 ### 1.1 安全性 市面上已經存在一文多發的平臺會要求使用者將自己的賬戶資訊,例如 Cookie 或賬號密碼上傳到對方伺服器這樣不安全。因為一旦平臺發生問題,自己的賬戶資訊會遭到洩漏。雖然我相信一般平臺不會惡意操作使用者的賬戶,但如果出現誤操作,您的賬戶隱私將遭到洩漏,平臺上的財產也可能遭到損壞,所以還是要儘可能規避這樣的風險。而 ArtiPub 不要求使用者上傳賬戶資訊,所有賬戶資訊全部儲存在使用者自己本地或者伺服器的資料庫中,從而規避了這個安全風險。 ### 1.2 Chrome 外掛 ArtiPub 有配套的 Chrome 外掛,通過 Chrome 外掛可以方便地獲得使用者登陸資訊(Cookie),然後將 Cookie 注入到 Puppeteer 操作的 Chromium 瀏覽器中,瀏覽器就可以正常登陸網站進行發文操作了。 ### 1.3 支援的平臺 - 掘金 - SegmentFault - CSDN - 簡書 - 知乎 - 開源中國 - 今日頭條 - 部落格園 ### 1.4 支援的安裝方式 ArtiPub 安裝簡單,提供了多種安裝方式,可以一鍵安裝使用,安裝一般只要 5 分鐘。 - Docker - Npm - 原始碼 考慮到此專案的受眾可能包括非程式設計師人群,接下來本文中將演示最方便的一種方案 **使用 Docker 安裝**。 ## 二、安裝 ### 2.1 Docker **準備** 1. [Docker 安裝文件](https://docs.docker.com/engine/install/) 2. [Docker-compose 容器編排安裝文件](https://docs.docker.com/compose/install/) **Step 1 在專案根目錄下執行** `docker-compose up` 命令會根據 `docker-compose.yaml` 檔案建立映象和容器。 ```shell cd ArtiPub docker-compose up ``` **Step 2 啟動容器** ![](https://img2020.cnblogs.com/blog/759200/202101/759200-20210110134606396-83326174.jpg) **Step 3 成功** 訪問 http://localhost:8000 ![](https://img2020.cnblogs.com/blog/759200/202101/759200-20210110134617984-1916729608.jpg) ## 三、使用 ### 3.1 登入 上文提到了 ArtiPub 是通過 Chrome 外掛獲取 Cookie 的,所以還需要安裝 Chrome 外掛,外掛的下載和安裝方法作者寫在了**登入助手**選單中。 ![](https://img2020.cnblogs.com/blog/759200/202101/759200-20210110134627192-1913990102.jpg) ![](https://img2020.cnblogs.com/blog/759200/202101/759200-20210110134635379-1940261958.jpg) ### 3.2 釋出 ![](https://img2020.cnblogs.com/blog/759200/202101/759200-20210110134643970-1942563809.gif) 釋出後需要一點時間大約 1 分鐘內,就能夠看到已經同步釋出到勾選的各大平臺。 ![](https://img2020.cnblogs.com/blog/759200/202101/759200-20210110134700865-1186878004.jpg) ## 四、技術棧 ### 4.1 前端 - React 框架 - UI 是基於阿里出品的 Ant Design Pro 改造而成 ### 4.2 後端 - 基於 Node.js,使用 TS 編寫 - Web 框架則選用了 express - 爬蟲功能基於 puppeteer(Google 開發的自動化測試工具)實現 - 資料庫選用了主流的 NoSQL 資料庫 Mongodb 主要用於記錄文章與 cookie 資訊 ### 4.3 專案結構 ``` . ├── service.json //啟動檔案,包含路由註冊,資料庫連線 ├── backend ├── config ├── extensions │ └── src │ └── popup ├── lib ├── models // 資料庫模型 ├── nginx // nginx配置 ├── public │ └── icons ├── routes //相當於MVC中的controller ├── spiders // 爬蟲相關功能 │ └── import └── src ├── assets │ └── img ├── components │ ├── Authorized │ ├── CopyBlock │ ├── GlobalHeader │ ├── HeaderDropdown │ ├── HeaderSearch │ ├── NoticeIcon │ ├── PageLoading │ ├── SelectLang │ └── SettingDrawer ├── data ├── e2e │ └── __mocks__ ├── layouts ├── locales │ ├── en-US │ ├── pt-BR │ ├── zh-CN │ └── zh-TW ├── models ├── pages │ ├── ArticleEdit │ ├── ArticleList │ ├── Demo │ ├── Environment │ ├── Helper │ ├── Paste │ └── PlatformList ├── services └── utils ``` 雖然前後端程式碼沒有分為兩個倉庫,但是採用的是前後端分離模式,使用 Nginx 作為反向代理。後端部分與傳統 MVC 模式相比有些許改變,但主要的 controller、models 和 service 還是存在(只是名字變了)。 下圖是 ArtiPub 的架構示意圖: ![](https://img2020.cnblogs.com/blog/759200/202101/759200-20210110134715977-2079672267.png) ## 五、最後 ArtiPub 本身並不是一個非常複雜的專案,但是其中包含了很多有趣的功能和思路,比如通過 Chrome 外掛獲取使用者在各大平臺的 cookie 來解決當用戶賬號太多,授權麻煩的問題。還有通過 puppeteer 一種自動化工具來實現釋出。通過對 ArtiPub 原始碼的學習能夠學到除 Node.js 以外的很多技術,並且這些技術使用場景也是非常豐富的。 希望今天推薦的 ArtiPub 你能喜歡,也希望你能在讀完文章後 clone 專案閱讀一番,覺得不錯的話可以關注 **「HelloGitHub」 公眾號**,收到第一時間的更新。愛