GitHub 項目 README 展現使用本開源庫的 App

零、前言

1. 本文展現有引用關係的 App，因此僅針對 iOS / Android 庫；
2. 本文依賴 AppSight 的數據實現所述功能，若您的 SDK 沒法在 AppSight 檢索到，則本文方式沒法使用。

1、找到源數據

展現使用某庫的 App，首先須要找到一個可以提供相應數據的數據源，這裏咱們依賴的 AppSight，這裏以 EFCountingLabel 爲例，咱們在 上找到它對應的頁面 www.appsight.io/sdk/ef-coun…，打開後可看到相關引用數據，以下所示：

2、加載全部數據

數據有了，接下來咱們能夠用腳本爬取的方式獲取想要的數據，這裏爲了便於調試，筆者使用了 JavaScript，在 Chrome 的 Console 裏執行就能夠直接獲取咱們想要的結果。

因爲此處的引用數據是有分頁的，那麼爬取以前，咱們先要寫一段腳原本循環點擊分頁加載按鈕，幫助咱們自動加載全部的分頁數據（若是數據量少的話意義不是很大，可是數據量多的話，這一步就頗有必要了）。

在 SDK 頁面，打開 Chrome 開發者工具中的 JavaScript 控制檯，執行以下腳本便可：

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function main() {
	var using = document.getElementsByClassName('as-sec-apps-using')[0];
	do {
		if (document.getElementsByClassName('as-sec-loading')[0].style.cssText == "display: block;") {
			await sleep(1000);
		} else {
			if (using.getElementsByClassName('as-but as-but-more btn disabled')[0] == null) {
				using.getElementsByClassName('as-but as-but-more btn')[0].click();
				await sleep(1000);
			} else {
				break;
			}
		}
	} while (true);
}
main();
複製代碼

3、生成 HTML 代碼

全部分頁數據加載完成（或者達到你須要的數量）後，繼續在 JavaScript 控制檯，執行以下腳本：

var using = document.getElementsByClassName('as-sec-apps-using')[0]
var items = using.getElementsByClassName('as-list-item-inner')
var result = "<table><tr>"
for(let i = 0, len = items.length; i < len; i++) {
	if(i % 10 == 0 && i > 0) {
		result = result + "</tr><tr>"
	}
    let item = items[i]
    var icon = item.getElementsByClassName('as-icon')[0].src;
    var title = item.getElementsByClassName('as-label as-name')[0].innerHTML;
    var href = item.href
    result = result + "<td><a href=\'" + href + "\' title=\'" + title + "\'><img src=\'" + icon + "\'></a></td>"
}
result = result + "</tr></table>"
console.log(result)
複製代碼

能夠得到對應的 App 信息的 HTML 代碼，以下所示：

得到的代碼整理後爲以下形式：

<table>
  <tr>
    <td>
      <a href='https://www.appsight.io/app/toss-%ED%86%A0%EC%8A%A4' title='토스'>
        <img src='https://d3ixtyf8ei2pcx.cloudfront.net/icons/001/263/485/media/small.png?1530945069'>
      </a>
    </td>
    <td>
      <a href='https://www.appsight.io/app/%EC%87%BC%ED%95%91%EC%9D%84-%EB%9A%9D%EB%94%B1-%ED%8B%B0%EB%AA%AC' title='티몬 - 오늘은 또 어떤 딜?'>
        <img src='https://d3ixtyf8ei2pcx.cloudfront.net/icons/001/286/380/media/small.png?1534301992'>
      </a>
    </td>
    <td>
      <a href='https://www.appsight.io/app/%EB%B1%85%ED%81%AC%EC%83%90%EB%9F%AC%EB%93%9C' title='뱅크샐러드'>
        <img src='https://d3ixtyf8ei2pcx.cloudfront.net/icons/001/282/332/media/small.png?1533591669'>
      </a>
    </td>
    <td>
      <a href='https://www.appsight.io/app/climendo-basic' title='Climendo Basic'>
        <img src='https://d3ixtyf8ei2pcx.cloudfront.net/icons/000/304/533/media/small.png?1481531280'>
      </a>
    </td>
  </tr>
</table>
複製代碼

4、嵌入 README 中

複製咱們前面得到的 HTML 代碼，直接插入到咱們項目 README 的合適位置便可：

5、效果展現

最後實際效果以下，也能夠點擊直接查看 EFCountingLabel 的 README 進行預覽：

感興趣的同窗，快本身動手試一試吧，👻

---

再讀一篇相似文章？

GitHub Wiki 頁面的添加和設置

---

若有任何知識產權、版權問題或理論錯誤，還請指正。
juejin.im/post/5ca826… 轉載請註明原做者及以上信息。