Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

GitHub Actionsのバッジをリンク付きでREADMEに追加する

GitHub Actionsがリリースされしばらくし、結構使われているレポジトリが増えてきています。
さらに、 README にバッジを置いておくとそれだけで見栄えがよくなるのでオススメです。

スクリーンショット 2020-03-25 14.58.31.png

バッジをどこで取得できるかというと、対象のアクションに飛んで (https://github.com/<user>/<repo>/actions?<workflow>) Create status badge をクリックし Copy... ボタンを押すだけです。便利ですね。

スクリーンショット 2020-03-25 13.13.55.png

しかしながら、デフォルトでコピーしただけだとちょっと不便なところがあります。下に2つバッジがありますが、違いがわかりますでしょうか?
上がCopyしただけのバッジです。

test
test

クリックすると明白ですが、上は対象のアクションへのリンクになっていません。そのため、[<ここにコピーしたバッジ>](対象のアクションへのリンク) のように書いてリンクにしてあげる必要があります。

毎回これをするのは面倒なので、簡単なユーザースクリプトを用意しました。

UserScriptを実行する拡張が入っていれば、以下のリンクを開いて、Rowを押すだけでインストールできます。

https://gist.github.com/akameco/e69b8759c5fb173301eddc0da14c3462

中身としてこれだけです。

// ==UserScript==
// @name         add badge for action link
// @namespace    https://github.com/akameco
// @version      0.1
// @description  add badge for action link
// @author       akameco (https://github.com/akameco)
// @match        https://github.com/*/*/actions*
// @grant        none
// ==/UserScript==

const el = document.querySelector('#badge-markdown')
el.textContent = `[${el.textContent}](${location.href})`
akameco
シュレーディンガーの社会人.js
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away