GitHub Actions
背景
不知道多久前，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 文件中你想要注入的地方加入：
<!-- issueTable -->
<!-- issueTable -->
`` 为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 文档页更新一下吧~~
网友评论