## Docsm——將你從頻繁的文案修改中解救出來

#### 1 前言

今天要和大家分享下最近我們開源的DocsM（Documents Management），對就是文案管理，一個幫助你如何解決靜態文案管理的方案，感興趣的小夥伴可以去[github](https://github.com/didi/docsm)一探究竟。那麼接下來就要給大家來個深度剖析了，看看我們到底是怎麼做的。

#### 2 背景

作為FE，我想大家都有一個共同的體驗“在程式碼功能上線後，因為一兩句文案或提示資訊描述不準確需要修改，修改後就要重新上線”，此時心裡的感覺可以說是五味雜陳...，我們都知道線上無小事，上線並不是說打個包點選發布就可以了，必須要經過：本地測試、測試環境測試、預發環境測試、線上環境測試，每次上線操作這些流程都是必須要走的，就因為一句文案的修改無形中浪費了半個小時的時間，如果有個平臺提供修改靜態文案的功能，就可以幫助前端開發者來解決這一痛點。那麼今天將向大家介紹，為了解決這一痛點，我們的`DocsM`向大家所提供的功能，以及功能的設計實現。

#### 3 DocsM是什麼

DocsM是一個靜態文案管理平臺。用於修改Web頁面的靜態文案，支援文案國際化，並提供提示資訊的UI展示。它的目的是解決前端開發者頻繁的靜態文案修改問題，避免因為簡單的文案修改而發起複雜的上線流程。

#### 4 DocsM可以幹什麼

> 下面是一個簡單的描述和演示，展現了接入文案管理平臺後你的系統可以透過如下的方式去修改頁面上的文案資訊。

##### 4.1 提示文案修改

有許可權的使用者可以看到，在頁面的右下角有一個開關按鈕，開啟按鈕頁面上會出現編輯的紅色按鈕，點開按鈕即可修改提示文案資訊，提交儲存後重新整理頁面即可看到修改後的內容。同時提示資訊的容器UI展示也是平臺提供。
![提示修改](https://seo.s3.didiyunapi.com/tips.gif)

##### 4.2 頁面文案修改

頁面內容文案的修改方式和提示資訊修改一樣，但是不同的是多了一個釋出的操作，因為頁面內容要比提示的要求更嚴格一些，修改後會直接影響使用者的直接觀感。所以這裡我們對線上和線下環境做了區分，未釋出前只可以線上下環境看到，去後臺管理系統釋出後線上即可同步。
![頁面文案修改](https://seo.s3.didiyunapi.com/docs.gif)

##### 4.3 文案國際化

在演示中提供了中文和英文兩個版本的語言，點選按鈕可以看到不同語言內容的切換。
![文案國際化](https://seo.s3.didiyunapi.com/international.gif)

#### 5 DocsM是怎麼做的

看到上面的簡單介紹，或許你腦子裡已經對這個功能有了自己的實現方案，那下面就看下我們是否想的一樣呢~

##### 5.1 設計架構圖

![設計架構圖](https://seo.s3.didiyunapi.com/design.png)

##### 5.2 詳細設計

###### 5.2.1 模組劃分

由架構圖可以平臺劃分為四個模組：

- **SDK**：SDK作為平臺和第三方平臺連線的一個紐帶，將管理平臺和第三方平臺連線在一起，以js檔案的形式嵌入第三方平臺，從Web-Server獲取文案資料展示在第三方平臺頁面中，並提供視覺化介面供產品和開發可直接在自己平臺頁面中修改文案內容；
- **Web-Server**：Web介面層，提供文案資料的增刪改查介面；
- **Web-UI**：文案管理平臺的管理介面，要接入的第三方平臺的管理人員在此可將自己平臺的文案管理接入我們的平臺中，之後文案修改的操作可在此進行；
- **MongoDB**：對各個接入平臺的文案資訊進行儲存；

###### 5.2.2 各模組的詳細介紹

**SDK**

- 產出形態：該模組最終打包為js檔案，嵌入在第三方接入平臺系統中；
- 主要功能：將文案管理平臺和獲取文案內容，將內容顯示在系統頁面中，並提供UI介面供產品和開發可直接在自己系統中對文案進行修改，重新整理頁面後即可生效；
- 具體實現：
  - 獲取第三方平臺傳入接入時建立的系統的名稱和當前登入的使用者名稱，獲取文案和資料以及對應的使用者的許可權；
  - 掃描頁面中的HTML標籤，帶有特殊屬性的則根據當前系統的語言和資料的型別顯示不同形態的文案：滑鼠懸浮提示、氣泡提示、頁面文案顯示；
  - 根據使用者建立的許可權，判斷使用者是否有編輯修改許可權；
  - 對於有許可權的使用者顯示開關，開啟開啟可對文案內容進行修改，儲存後如果是提示資訊即刻就生效，頁面直接顯示的文案則釋出後即可生效；

**Web-Server**

- 主要功能：提供文案資料的增刪改查介面；
- 模組劃分：
  - 服務管理：第三方接入平臺的資訊管理；
  - 文案資訊管理：第三方接入平臺的頁面文案管理；

**Web-UI**

- 主要功能：提供管理端的各種視覺化操作；
  - 第三方平臺資訊的管理：包括新增、修改和許可權管理；
  - 文案資訊的管理：包括文案資訊的新增、修改，以及遮蔽功能；

#### 6 DocsM的優點

上面講了這麼多關於如何實現的內容，相信大家對於我們做的是什麼已經有了一個整體的印象，那麼我們為什麼要這麼做呢？

> 如文章開頭時講的那個場景“簡單的文案修改，直到上線釋出check無誤需要半個小時”，如果每天多做幾次這樣的事，其他的事情應該就不用做了，心裡也是一萬句。。。 如果這件事是誰提出來就讓誰直接去修改豈不更好。

所以我們最大的優點就是：

- **節約時間成本**：省略審批發布流程，秒級修復線上錯誤內容；
- **賦能**：讓非技術同學（運營或者產品、法務等，以下簡稱非技術同學）可以透過可視介面快捷的修改頁面內容，而非之前的非技術同學提供文案，然後同步技術同學之後再去修改，這樣溝通成本大大增加。所以我們在降低溝通成本的同學和釋放了技術同學的時間。

#### 7 結語

目前平臺已經在公司多個內部平臺使用，用於解決日常的文案修改，後續我們也會持續更新維護。如果看到這篇文章的你，將`github`上的`demo`跑起來了，歡迎評論留言，一起溝通交流。
Github：https://github.com/didi/docsm

作者：魯文靜

- [滴滴雲全線標準型雲伺服器限時特惠,註冊即送新手大禮包](https://www.didiyun.com/?channel=14816 )
- [新購雲服務1月5折 3月4折 6月低至3折](https://www.didiyun.com/?channel=14816 "新購雲服務1月5折 3月4折 6月低至3折")
- [滴滴雲使者招募，推薦最高返傭50%](https://www.didiyun.com/envoy/e-index.html?channel=14844)

Docsm——將你從頻繁的文案修改中解救出來

相關文章