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

第 62 篇原創好文～
本文首發於政採雲前端團隊博客： 手把手教你打造屬於本身團隊的前端小報體系

前言

常常關注咱們政採雲前端團隊的同窗， 對下面這張圖應該不陌生~

每週五下午咱們會定時推送一期前端小報，裏面聚集了一些精選的前端文章~

下面這張圖就是政採雲前端小報的官方站點的截圖，這個站點裏面有咱們歷史每期的彙總~

至今前端小報已經 93 期，匯聚了 1000+ 文章，覆蓋了 50+ 大小分類，可謂是一個很是好的知識庫了~

前端小報的由來

​ 持續學習是每一個工程師必備的素養，一樣一個成長性的團隊也一樣須要這樣一個持續學習的氛圍。那麼如何經過技術的手段來幫助團隊培養持續學習的氛圍呢？

​

政採雲前端小報所以應運而生，它主要包含投稿、彙總沉澱、定時投遞三大核心模塊，這樣的一個系統可讓你們輕鬆的將本身喜歡的文章分享到團隊內部，而且將文章進行分類沉澱，營造團隊的知識庫，方便你們查閱，同時小報系統也會在每週五進行定時推送，方便你們瞭解最新的技術動向，前端小報系統是一個幫助咱們營造團隊內部分享和學習氛圍的得力幫手~

那麼這樣的一個小報系統是如何實現的呢？

如何設計一個小報系統

投稿

相信你們看到好的文章的時候，總會有忍不住想分享給別人的衝動，一個簡單易用的投遞功能能夠很方便的知足你們的分享慾望，將好的文章輸入到團隊，幫助其餘同窗~

一個簡單易容的投稿功能，咱們須要解決兩件事情：

一、如何能在看到好文章時，知足分享的衝動

二、如何對投稿的文章進行歸類收集，方便沉澱與查找

​ 若是是一個單獨的錄入系統，手動錄入，這種方式操做繁瑣，很容易打消你們的熱情，平時在瀏覽器看文章的時候，咱們常常將好的文章加入書籤收藏，一鍵操做，方便快捷。那麼如何能像瀏覽器書籤收藏文章同樣方便的去投稿呢？

​ 很容易想到經過瀏覽器的擴展能力去作這個事情，Chrome 插件就提供了這樣的能力

什麼是 Chrome 插件

官方解釋：谷歌插件是一種小型的用於定製瀏覽器體驗的程序。它可使用戶根據我的須要或偏好來定製 Chrome 的功能和行爲，它們基於 Web 技術（ HTML，JavaScript 和 CSS）構建。

說人話：開發一個 Web 項目，可以嵌入到 Chrome 瀏覽器中，同時可以經過一些特定的 Api 獲取到一些能力，從而訂製本身的插件功能

如何開發一個一鍵投稿的 Chrome 插件

首先建立一個項目，開發一個投稿功能頁面 。

此項目和普通 Vue 項目惟一的區別是根目錄多了一個 manifest.json 文件。

• 建立 manifest.json：Chrome 經過識別項目根目錄是否有 manifest.json 文件來識別是否爲 Chrome 插件。

{   
  // 核心代碼 
  "name": "Zoo！", // 擴展名 
  "browser_action": {  
    "default_popup": "./popup.html"  // 點擊瀏覽器右上方插件小圖標彈出的內容 html 
  }, 
  "content_scripts": [  // 可以在  Web 頁面內運行的 javascript 腳本 
    { 
      "matches": [
        // 知足什麼協議下進行調用 
        "http://*/*",  
        "https://*/*" 
      ], 
      "js": [ 
        "./contentScripts/zdata.js" // 插入到網頁的 JS 文件路徑 
      ], 
        "run_at": "document_start" // 在document 加載時執行 
    } 
  ] 
}

這樣插件被打開時會默認加載 popup.html 頁面的內容，效果如圖：

• 如何獲取文章標題、簡介、URL

插件自己其實不能獲取到當前頁面的標題，但 Chrome 插件提供一種可以在當前頁面動態插入固定 JS 腳本的能力，咱們能夠根據這種機制向當前頁面插入一段 JS 腳本去獲取頁面的標題、簡介和 URL，而後再經過消息機制將獲取到的內容返回到插件中。

let host = this;
// 獲取當前窗口 id 
chrome.tabs.query({
  active: true,
  currentWindow: true
}, function (tabs) {
  let tabId = tabs.length ? tabs[0].id : null;
  // 向當前頁面注入 JavaScript 腳本 
  chrome.tabs.executeScript(tabId || null, {
    file: './contentScripts/recommend.js'
  }, function () {
    // 向目標網頁進行通訊，向 recommend.js 發送一個消息 
    chrome.tabs.sendMessage(tabId, {
      message: 'GET_TOPIC_INFO',
    }, function (response) {
      // 獲取到返回的文章 title 、url、description 
      host.article.title = response.title;
      host.article.link = response.link;
      host.article.description = response.description;
    });
  });
});

recommend.js 監聽消息 ，經過 addListener 咱們能夠監聽來自 sendMessage 發出的消息，在 sendMessage 中定義 message 常量讓咱們能夠在接收消息時對消息進行區分。

let doc = document;
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.message === 'GET_TOPIC_INFO') {
    // 獲取 title 
    let title = document.getElementsByTagName('title')[0].textContent;
    let descriptionEl = doc.querySelectorAll('meta[name=description]')[0];
    // 獲取 描述 
    let description = descriptionEl ? descriptionEl.getAttribute('content') : title;
    // 發送數據 
    sendResponse({
      title: title.trim(),
      link: location.href,
      description: description.trim()
    });
  } else if (request.message === 'SIGN_RELOAD') {
    console.log('request, sender', request, sender);
  }
});

