通过 Github 的 Actions 自动将 Issues 中的文章列表同步到主页 README

GitHub Actions

原文记录：https://github.com/zhang0ZGC/zhang0ZGC/issues/11

背景

不知道多久前，github出了一个新功能：可以使用与用户名同名的仓库的方式来个性化你的主页，仓库下的 README.md 文件中的内容会出现在你的主页，很赞的一项功能❤。

然后这两天看到一位大佬写的博文：如何自动同步博客到 GitHub 主页？，主要介绍了怎么使用 GitHub 的 Actions 自动同步博客列表到 GitHub 主页，原理就是定时去读取目标博主的 RSS 订阅源，然后生成列表写入仓库的 README 文件。

而我这个小菜鸡也在努力地学习知识，并使用 GitHub 的 Issues 来记录我，因此我突然意识到：是不可以自动把我的 Issues 文章列表同步到主页去呢。。。

实现

经过查资料，我找到了一个库：https://github.com/seed-of-apricot/issue-list-readme。他可以将指定 labels 的 issues 生成表格并同步到项目主页：

image

目的好像很符合我的需求！！通过查阅资料发现，内部原理即通过 Actions 自动触发，当发现某个 issue 被打上标签或者取消标签时，通过调用 GitHub 的API，获取用户指定仓库的issues列表，然后重新生成表格。

我的目标跟原项目有所不同，因此我 fork 了这个项目到 zhang0ZGC/issue-list-readme，要实现我想要的效果，有以下条件：

• 当我给某个 Issue 打上 Blog 标签的时候，需要把这个 Issue 同步到主页，而取消这个标签，把它从主页撤下来
• 只能作者是我的时候，Issue 才能出现在列表
• 我只想显示最近 10 条内容

pull下来后我按照项目生成表格的逻辑，新建了一个生成列表的文件，逻辑其实很简单，就是遍历一下 issues 取出标题跟url，然后生成 文档片段：

import * as core from '@actions/core';
import { Octokit } from '@octokit/rest';

const createTitleListContents = async (
  issues: Octokit.IssuesListForRepoResponse
) => {
  try {
    const array = issues.map((item, index: number) => {
      return `${index + 1}. [${item.title}](${item.html_url})`;
    });
    const markDownText = array.join('\n');

    return markDownText;
  } catch (error) {
    core.setFailed(error.message);
    throw error.message;
  }
};
export default createTitleListContents;

@actions/core 和 @octokit/rest 是用来处理 github相关资源的库，有了他们，我们可以很容易使用 github 的各种资源。

为了能满足我的需求，我扩充了参数将获取用户 issues 的接口所有参数都加入进来(File diff)，根据需要可以生成不同的输出。当然我页加了一个 layout 参数，用户也可以使用原项目的表格布局。

改完了以后发现，并不能通过build命令生成 dist/main.js 文件，额。。好像原作者没有把代码上传全而是直接上传了打包后的文件，因此我给项目加上了 webpack 及 babel，终于可以打包成功了。（原项目中使用了 ts ，并添加了 tsc 编译，不过打包出的文件并不能用，可能还有配置要改，有时间试一下怎么直接通过 tsc 编译）。

最后的主页文章列表效果就是这样：

image

总结

通过这次实践，我了解了 GitHub 的 Actions 能玩儿出很多的花儿，真是学到老，活到老还有很多的花儿可以去做，比如标题上再加上时间，如何固定某个博客等等等等，这些还可以继续挖掘

如何使用

在项目的 README 文件中你想要注入的地方加入：

`` 为pattern参数，可以自定义，生成的内容会自动注入到它们之间

在你自己仓库的 .github/workflows 目录下随便新建个 yml 格式文件， 把https://github.com/zhang0ZGC/zhang0ZGC/blob/master/.github/workflows/blog-list.yml 的内容复制到这个文件，注意需要修改的参数：

image

然后，写一个 Issue，并给这个 Issue 打上 BLOG 标签（需要先新建一个label），就会自动同步到 README。

可以自己定义参数及搜索条件，详细的参数参阅 https://github.com/zhang0ZGC/issue-list-readme/blob/master/action.yml 或者 GitHub 的 issues 接口文档( https://docs.github.com/cn/rest/reference/issues#list-repository-issues )，有时间我就把项目的 README 文档页更新一下吧~~

REF

• 如何自动同步博客到 GitHub 主页？
• GitHub Docs - List repository issues
• Repo - seed-of-apricot/issue-list-readme
• Repo - zhang0ZGC/issue-list-readme