1 前言

轉(zhuǎn)眼畢業(yè)工作一年零四個月了，又是很久不更新博客了，每次學(xué)到個新的東西或者在工作中做了個自己很滿意的嘗試，就想著寫篇博客總結(jié)分享下吧，可是打開博客的那一刻卻如同提筆忘字一樣不知從何開始，糾結(jié)過后就放棄了。那這次又為何要寫一篇呢？那就要提到今天的主題了——Tips（Documents Management），對就是文案管理，一個幫助你如何解決靜態(tài)文案管理的方案，最近已經(jīng)對外開源，感興趣的小伙伴可以去github
一探究竟。那么接下來就要給大家來個深度剖析了，看看我們到底是怎么做的。

2 背景

作為FE，我想大家都有一個共同的體驗“在代碼功能上線后，因為一兩句文案或提示信息描述不準(zhǔn)確需要修改，修改后就要重新上線”，此時心里的感覺可以說是五味雜陳...，我們都知道線上無小事，上線并不是說打個包點擊發(fā)布就可以了，必須要經(jīng)過：本地測試、測試環(huán)境測試、預(yù)發(fā)環(huán)境測試、線上環(huán)境測試，每次上線操作這些流程都是必須要走的，就因為一句文案的修改無形中浪費了半個小時的時間，如果有個平臺提供修改靜態(tài)文案的功能，就可以幫助前端開發(fā)者來解決這一痛點。那么今天將向大家介紹，為了解決這一痛點，我們的Tips向大家所提供的功能，以及功能的設(shè)計實現(xiàn)。

3 Tips是什么

Tips是一個靜態(tài)文案管理平臺。用于修改Web頁面的靜態(tài)文案，支持文案國際化，并提供提示信息的UI展示。它的目的是解決前端開發(fā)者頻繁的靜態(tài)文案修改問題，避免因為簡單的文案修改而發(fā)起復(fù)雜的上線流程。

4 Tips可以干什么

下面是一個簡單的描述和演示，展現(xiàn)了接入文案管理平臺后你的系統(tǒng)可以通過如下的方式去修改頁面上的文案信息。

4.1 提示文案修改

有權(quán)限的用戶可以看到，在頁面的右下角有一個開關(guān)按鈕，打開按鈕頁面上會出現(xiàn)編輯的紅色按鈕，點開按鈕即可修改提示文案信息，提交保存后刷新頁面即可看到修改后的內(nèi)容。同時提示信息的容器UI展示也是平臺提供。

提示修改

4.2 頁面文案修改

頁面內(nèi)容文案的修改方式和提示信息修改一樣，但是不同的是多了一個發(fā)布的操作，因為頁面內(nèi)容要比提示的要求更嚴(yán)格一些，修改后會直接影響用戶的直接觀感。所以這里我們對線上和線下環(huán)境做了區(qū)分，未發(fā)布前只可以在線下環(huán)境看到，去后臺管理系統(tǒng)發(fā)布后線上即可同步。

頁面內(nèi)容文案修改

4.3 文案國際化

在演示中提供了中文和英文兩個版本的語言，點擊按鈕可以看到不同語言內(nèi)容的切換。

文案國際化

5 Tips是怎么做的

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

5.1 設(shè)計架構(gòu)圖

設(shè)計架構(gòu)圖

5.2 詳細(xì)設(shè)計

5.2.1 模塊劃分

由架構(gòu)圖可以平臺劃分為四個模塊：

• SDK：SDK作為平臺和第三方平臺連接的一個紐帶，將管理平臺和第三方平臺連接在一起，以js文件的形式嵌入第三方平臺，從Web-Server獲取文案數(shù)據(jù)展示在第三方平臺頁面中，并提供可視化界面供產(chǎn)品和開發(fā)可直接在自己平臺頁面中修改文案內(nèi)容；
• Web-Server：Web接口層，提供文案數(shù)據(jù)的增刪改查接口；
• Web-UI：文案管理平臺的管理界面，要接入的第三方平臺的管理人員在此可將自己平臺的文案管理接入我們的平臺中，之后文案修改的操作可在此進行；
• MongoDB：對各個接入平臺的文案信息進行存儲；

5.2.2 各模塊的詳細(xì)介紹

SDK

• 產(chǎn)出形態(tài)：該模塊最終打包為js文件，嵌入在第三方接入平臺系統(tǒng)中；
• 主要功能：將文案管理平臺和獲取文案內(nèi)容，將內(nèi)容顯示在系統(tǒng)頁面中，并提供UI界面供產(chǎn)品和開發(fā)可直接在自己系統(tǒng)中對文案進行修改，刷新頁面后即可生效；
• 具體實現(xiàn)：
  • 獲取第三方平臺傳入接入時創(chuàng)建的系統(tǒng)的名稱和當(dāng)前登錄的用戶名，獲取文案和數(shù)據(jù)以及對應(yīng)的用戶的權(quán)限；
  • 掃描頁面中的HTML標(biāo)簽，帶有特殊屬性的則根據(jù)當(dāng)前系統(tǒng)的語言和數(shù)據(jù)的類型顯示不同形態(tài)的文案：鼠標(biāo)懸浮提示、氣泡提示、頁面文案顯示；
  • 根據(jù)用戶創(chuàng)建的權(quán)限，判斷用戶是否有編輯修改權(quán)限；
  • 對于有權(quán)限的用戶顯示開關(guān)，打開打開可對文案內(nèi)容進行修改，保存后如果是提示信息即刻就生效，頁面直接顯示的文案則發(fā)布后即可生效；

Web-Server

• 主要功能：提供文案數(shù)據(jù)的增刪改查接口；
• 模塊劃分：
  • 服務(wù)管理：第三方接入平臺的信息管理；
  • 文案信息管理：第三方接入平臺的頁面文案管理；

Web-UI

• 主要功能：提供管理端的各種可視化操作；
  • 第三方平臺信息的管理：包括新增、修改和權(quán)限管理；
  • 文案信息的管理：包括文案信息的新增、修改，以及屏蔽功能；

6 Tips的優(yōu)點

上面講了這么多關(guān)于如何實現(xiàn)的內(nèi)容，相信大家對于我們做的是什么已經(jīng)有了一個整體的印象，那么我們?yōu)槭裁匆@么做呢？

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

所以我們最大的優(yōu)點就是：

• 節(jié)約時間成本：省略審批發(fā)布流程，秒級修復(fù)線上錯誤內(nèi)容；
• 賦能：讓非技術(shù)同學(xué)（運營或者產(chǎn)品、法務(wù)等，以下簡稱非技術(shù)同學(xué)）可以通過可視界面快捷的修改頁面內(nèi)容，而非之前的非技術(shù)同學(xué)提供文案，然后同步技術(shù)同學(xué)之后再去修改，這樣溝通成本大大增加。所以我們在降低溝通成本的同學(xué)和釋放了技術(shù)同學(xué)的時間。

7 結(jié)語

目前平臺已經(jīng)在公司多個內(nèi)部平臺使用，用于解決日常的文案修改，后續(xù)我們也會持續(xù)更新維護。如果看到這篇文章的你，將github上的demo跑起來了，歡迎評論留言，一起溝通交流。
Github：https://github.com/didi/tips
歡迎 fork & star