我是如何把Git Releases的更新日志放到我的项目中的

我们经常可以在一些开源社区看到他们的更新日志，比如下面这样的：

这个日志是可以需要在github中创建一个realeses，填写相关的更新信息即可。

我最近在做一个开源的后台管理系统 ，我想着能不能把这个日志展示在我的后台管理系统中呢？

比如下面这样：

你也可以看线上的预览地址：vivace-admin-vue.vercel.app/#/index

后来我发现了github提供了相关的api，文档自行查看：docs.github.com/zh/rest/rel…。当然还有其他各种好玩的api可以自行去探索。

它需要两个参数：owner和repo，也就是仓库的所有和仓库名字，示例如下：

https://api.github.com/repos/xiumubai/vivace-admin-vue/releases

注意：api.github.com为github api得统一网关地址。

当我们在浏览器中访问的时候它会返回这么一个JSON

其中的body正是我们需要的日志信息。可以看到是MarkDown的模式，我们只需要把body用一个Markdown插件展示在页面上不就行了吗？

现在我们知道了这个日志信息怎么拿了，也知道了怎么在页面上展示了，那接下来不是有手就行了？

创建一个token：github.com/settings/to…。记得保存下来，下次就看不见了。

安装octokit：

pnpm install octokit

octokit是github专门提供的用来请求api的一个库，类似于axios一样。

使用octokit发个请求，把数据拿到：

<script setup lang="tsx">
import dayjs from 'dayjs'
import { Octokit } from 'octokit'
import { onMounted, ref } from 'vue'
const list = ref()

onMounted(async () => {
  const octokit = new Octokit({
    auth: `填写你自己的token`,
  })
  const result = await octokit.request(
    'GET /repos/xiumubai/vivace-admin-vue/releases',
  )
  list.value = result.data.map((v: any) => {
    return {
      content: v.body,
      timestamp: dayjs(v.published_at).format('YYYY/MM/DD hh:mm:ss A'),
    }
  })
})
</script>

然后就是日志的展示，这里我用的md-editor-v3这个插件。

实现代码如下：

<template>
  <el-card shadow="hover" class="card-item log">
    <template #header>
      <h3>更新动态</h3>
    </template>
    <el-scrollbar height="324px">
      <el-timeline v-show="list?.length > 0">
        <el-timeline-item
          v-for="(item, index) in list"
          :key="index"
          :timestamp="item.timestamp"
          type="primary"
          placement="top"
        >
          <MdPreview :editorId="item.id" :modelValue="item.content" />
        </el-timeline-item>
      </el-timeline>
      <el-empty v-show="list?.length === 0" />
    </el-scrollbar>
  </el-card>
</template>
<script>
  import { MdPreview } from 'md-editor-v3'
	import 'md-editor-v3/lib/preview.css'
</script>

到此为止，我们就实现了realeases日志的动态获取了。

本文效果预览地址：vivace-admin-vue.vercel.app/#/index。

🔥🔥🔥 本文是白哥开源社区系列文章，正在火热进行中，欢迎大家参与，详情请查看：www.yuque.com/xiumubai/op…