Open source project site must-have & communication area function

写作背景：

The two screenshots below are from two open source projects,Their documentation both contain the same function--聊天室,Developers who follow the project together can exchange questions about the project together,Great for connecting developers together.

Next I go through the navigation site in my self-built【https://vp.it200.cn/】Come to demonstrate how to increase the function of this chat room in your own website.

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

2. 开源项目【micro-app】： https://micro-zoe.github.io/micro-app/docs.html#/

GITTER：

【wechaty】和【micro-app】Both projects were adopted Gitter to achieve the chat room function.Gitter 是一个聊天和网络平台,通过消息、内容和发现,帮助管理、发展和连接社区.And with freedom and unlimited、The easy-to-create feature is especially suitable for communication of open source projects.

create a community：

Through the following two steps, you will get a community of your own,We see that the name of the community is「[email protected]/community」：

Create a new room associated with the open source project under the community：

You can check the last option to automatically initiate one PR 来修改 README,Adding a badge to the room makes it easier for followers of open source projects to discover the chat room.

Get integrated scripts quickly：

脚本生成：

If you try to open the documents of the previous two open source projects,You will find their chat room entrances are in the bottom right corner of the page with the name 【OPEN CHAT】,So do we need it COPY A copy of this style？当然是不需要的,这里推荐使用Sidecar来生成配置.It is very simple to enter your room name to generate,将配置 Copy Go to your open source project site to complete the configuration.

集成到 VuePress2：

默认 vuepress 没有提供 index.html 文件,它是通过在 docs 目录下的 README.md 来生成的,vuepress支持解析 markdown 文件中的 vue 代码片段,So the script we generated above can be passed in Vue 的 onMounted Dynamically added at execution time：

<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 Such as when adding scripts room 做了修改,This is also a problem found when integrating,Although it is displayed at the top of the chat [email protected]符号,But we are practicalroom 是“-”.

结语：

Today, the integration of this chat room function is introduced here,Hurry up and add such a communication space to your open source project~