原文记录: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 生成表格并同步到项目主页:
目的好像很符合我的需求!!通过查阅资料发现,内部原理即通过 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 编译)。
最后的主页文章列表效果就是这样:
总结
通过这次实践,我了解了 GitHub 的 Actions 能玩儿出很多的花儿,真是学到老,活到老还有很多的花儿可以去做,比如标题上再加上时间,如何固定某个博客等等等等,这些还可以继续挖掘
如何使用
在项目的 README 文件中你想要注入的地方加入:
`` 为pattern参数,可以自定义,生成的内容会自动注入到它们之间
在你自己仓库的 .github/workflows
目录下随便新建个 yml
格式文件, 把https://github.com/zhang0ZGC/zhang0ZGC/blob/master/.github/workflows/blog-list.yml 的内容复制到这个文件,注意需要修改的参数:
然后,写一个 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