开源项目站点必备 & 交流区功能

大家好，我是小鑫同学。一位从事过 Android 开发、混合开发，现在长期从事前端开发的编程爱好者，我觉得在编程之路上最重要的是知识的分享，所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识，欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~

写作背景：

下面的两个截图分别来自两个开源项目，它们的文档都包含了同一个功能--聊天室，一起关注这个项目的开发者可以在一起交流关于这个项目的问题，很好的将开发者联系在了一起。

接下来我通过在我自建的导航网站【vp.it200.cn/】中来演示一下如何在自己的网站中增加这个聊天室的功能。

1. 开源项目【wechaty】：wechaty.js.org/
   

2. 开源项目【micro-app】：micro-zoe.github.io/micro-app/d…
   

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 是“-”。

结语：

今天这个聊天室功能的集成就介绍到这里，赶快为你的开源项目增加这么一个交流的空间吧~