手把手教你打造屬於自己團隊的前端小報系統

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"經常關注我們政採雲前端團隊的同學， 對下面這張圖應該不陌生~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/07\/07d01318e29c7639d8e65bac3f29927b.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"每週五下午我們會定時推送一期前端小報，裏面彙集了一些精選的前端文章~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面這張圖就是 "},{"type":"link","attrs":{"href":"https:\/\/weekly.zoo.team\/","title":"xxx","type":null},"content":[{"type":"text","text":"政採雲前端小報"}]},{"type":"text","text":" 的官方站點的截圖，這個站點裏面有我們歷史每期的彙總~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c1\/c150a8c83b52f1b827b9ed56ae7e34c8.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"至今前端小報已經 93 期，匯聚了 1000+ 文章，覆蓋了 50+ 大小分類，可謂是一個非常好的知識庫了~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前端小報的由來"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"持續學習是每個工程師必備的素養，一個成長性的團隊也同樣需要這樣一個持續學習的氛圍。那麼如何通過技術的手段來幫助團隊培養持續學習的氛圍呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"政採雲前端小報因此應運而生，它主要包含投稿、彙總沉澱、定時投遞三大核心模塊，這樣的一個系統可以讓大家輕鬆的將自己喜歡的文章分享到團隊內部，並且將文章進行分類沉澱，營造團隊的知識庫，方便大家查閱，同時小報系統也會在每週五進行定時推送，方便大家瞭解最新的技術動向，前端小報系統是一個幫助我們營造團隊內部分享和學習氛圍的得力幫手~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼這樣的一個小報系統是如何實現的呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"如何設計一個小報系統"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"投稿"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相信大家看到好的文章的時候，總會有忍不住想分享給別人的衝動，一個簡單易用的投遞功能可以很方便的滿足大家的分享慾望，將好的文章輸入到團隊，幫助其他同學~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一個簡單容易的投稿功能，我們需要解決兩件事情："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1、如何能在看到好文章時，滿足分享的衝動"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2、如何對投稿的文章進行歸類收集，方便沉澱與查找"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果是一個單獨的錄入系統，手動錄入，這種方式操作繁瑣，很容易打消大家的熱情，平時在瀏覽器看文章的時候，我們經常將好的文章加入書籤收藏，一鍵操作，方便快捷。那麼如何能像瀏覽器書籤收藏文章一樣方便的去投稿呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很容易想到通過瀏覽器的擴展能力去做這個事情，Chrome 插件就提供了這樣的能力"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"什麼是 Chrome 插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/developer.chrome.com\/extensions","title":"xxx","type":null},"content":[{"type":"text","text":"官方解釋"}]},{"type":"text","text":" ：谷歌插件是一種小型的用於定製瀏覽器體驗的程序。它可以使用戶根據個人需要或偏好來定製  Chrome 的功能和行爲，它們基於 Web 技術（HTML，JavaScript 和 CSS）構建。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"說人話：開發一個 Web 項目，能夠嵌入到 Chrome 瀏覽器中，同時能夠通過一些特定的 Api 獲取到一些能力，從而訂製自己的插件功能"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"如何開發一個一鍵投稿的 Chrome 插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先創建一個項目，開發一個投稿功能頁面 。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此項目和普通 Vue 項目唯一的區別是根目錄多了一個 "},{"type":"codeinline","content":[{"type":"text","text":"manifest.json"}]},{"type":"text","text":" 文件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/3f\/3fc5ed5c64ace5764659bea6162cb8c4.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"創建 "},{"type":"codeinline","content":[{"type":"text","text":"manifest.json"}]},{"type":"text","text":"：Chrome 通過識別項目根目錄是否有 "},{"type":"codeinline","content":[{"type":"text","text":"manifest.json"}]},{"type":"text","text":" 文件來識別是否爲 Chrome  插件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{ \n \/\/ 核心代碼 \n \"name\": \"Zoo！\", \/\/ 擴展名 \n \"browser_action\": { \n \"default_popup\": \".\/popup.html\" \/\/ 點擊瀏覽器右上方插件小圖標彈出的內容 html \n }, \n \"content_scripts\": [ \/\/ 能夠在 Web 頁面內運行的 javascript 腳本 \n { \n \"matches\": [\n \/\/ 滿足什麼協議下進行調用 \n \"http:\/\/*\/*\", \n \"https:\/\/*\/*\" \n ], \n \"js\": [ \n \".\/contentScripts\/zdata.js\" \/\/ 插入到網頁的 JS 文件路徑 \n ], \n \"run_at\": \"document_start\" \/\/ 在document 加載時執行 \n } \n ] \n} "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這樣插件被打開時會默認加載 "},{"type":"codeinline","content":[{"type":"text","text":"popup.html"}]},{"type":"text","text":" 頁面的內容，效果如圖："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/4c\/4cf4bdc742b07b6a6204f508001aa4bf.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如何獲取文章標題、簡介、URL"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"插件本身其實不能獲取到當前頁面的標題，但 Chrome 插件提供一種能夠在當前頁面動態插入固定 JS 腳本的能力，我們可以根據這種機制向當前頁面插入一段 JS 腳本去獲取頁面的標題、簡介和 URL，然後再通過消息機制將獲取到的內容返回到插件中。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let host = this;\n\/\/ 獲取當前窗口 id \nchrome.tabs.query({\n active: true,\n currentWindow: true\n}, function (tabs) {\n let tabId = tabs.length ? tabs[0].id : null;\n \/\/ 向當前頁面注入 JavaScript 腳本 \n chrome.tabs.executeScript(tabId || null, {\n file: '.\/contentScripts\/recommend.js'\n }, function () {\n \/\/ 向目標網頁進行通信，向 recommend.js 發送一個消息 \n chrome.tabs.sendMessage(tabId, {\n message: 'GET_TOPIC_INFO',\n }, function (response) {\n \/\/ 獲取到返回的文章 title 、url、description \n host.article.title = response.title;\n host.article.link = response.link;\n host.article.description = response.description;\n });\n });\n}); "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"recommend.js"}]},{"type":"text","text":"  監聽消息 ，通過 addListener 我們可以監聽來自  sendMessage  發出的消息，在 sendMessage 中定義 message 常量讓我們可以在接收消息時對消息進行區分。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"let doc = document;\nchrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {\n if (request.message === 'GET_TOPIC_INFO') {\n \/\/ 獲取 title \n let title = document.getElementsByTagName('title')[0].textContent;\n let descriptionEl = doc.querySelectorAll('meta[name=description]')[0];\n \/\/ 獲取 描述 \n let description = descriptionEl ? descriptionEl.getAttribute('content') : title;\n \/\/ 發送數據 \n sendResponse({\n title: title.trim(),\n link: location.href,\n description: description.trim()\n });\n } else if (request.message === 'SIGN_RELOAD') {\n console.log('request, sender', request, sender);\n }\n}); "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"點擊投稿時，需要將數據發送到服務端做存儲"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"\/\/ 投稿按鈕點擊事件 \nhandleRecommendArticle: function () {\n  let request;\n  request = ajax({\n    method: 'post',\n    url: 'https:\/\/XXX\/api\/post', \/\/ 後端接口 \n    data: {\n      'title': this.article.title,\n      'desc': this.article.description,\n      'category': this.article.category[1] || '默認分類',\n      'link': this.article.link,\n      'referrer': this.article.reporter\n    }\n  });\n} "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"效果圖："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/52\/5260a11bf4b6e88d656b2e3a76d2d4fe.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面就是一個很輕量的 Chrome 插件的實現了，基於這樣的一個 Chrome 插件，當我們看到喜歡的文章時，就可以一鍵分享給團隊的小夥伴了~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當文章多了之後，如果沒有有效的管理，文章會堆積雜亂，反而讓大家失去了去學習的慾望，那麼我們如何對投稿的文章進行歸類收集，方便同學們有查找自己需要的知識體系呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"標籤設計"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/04\/041c55aa641fda75d15fb4a96a5405ef.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"標籤分類"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在標籤分類上當時花了一些時間去設計，難點主要是什麼樣的分類維度能夠讓投稿人快速找到對應的分類，讓查看人能夠快速根據分類找到自己想要的文章， 以及如何能夠快速找到往期文章等 。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這就要求我們的分類需通俗易懂，且能夠涵蓋業務大部分文章的類型，最後我們是從基礎、語言、架構、選型、工具、總結等多維度進行分類。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/f4\/f486116177a3e722447ddeabf4f95b6c.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了能夠快速進行文章查找，這裏將分類查看功能也集成在 Chrome 插件中"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/3a\/3a11e3dd131e2d648e614bde94790c71.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"安裝插件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"插件製作完成之後，其他同學就可以將你的插件安裝包安裝到瀏覽器中。因爲牆的原因，這裏沒有選擇將插件上傳到 Chrome 應用商店，我們是直接安裝到本地， 下圖爲打包後的項目目錄結構："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/3f\/3fc5ed5c64ace5764659bea6162cb8c4.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"安裝步驟：瀏覽器選擇設置 —> 擴展程序 —> 加載已解壓的擴展程序 —> 選擇文件目錄即可。同時，開發者模式記得打開。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/98\/983536a91d59ef914e9b947f40f8df10.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"彙總沉澱"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很普通一個前端項目，這裏不再過多陳述，主要是能夠看到每一期文章和按照分類進行快速查找，並統一收錄文章入口。其中，前端頁面採用 SSR 服務端渲染實現。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c1\/c150a8c83b52f1b827b9ed56ae7e34c8.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/84\/84af85bce5e0fa2e009292d1111bbf52.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"整體設計"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/53\/535b4f60f95485342f24a8984490370f.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"總結"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前端小報系統雖然是個小系統 ，但是不論從功能設計，還是系統設計方面都奔着一個目標，努力推動團隊的學習氛圍，讓團隊同學持續的成長。希望通過本文分享能夠給大家一些啓發，如何從一個目標出發去拆解落地，去思考如何讓工具的去更好的服務於人。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"頭圖：Unsplash"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作者：猴子"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：https:\/\/mp.weixin.qq.com\/s\/YE_XEP38C3DeSEx-hHYQkA"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：手把手教你打造屬於自己團隊的前端小報系統"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"來源：政採雲前端團隊 - 微信公衆號 [ID：Zoo-Team]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"轉載：著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。"}]}]}