• 點擊投稿時，須要將數據發送到服務端作存儲

// 投稿按鈕點擊事件 
handleRecommendArticle: function () {
  let request;
  request = ajax({
    method: 'post',
    url: 'https://XXX/api/post', // 後端接口 
    data: {
      'title': this.article.title,
      'desc': this.article.description,
      'category': this.article.category[1] || '默認分類',
      'link': this.article.link,
      'referrer': this.article.reporter
    }
  });
}

效果圖：

上面就是一個很輕量的 Chrome 插件的實現了，基於這樣的一個 Chrome 插件，當咱們看到喜歡的文章時，就能夠一鍵分享給團隊的小夥伴了~

當文章多了以後，若是沒有有效的管理，文章會堆積雜亂，反而讓你們失去了去學習的慾望，那麼咱們如何對投稿的文章進行歸類收集，方便同窗們有查找本身須要的知識體系呢？

標籤設計

• 標籤分類

在標籤分類上當時花了一些時間去設計，難點主要是什麼樣的分類維度可以讓投稿人快速找到對應的分類，讓查看人可以快速根據分類找到本身想要的文章， 以及如何可以快速找到往期文章等 。

這就要求咱們的分類需通俗易懂，且可以涵蓋業務大部分文章的類型，最後咱們是從基礎、語言、架構、選型、工具、總結等多維度進行分類。

爲了可以快速進行文章查找，這裏將分類查看功能也集成在 Chrome 插件中

安裝插件

插件製做完成以後，其餘同窗就能夠將你的插件安裝包安裝到瀏覽器中。由於牆的緣由，這裏沒有選擇將插件上傳到 Chrome 應用商店，咱們是直接安裝到本地， 下圖爲打包後的項目目錄結構：

安裝步驟：瀏覽器選擇設置 —> 擴展程序 —> 加載已解壓的擴展程序 —> 選擇文件目錄便可。同時，開發者模式記得打開。

關於 Chrome 擴展 插件的官方 詳細文檔請移步 連接 查看

彙總沉澱

很普通一個前端項目，這裏再也不過多陳述，主要是可以看到每一期文章和按照分類進行快速查找，並統一收錄 文章入口。其中，前端頁面採用 SSR 服務端渲染實現。

定時投遞

到這裏小報系統的前臺展現頁面已經完成，那麼如何將每一期的優質文章更及時且方便的讓同窗可以閱讀到呢，讓你們及時的去了解新技術，擴充視野。後來咱們想能夠經過主動觸達，定時提醒等方式將期刊主動發送給團隊同窗。 所以在上述基礎上單獨設計 了一個推送服務，定時將每一週的小報推送到釘釘羣和前端郵件組。

• 經過釘釘羣機器人，每週五將期刊發送到前端羣裏。詳情見官方開發 手冊

const pushToRobot = async ({ data, title, nums }) => {
  // 組裝發送數據格式 
  const links = wrapperFeedcard({ data, nums });
  // 發送數據到指定羣 
  return axios("https://oapi.dingtalk.com/robot/send?", {
    method: "post",
    params: {
      access_token: "XXXX" //前端羣 
    },
    data: {
      feedCard: {
        links
      },
      msgtype: "feedCard"
    }
  })
};

• 經過郵件發送， 每週定時發送郵件到團隊郵件組。

// 建立郵件連接 
const nodemailer = require("nodemailer"); 
let transporter = nodemailer.createTransport({ 
  service: "qiye.aliyun", 
  port: 25, // SMTP 端口 
  host: "smtp.mxhichina.com", 
  secureConnection: true, // 使用了 SSL 
  auth: { 
    user: "xxx@cai-inc.com", 
    pass: "xxx" 
  } 
}); 
// 組裝發送內容 
let mailOptions = { 
  from: '"政採雲前端小報" <liujian@cai-inc.com>', // sender address 
  to: "ZooTeam@cai-inc.com", // list of receivers 
  cc: ["ZooTeam@cai-inc.com"], 
  html: '郵件內容' // html body 
}; 
// 郵件發送 
transporter.sendMail(mailOptions);

• 定時發佈掘金

有一天咱們的掘金運營小姐姐和我說，每週五快下班時都要進行文章發佈，太痛苦了，耽誤我下班約會，掘金爲啥沒有定時發送功能？ 我說好吧，那我們本身開發個定時發佈功能吧，想知道如何實現掘金定時發佈功能，可在評論區留言討論。

總體設計

總結

前端小報系統雖然是個小系統 ，可是不論從功能設計，仍是系統設計方面都奔着一個目標，努力推進團隊的學習氛圍，讓團隊同窗持續的成長。但願經過本文分享可以給你們一些啓發，如何從一個目標出發去拆解落地，去思考如何讓工具的去更好的服務於人。

招賢納士

政採雲前端團隊（ZooTeam），一個年輕富有激情和創造力的前端團隊，隸屬於政採雲產品研發部，Base 在風景如畫的杭州。團隊現有 50 餘個前端小夥伴，平均年齡 27 歲，近 3 成是全棧工程師，妥妥的青年風暴團。成員構成既有來自於阿里、網易的「老」兵，也有浙大、中科大、杭電等校的應屆新人。團隊在平常的業務對接以外，還在物料體系、工程平臺、搭建平臺、性能體驗、雲端應用、數據分析及可視化等方向進行技術探索和實戰，推進並落地了一系列的內部技術產品，持續探索前端技術體系的新邊界。

若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變既定的節奏，將會是「5 年工做時間 3 年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手推進一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com