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


这是第 62 篇不掺水的原创,想获取更多原创好文,请扫 上方二维码注重咱们吧~
本文首发于政采云前端团队博客:手把手教你打造归于自己团队的前端小报体系

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

前语

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

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

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

下面这张图便是政采云前端小报的官方站点的截图,这个站: S o 6 n 1 C点里边有咱们前史每期的汇总~

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

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

前端小报的由来

继续学习是每个工程师必备的本质,相同一个成长性的团队也相同需求这样一个继f v C ,续学习的气氛。那L 5 | 7 P 5 # , !么怎样经过技能的方法来协助团队培育继续= r h学习的气氛呢?

政采云前端小报因而应运而生,它首要包括r j ? ) z投稿、汇总堆积、守时投递三大中心模块,这样的一个体系可以让咱们轻松的将自己喜爱D u d G的文章同享到团队内部,而且将文0 T : : J { J d U章进行分类堆积,营建团队的知识库,便利咱们查阅,一起小报体系也会在每周五进行守 9 U j t W u p时推送,便利咱们了S O t s , ) U c解最新的技能意向,前端小报体系是一个协助咱们营建团队内部同享和学习气氛的得力辅佐~

那么X ? K ! 3 / xG j } o样的一个小报体系是怎样完毕的呢?

怎样规划一x M 1 8 9 5 4 / 3个小报体系

投稿

信任咱们看到好的文章的时分,总会有不由得想同享给他人的激动,一个简略易用的投递功用可以很便利的满意咱们的同享希望# } P I,将好的文章输入到团队,协助其他同学, i = J C Y y (~

一个简略易容的投稿功用,咱们需求处理两件作业:

1、怎样能在看到好文章时,满意同享的激动

2、怎样对投稿的文章进行归类搜集,便4 9 h R 1 V利堆积与查找

假定是一个单独的录入体系,手动录入,这种方法操作繁琐,很简单消除咱们的热心,平常在浏览器看文章的时分,咱们常常将好的文章参加书签保藏,一键操作,便利便利。那么怎样能像浏览器书签保藏文章相同便利f U L的去投稿呢A ~ : : b

很简单想到经过浏览器的扩展才调去做这个工e N + W X ~ A作,Chrome 插件就供给了这样的才调。

什么是 Chrome 插件

官方阐明:谷歌插件是一种小型的用于定制浏览器领会的程序。它可以运用户K K / q依据个人需求或偏好来定制 Chrome 的功用和行为,它们依据 Web 技能( HTML,JavaScript 和 CSS)构建。I L ) 9 I 4 /

说人话:开发一个 Web 项目,可以嵌入到 Chrome 浏览器中,一起可以经过一些特定的 Api 获取到一些才调,然后订制自己的插件功用。

怎样开发一个一键投稿的 Chromel f T g 插件

首要创立一个项目,开发一个投稿功用页面。

此项目和一般 Vue 项目仅有的差异是根目录多了一个 manifest.jp - ; w 1 ,son 文件。

手把手教你打造归于自己团队的前端小报体系
  • 创立 manh F [ 0 p }ifest.json:Chrome 经过辨认项目根目录是否有 manifest.jsonu { U件来辨认是否为 Chrome 插件。
{
/} e X M 5 1 g/ 中心代码
"nB l Xame":H c e ) R A A & C "Zoo!", // 扩展名
"browser_actioZ , Z v [ } r }n"C x h B: {
"default_popup": "./popup.html"  // 点击浏览器右上方插件小图标弹出的内容 html
},
"content! o =_scripts": [  // 可以在  Web 页面内作业的 jaH $ Qvascript 脚本
{
"matches": [
// 满意什么协议下进行调用
"http:/X 6 @ R 4/*/*",
"https://*/*"
],
"js": [
"./contentScripts/zdata.js" /7 H 4 , t/ 刺进到网页的 JS 文件途径 Z L R
],
"run_at: C 7 M @ j ? W": "document_start" // 在doc1 l X E R g /ument 加载时实施
}
]
}

这样插件! u L u n %被翻开时会默E r O j * V +许加载 popup.html 页面的内容,作用如图:

  • 怎样获取文章标题、简介、URL

插件自身其实不能获取到其时页面的标题,但 Chrome 插件供给一种可以在其时页面动态刺进固定 JS 脚本的才调,咱K v $ L ) I们可以依据这种机制向其时页面刺进一段 JS 脚本去获取页面的标题、简介和 URL,然后再经过音讯机制将获取到的内c ^ ) T 3 z p N 9容回来到插件中。

