目录

博客!友链!自动化!

有一天,我打开自己博客的友链墙,望着「洁白」的墙面,陷入了沉思。

等等,我好像没有写申请友链的方式!(所以只有几个铁哥们私聊我申请)

!!!
加,这就加,立刻,马上!

简单介绍一下

我的友链墙大概长这样:

友链墙
友链墙

分了若干组(一级标题),每组下有若干个友链卡片,每个友链卡片是一个自定义的 shortcode,格式如下: (注:为了防止 shortcode 这篇文章中被渲染,我加了两个 /

{{/< friend
name="iyear"
url="https://blog.ljyngup.com/"
logo="https://blog.ljyngup.com/usr/uploads/2021/09/2354485274.jpg"
word="记录本是反抗"
primary-color="default"
img-animation="rotate"
border-animation="shadow"
/>}}

整个友链墙就是一整个 Markdown 文件,大概长这样(隐藏了文件header和css引入声明):

# 分组1

<shortcode1>

<shortcode2>

# 分组2

<shortcode3>

手动添加友链

所以友链添加的过程为,小伙伴们通过某种方式告诉我这些信息,然后我更新友链 Markdown,触发 CI/CD。

但尴尬的地方在于:

  1. 友链页没开评论,无法通过评论的方式来告知
  2. 我的博客仓库是私有的,无法通过 Issue 的方式告知
  3. 我并没有写友链申请的任何文档,更别提那些字段细节了

赶紧都加上!!!

但是评论+手动改代码的方式在 DevOps 大行其道的时代,显得自己水平有点低了。

得整自动化,还得是白嫖的!

先贴效果吧!

想要添加友链的小伙伴需要做的

直接填写基于 GitHub Issue 的表单,然后躺平:

友链申请表单
友链申请表单

接下来 GitHub 大好人会自动帮我做的

  1. 解析表单内容,生成 shortcode
  2. 获取最新的友链 Markdown,根据分组将 shortcode 插入到对应的位置
  3. 把最新的 Markdown 更新以 PR 的形式提交到我的博客仓库
  4. 微软的 Azure DevOps 会自动帮我生成最新博客的预览链接。(GitHub也是微软家的)

上图!

自动编辑友链墙Markdown
自动编辑友链墙Markdown
PR和预览链接
PR和预览链接
博客预览
博客预览

我需要做的

检查一下预览链接,没问题就小手点一下"Merge Pull Request",然后躺平。

然后微软的 Azure DevOps 会自动帮我把最新的博客部署到微软的服务器上。

实现过程

我分了两个仓库,一个是博客仓库(Private),另外一个是友链仓库(Public)。

下面是流程图,其中两个红色的虚线框代表两个仓库。

流程图
流程图

使用说明 && 一些细节

使用说明:这是友链仓库地址,README 写得挺详细。

其实实现的过程中还有很多的细节,比如:

  1. 我的表单可以自定义分组,这就意味着需要写代码找到合适的位置。比如一个全新的分组插入到最后;一个已有的分组插入到当前分组的所有友链卡片的最后。
  2. 为了开源精神,为了能够我的成果给其他人复用,在 GitHub Actions 上下了很多功夫。同时支持友链和博客是一个仓库和两个仓库的情况;支持将本仓库作为模板然后自定义 Issue 表单针对友链文件修改代码;GitHub Action 不同情况下(跨仓库、同仓库)的权限问题。(其实我还没试,以前搞过类似的复杂的权限问题。希望别出什么问题,但愿,哈哈哈)。
  3. 把上面的第2点,写成文档(写文档才是最难的)。

友链墙合影

友链墙合影
友链墙合影

小彩蛋

其实我博客的「同行的伙伴们」分组,是双关~