开源项目站点必备&交流区功能
写作背景:
下面的两个截图分别来自两个开源项目,它们的文档都包含了同一个功能--聊天室,一起关注这个项目的开发者可以在一起交流关于这个项目的问题,很好的将开发者联系在了一起。
接下来我通过在我自建的导航网站【https://vp.it200.cn/】中来演示一下如何在自己的网站中增加这个聊天室的功能。
- 开源项目【wechaty】:https://wechaty.js.org/
- 开源项目【micro-app】:https://micro-zoe.github.io/micro-app/docs.html#/
GITTER:
【wechaty】和【micro-app】两个项目均采用了 Gitter 来实现的聊天室功能。Gitter 是一个聊天和网络平台,通过消息、内容和发现,帮助管理、发展和连接社区。且具有自由无限制、易于创建的特点特别适合开源项目的沟通交流。
创建一个的社区:
通过下面的两步操作就得到了一个自己的社区,我们看到社区的名字是「IT200@OSpoon/community」:
在社区下新建一个关联开源项目的房间:
可以勾选最后的那个选项会自动发起一个 PR 来修改 README,添加一个该房间的徽章方便开源项目的关注者发现这个聊天室。
快速得到集成脚本:
脚本生成:
如果你尝试打开过前面那两个开源项目的文档,你会发现它们的聊天室入口都在页面右下角且名称为【OPEN CHAT】,那我们是不是需要 COPY 一份这个样式呢?当然是不需要的,这里推荐使用Sidecar来生成配置。很简单的输入你的房间名称就可以生成,将配置 Copy 到你的开源项目站点中就可以完成配置。
集成到 VuePress2:
默认 vuepress 没有提供 index.html 文件,它是通过在 docs 目录下的 README.md 来生成的,vuepress支持解析 markdown 文件中的 vue 代码片段,所以我们上面生成的脚本可以通过在 Vue 的 onMounted 执行时动态来添加:
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
((window.gitter = {}).chat = {}).options = {
room: 'IT200-OSpoon/it200.cn'
};
const script=document.createElement('script');
script.src='https://sidecar.gitter.im/dist/sidecar.v1.js';
script.defer = true;
script.async = true;
document.head.appendChild(script);
})
</script>
注:可以看到我们在 onMounted 如增加脚本的时候 room 做了修改,这也是在集成时发现的一个问题,虽然在聊天室顶部显示的是@符号,但是我们实际的room 是“-”。
结语:
今天这个聊天室功能的集成就介绍到这里,赶快为你的开源项目增加这么一个交流的空间吧~
相关文章
- kkFileView在线文件预览项目学习&搭建
- KubeSphere 升级 && 安装后启用插件
- 7 Papers & Radios | 首个用于工业开发的自动代码生成系统;多模态图像合成与编辑综述
- ios8绘图方法小记touchesBegan&touchesMoved
- ASP.NET Core 6框架揭秘实例演示[31]:路由"高阶"用法
- 零零信安-D&D数据泄露报警日报【第48期】
- 00SEC-D&D数据泄露报警日报【第6期】
- 谷粒学院day0&day1——项目介绍与mybatis plus入门
- 站长'说'标书&跨年:刚刚发布的2019项目指南有秘密!有的标书一看立题就被Pass,什么样的立题评审专家喜欢?文末有大礼包呦~
- 项目介绍&机器学习及其应用 | 犀牛鸟精英人才计划首场课题宣讲会
- 最新 | CCF推荐国际学术刊物&国际学术会议-人工智能
- Rainbond 结合 Jpom 实现云原生 & 本地一体化项目管理
- virtual dom & mvvm详解编程语言
- AMP:Google 的新开源项目能让网页秒开
- quake amp DDOS攻击.c
- AMP与Oracle结合提升数据库性能($amp oracle)