写点什么

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

  • 2021-04-07
  • 本文字数:3189 字

    阅读完需:约 10 分钟

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

前言


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



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


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



至今前端小报已经 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-04-07 20:062927

评论 1 条评论

发布
用户头像
感谢分享,推荐一个好用的接口管理工具apipost,支持mac,windows,linux,多个平台。特别方便
2021-08-26 15:19
回复
没有更多了
发现更多内容

GrowingIO 大数据多维分析自动化测试实践

GrowingIO技术专栏

大数据 自动化测试 parewise

ARTS_20200529

凌轩

Java ARTS 打卡计划

Vol.10 Java 25岁了!

pyfn2030

Java jdk 编程语言 Java25周年

产业区块链:产业是本质,区块链是工具

CECBC

新基建 CECBC 区块链技术 中国电子

终于找到了一篇文章!通俗地讲解计算机工作原理

图灵社区

cpu 存储器 编译器 计算机工作原理

「首度揭秘」大规模HPC生产环境 IO 特征

焱融科技

sds io 高性能 存储 焱融科技

奈学干货分享:分布式CAP实践分析

奈学教育

分布式

工厂模式(三)泛型工厂的概念以及示例代码

LSJ

阿里巴巴为什么让初始化集合时必须指定大小?

王磊

Java 性能

神经网络中为什么不能将权重初始值设置为一样的值

王坤祥

神经网络 学习

幂等问题及解决方案

Joker

幂等 解决方案

10分钟了解Flink

代码诗人

备案问题汇总

云也退

网站 备案

2020智源-京东多模态对话挑战赛开战 产学研联合推动AI技术发展

DT极客

Mysql常用删除方式比较

云也退

MySQL

我们可能都误解了什么是情商

董一凡

情绪

卧槽,接到一个阎王的需求

码农神说

程序员

Android 通过opencv实现人脸识别,追踪

sar

android OpenCV 人脸识别

Weex开发:页面跳转以及Android端多应用选择窗口的处理

dstweihao

android Vue 大前端 跨平台 Weex

你有信息焦虑症吗?

Neco.W

学习 创业 知识体系

Spring源码

云淡风轻

spring 源码

从位图到布隆过滤器

王坤祥

位图 布隆过滤器

Nginx 入门及命令行操作

子杨

nginx 运维

基于 Markdown 的中文文档排版规范

Murphy

markdown 排版规范 GitHub GFM 物联网学前班

Django ListView DetailView等基于类的视图如何添加装饰器?

BigYoung

Python django LiveView 装饰器

Cassandra可调一致性的使用及原理

老任物联网杂谈

大数据 分布式 Cassandra 可调一致性

图片与标题的Ken Burns动效

寇云

CSS css3

架构师训练营0期开营

刁架构

架构师

kudmp介绍和安装

唯爱

Nginx 基础原理和命令行的真相

子杨

nginx 运维

为什么你要学习 Go?

司徒公子

编程语言 谷歌Google Go 语言

手把手教你打造属于自己团队的前端小报系统_语言 & 开发_政采云前端团队_InfoQ精选文章