let host = this;
/g 4 E 7 x/ 获取其时窗口 id 
chrome.tabs.query({
act0 v D Z P g E n )ive: true,
currentT $ R ( l {Window: true
}, function5 W 0 n l X u V o (ta+ R a i E L l xbs) {
let tabId = tabs.length ? tabs[0].id : null;
// 向其时页面注入 JavaScript 脚本 
chrome.tad ? & c : Tbs.executeScript(tabId || null, {
file: './contentScripts/recommend.js'
}, function () {
// 向政策网页进行通讯,向 recommend.js 发送一个音讯 
chrome.tabs.sendMessage(tabId,/ A ( 9 i } {
message: 'GET_TOPIC_INFO',
}, function (response) {
// 获取到回来的文章 title 、url、description 
host.arv B 8ticle.title = responZ X s ^ Jse.title;
host.artic6 @ v % w | o ]le.link = response.link;
host.article.description = response.description;
})* D ( C ! * :;
});
});

recommend.js 监听音讯 ,经过 addListener 咱们可以监听来自 sendM$ m s e +essage 宣{ Y V g i – l布的音讯,在 sen% 4 , XdMessage 中定义 message 常量让咱们可以在接收音讯时对音讯进行差异。

let doc = document;
chrome.runtim6 R b J b [ Ue.onMessag? + p m Ne.addListeneM ^ } : v h (r(function (request,o ~ d p sender, sen6 [ ! bdResb 2 ^ 3 g zponse) {
if (request.message === 'GET_TOPIC_I@ I M W u BNFO') {
// 获取 title 
let title = document.getElementsByTagName('title')[0].textContent;
let desW m * @ WcriptionE{ ! Jl = doc.queA D o prySelectorAll('meta[name=description]')[0];
// 获取 描绘 
let deQ  ^ i 6 Rscrih Y { 5 1 _ + i Hption = descj N riptionEl ? descriptionEl.getAttribute('content') : title;
// 发送数据 
sendResponse({
title: title.to X x @ 5 arim(),
link: location.href,
description: description.trim()
});
} else if (request.message === 'SIGN_RELOAD') {
console.log('request, sender', requestz c ; ; V ^, sender);
}
});
  • 点击投稿时,需求将数据发送r , 0 W 6 H 0 z到服务端做存储
// 投稿按钮点击作业 
handleRecommendw v s T P @ N DArticle: function () {
let request;
request = ajax({
method: b 9 V 3 & Q B'postD C f R 6 T',
url: 'https://XXX/api/post', // 后端接口 
data: {
'title': this.article.title,
'; q ) bdesc': t4 w B E I I U + 4his.article.description,
'c? ^ M % 6 K hategory': this.article.categ- V d i 2 Q l B Mory[1] || '默许分类',
'link': this.article.link,
'referrer': this.article.r7  R eporter
}
});
}

作用图:

上面便是一个很轻量的 Chrome 插件的完毕了,依据这样的一个 Chromes } 8 插件,当咱们看到喜爱的文章时,就可以一键同享给团队的小伙伴了~

当文章多了之后,假定没有有用的处理,文章会堆积杂乱,反而让咱Z k P % 7 l @们失去了去学习的希望,那么咱们怎样对投稿的文章进行归类搜集,便利同学们查找自己需求的知识体系呢?

标签规划

  • 标签分s b @ | 9 ) S s A

在标签分类上其时花了一些时间去规划,难点首要是什么样的分类G ] a维度可以让投稿人快速找到对应的分类N + l c 5 ^ $,让查看人可以快速依据分类找到自己想要的文章, 以及怎样可以快速找到往期文章等。

这就要求咱们的分类需通俗易懂,且可以包括业务Z 0 S大部分文章的类型,终究咱们是从根底H M , 3 L、言语、架构、选型、东西、总结等多维度进行分类。

为了可以快速进行文章查找,这儿将分类查看功用也集成在 Chrome 插件中。

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

设备插件

插件制作完毕之后,其他同学就可以将你的插件设备包设备到浏览器中。由于墙的原因,这儿没有挑选将插件上传到 Chrome 运用商铺,咱们是2 ^ q a z E d直接设备到本地, 下图为打包后的项目目录K n e D Y 1 = 3结构:

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

设备进程:浏览器挑选设置 —&] Q q N % =gt; 扩展f [ G H O ) f M v程序 —> 加载已解压的扩展程序 —> 挑选文件目录即可。一起,开发者方法记住翻开。

关于 Chrome 扩展 插件的官方 详细文档请移步 链接 查看

汇总堆积

很一般一个前端项目,这儿不再过多陈说,首要是可以看到每一期文章和依照分类进( B K @ k ( D R 0行快速查找,并一起录入 文章进口。其间,前端页面选用 SSR 服务端烘托完毕。

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

守时投递

到这儿小报体系的前台展{ @ l Q _ X示页面现已完毕,那么怎样将每一期的优质文章更及时且便利的让同学可以阅读到呢,让咱们及时的_ $ X H去了解新技能,扩展视界。后来咱们想可以经过自Q ? s f I动触达,守时提示等方法将p a = F =期刊自动发送给团队同] @ l学。J N p t k A 因而在上述根底上单独规划 了一个推送服务,守时将每一周的小. , S m Y a H报推送到钉钉群和前端邮件组。

  • 经过钉钉群机器人,每周五将期刊发送到前端群里。概略见官方开发 手册
const pushToRobot = as,  Mync ({ data, title, nums }) => {
// 拼装发送数据格式 
const links = wrp 3 ~ _ t m Ta_ N A : f VpperFeedcard({$ P z O l data, nums });
// 发送数据到指定群 
return axios("httpl y 2 3 S ns://ol 3 I Xapi.dingtalk.com/robot/send?", {
method: "post",
params: {
access_token: "XXXX" //前端群 
},
data: {
feedCard: {
links
},
msgtype: "feedCard"
}
})
};
  • 经过邮件发送, 每周守时发送邮件到团队邮件组。
手把手教你打造归于自己团队的前端小报体系
// 创立邮件链接 
const nodemailer = require("nodemailer");
let transporter = nodJ c s t e A j Oemailer.createK J T q 0Transport({
service: "qiye.aliyun",
port: 2$ W A 5, // SMTP 端口 
host: "smtp.mxhichina.com",
secureConnection: t% { l O _ {rue, // 运用了 SSL 
auth: {
user: "xxx@cai4 e m # % a-inc.com",
pass: "xxx"
}
});
// 拼装发送内容 
let mailOptions = {
from: '"政采云前端小报" <liujian@cai-inc.com>', // sender address 
to: "ZooTeam@cai-inc.com", // list of receivers 
cc~ D k G Y + x y *: ["ZooTeam@cai-inc.com"],
html: '邮件内容' // ht` ? O X qml body 
};
/f z h {/ 邮件发送 
transporter.sendMail(mailOptions);
  • 守时发布掘金

有一天咱们的掘金运营小姐姐和我说,每周五快下班时都要进行文章发布q % s ^ p 6,太痛苦了,耽误我下班约a @ { { / N会,掘金为啥没有守时发送功用? 我说好吧,那咱们自己开发个守时发布功用吧,想知道怎样完毕掘金守时发布功用,可在谈论区留言谈论。

整体规划

总结

前端小报体系虽然是个小体系 ,可是不论从功用规划,仍是体系规划方面都奔着一个政策,极力推进团队的学习气氛,让团队同学继续的成长。希望经过本文同享可以给咱们一些启示,怎样从一个政策出发去拆解落地,去考虑怎样让东西的去更好的服务于人。

推荐阅读

分分钟教会你树立企业级的 npm 私有仓库

一份值得保藏的 Git 失常处理清单

招贤纳士

政采云前端团队(ZooTeam),一个年青赋有热心和创造力的前端团队,隶归于政采云产品研发部,Base 在风景如画的杭州。团队现有 50 余k F e个前端小伙伴,平均年龄 27 岁,近 3 成i ) o L =是全栈工程师,妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵,也有浙大、中科大、杭电等 ! a N v s校的应届新人。团队在日常的业务对接之外,还在物料体系、工程途径、树立途径、功用领会、– – C % j云端运用、数据剖析及可视化等e c o方向进行技能根究和实战,推进并落地了一系列的内部技能产品,继续根究前端技能体系的新间隔。j % A O 8 , V

假定你想改动一贯被事折腾,希望6 g C B 2 | ,开始能折腾事;假定你想改动一贯被告 b e诫需求多些主见,: 1 C _却无从破局;假定你想改动你有才调去做成那个作用,却不需求你;假定v p Y q ~ N L S你想改动你想做成的事需求( ] | u一个团队去支撑,但没你带i 3 x f w j 9 w `人的方位;假d B H Z如你想改动既定的节奏,将会是“ 5 年作业时间 3 年作业阅历”;假定你想改动原本领会不错,但总是有那一层窗户纸的迷糊… 假定你信任信任的力气,信任平凡人能作用非凡事,信任能遇到更好的自己。假定你希望参加到跟着! E } * D 4 k +业务腾飞的进程,亲I k } u q v M B手推进一个有着深化的业务了解、完善的技能体系、技{ _ n能发b k q S & s /明价值、影响力外溢的前端团队的成长进程,我觉得咱们该聊聊。任何时间,等着你写点什么,发) 1 ! L R YZooTeam@cai-inc.com

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

发表评论

提供最优质的资源集合

立即查看 了解详情