对中国开发者最具吸引力的科技企业有哪些?快来为你 pick 的企业投票! 了解详情
写点什么

手把手教你打造属于自己团队的前端小报系统

2021 年 4 月 07 日

手把手教你打造属于自己团队的前端小报系统

前言


经常关注我们政采云前端团队的同学, 对下面这张图应该不陌生~



每周五下午我们会定时推送一期前端小报,里面汇集了一些精选的前端文章~


下面这张图就是 政采云前端小报 的官方站点的截图,这个站点里面有我们历史每期的汇总~



至今前端小报已经 93 期,汇聚了 1000+ 文章,覆盖了 50+ 大小分类,可谓是一个非常好的知识库了~


前端小报的由来


持续学习是每个工程师必备的素养,一个成长性的团队也同样需要这样一个持续学习的氛围。那么如何通过技术的手段来帮助团队培养持续学习的氛围呢?


政采云前端小报因此应运而生,它主要包含投稿、汇总沉淀、定时投递三大核心模块,这样的一个系统可以让大家轻松的将自己喜欢的文章分享到团队内部,并且将文章进行分类沉淀,营造团队的知识库,方便大家查阅,同时小报系统也会在每周五进行定时推送,方便大家了解最新的技术动向,前端小报系统是一个帮助我们营造团队内部分享和学习氛围的得力帮手~


那么这样的一个小报系统是如何实现的呢?


如何设计一个小报系统


投稿


相信大家看到好的文章的时候,总会有忍不住想分享给别人的冲动,一个简单易用的投递功能可以很方便的满足大家的分享欲望,将好的文章输入到团队,帮助其他同学~


一个简单容易的投稿功能,我们需要解决两件事情:


1、如何能在看到好文章时,满足分享的冲动

2、如何对投稿的文章进行归类收集,方便沉淀与查找


如果是一个单独的录入系统,手动录入,这种方式操作繁琐,很容易打消大家的热情,平时在浏览器看文章的时候,我们经常将好的文章加入书签收藏,一键操作,方便快捷。那么如何能像浏览器书签收藏文章一样方便的去投稿呢?


很容易想到通过浏览器的扩展能力去做这个事情,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 应用商店,我们是直接安装到本地, 下图为打包后的项目目录结构:



安装步骤:浏览器选择设置 —> 扩展程序 —> 加载已解压的扩展程序 —> 选择文件目录即可。同时,开发者模式记得打开。



汇总沉淀


很普通一个前端项目,这里不再过多陈述,主要是能够看到每一期文章和按照分类进行快速查找,并统一收录文章入口。其中,前端页面采用 SSR 服务端渲染实现。




整体设计


总结


前端小报系统虽然是个小系统 ,但是不论从功能设计,还是系统设计方面都奔着一个目标,努力推动团队的学习氛围,让团队同学持续的成长。希望通过本文分享能够给大家一些启发,如何从一个目标出发去拆解落地,去思考如何让工具的去更好的服务于人。



头图:Unsplash

作者:猴子

原文:https://mp.weixin.qq.com/s/YE_XEP38C3DeSEx-hHYQkA

原文:手把手教你打造属于自己团队的前端小报系统

来源:政采云前端团队 - 微信公众号 [ID:Zoo-Team]

转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2021 年 4 月 07 日 20:061

评论

发布
暂无评论
发现更多内容

Java 多线程

anuyyy

Java 多线程 Runnable 4月日更

算法训练营 - 学习笔记 - 第一周

心在飞

架构实战营 - 模块一作业

凯迪

架构实战营

3.4 Go语言从入门到精通:包管理工具之Go module

xcbeyond

golang go语言 go modules Go语言从入门到精通 4月日更

Hadoop 3.x 版本相对于 Hadoop 2.x的新特性

五分钟学大数据

hadoop 4月日更

8x Flow 业务建模法(二):再看什么是业务逻辑

胡皓

领域驱动设计 DDD 业务建模 8xFlow 业务逻辑

强化学习—DQN:不讲前世,就论今生

打工人!

深度学习 强化学习 深度强化学习 图解源码分析 DQN

华仔架构实战营 - 作业 - 模块1

曲元洪

架构实战营

区块链走红 江苏多行业应用迈入"可信时代"

CECBC区块链专委会

农产品

外网访问Ubuntu下的Tomcat

U+2647

tomcat ubuntu 4月日更

博客主题用腻了?来试试赛博朋克 2077 主题吧!

清秋

CMS Hexo 博客 4月日更

区块链:颠覆其外,守旧其中

CECBC区块链专委会

互联网

配置中的动态代码

顿晓

配置化开发 Function 4月日更 动态函数

sql执行顺序优化

大数据技术指南

sql 4月日更

华仔训练营第一次作业

方堃

架构实战营-模块1-作业

莫问

架构实战营

「架构师训练营 4 期」 第十三周 - 001&2

凯迪

架构师训练营 4 期

【极客大学】模块一作业

冬天的树

JavaScript 图片转文字,文字转语音

空城机

JavaScript 前端 4月日更 tesseract 图片转文字

第13周课后练习-数据应用(二)

潘涛

架构师训练营 4 期

零基础学Tableau系列 | 04—标靶图、甘特图、瀑布图

不温卜火

数据可视化 数据清洗 4月日更

第一课作业

杰语

[架构实战营][0期]模块1作业

张民

架构实战营

区块链开发主流语言和核心优势

CECBC区块链专委会

区块链

没有lrzsz,怎么传文件到服务器?

运维研习社

运维 工具

模块一,学习总结

俞立夫

架构实战营

架构实战营-模块一作业

俞立夫

架构实战营

模块一作业

Presley

如何做决策?

石云升

决策 28天写作 职场经验 管理经验 4月日更

Martian 3.3.3 发布,最低支持 JDK11

贝克街的天才

Java 开源 开源项目 开源社区 开源框架

架构实战营 模块 1 课后作业

eoeoeo

架构实战营

混合云之争的开端与终途

混合云之争的开端与终途

手把手教你打造属于自己团队的前端小报系统-InfoQ