From f6b6dccd72606c78311313ccb74113b0a1f25d64 Mon Sep 17 00:00:00 2001 From: EyreFree Date: Sat, 6 Apr 2019 17:13:43 +0800 Subject: [PATCH] =?UTF-8?q?GitHub=20=E9=A1=B9=E7=9B=AE=20README=20?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=E4=BD=BF=E7=94=A8=E6=9C=AC=E5=BC=80=E6=BA=90?= =?UTF-8?q?=E5=BA=93=E7=9A=84=20App?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/_posts/GitHub-ReadMe-Apps.markdown | 129 ++++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 source/_posts/GitHub-ReadMe-Apps.markdown diff --git a/source/_posts/GitHub-ReadMe-Apps.markdown b/source/_posts/GitHub-ReadMe-Apps.markdown new file mode 100644 index 0000000..6c41e55 --- /dev/null +++ b/source/_posts/GitHub-ReadMe-Apps.markdown @@ -0,0 +1,129 @@ +--- +layout: post +title: GitHub 项目 README 展示使用本开源库的 App +date: 2019-04-06 10:00:00 -05:00 +categories: Markdown +tag: GitHub +--- + +## 零、前言 + +1. 本文展示有引用关系的 App，所以仅针对 iOS / Android 库； +2. 本文依赖 AppSight 的数据实现所述功能，若您的 SDK 无法在 AppSight 检索到，则本文方式无法使用。 + +## 一、找到源数据 + +展示使用某库的 App，首先需要找到一个能够提供相应数据的数据源，这里我们依赖的 [AppSight](https://www.appsight.io)，这里以 [EFCountingLabel](https://github.com/EFPrefix/EFCountingLabel) 为例，我们在 上找到它对应的页面 [https://www.appsight.io/sdk/ef-counting-label](https://www.appsight.io/sdk/ef-counting-label)，打开后可看到相关引用数据，如下所示： + +![](https://user-gold-cdn.xitu.io/2019/4/6/169f0f80e72751bc?w=1288&h=917&f=png&s=200364) + +## 二、加载所有数据 + +数据有了，接下来我们可以用脚本爬取的方式获取想要的数据，这里为了便于调试，笔者使用了 JavaScript，在 Chrome 的 Console 里执行就可以直接获取我们想要的结果。 + +由于此处的引用数据是有分页的，那么爬取之前，我们先要写一段脚本来循环点击分页加载按钮，帮助我们自动加载所有的分页数据（如果数据量少的话意义不是很大，但是数据量多的话，这一步就很有必要了）。 + +在 SDK 页面，打开 Chrome 开发者工具中的 `JavaScript 控制台`，执行如下脚本即可： + +```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(); +``` + +## 三、生成 HTML 代码 + +所有分页数据加载完成（或者达到你需要的数量）后，继续在 `JavaScript 控制台`，执行如下脚本： + +```javascript +var using = document.getElementsByClassName('as-sec-apps-using')[0] +var items = using.getElementsByClassName('as-list-item-inner') +var result = "" +for(let i = 0, len = items.length; i < len; i++) { + if(i % 10 == 0 && i > 0) { + result = result + "" + } + 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 + "" +} +result = result + "
" +console.log(result) +``` + +可以获得对应的 App 信息的 HTML 代码，如下所示： + +![](https://user-gold-cdn.xitu.io/2019/4/6/169f1408e10d6030?w=1767&h=741&f=png&s=445066) + +获得的代码整理后为如下形式： + +```html + + + + + + + +
+ + + + + + + + + + + + + + + +
+``` + +## 四、嵌入 README 中 + +复制我们前面获得的 HTML 代码，直接插入到我们项目 README 的合适位置即可： + +![](https://user-gold-cdn.xitu.io/2019/4/6/169f1441fa3d0f42?w=1181&h=531&f=png&s=120336) + +## 五、效果展示 + +最后实际效果如下，也可以点击直接查看 [EFCountingLabel 的 README](https://github.com/EFPrefix/EFCountingLabel/blob/master/README.md) 进行预览： + +![](https://user-gold-cdn.xitu.io/2019/4/6/169f144d8c360486?w=995&h=521&f=png&s=156267) + +感兴趣的同学，快自己动手试一试吧，👻 + +--- + +再读一篇类似文章？ + +[GitHub Wiki 页面的添加和设置](https://www.eyrefree.org/2017/07/06/GitHub-Wiki-Introduction/) + +--- + +> 如有任何知识产权、版权问题或理论错误，还请指正。 +> https://www.eyrefree.org/2019/04/06/GitHub-ReadMe-Apps/ +> 如文中无特殊说明，本站均使用以下协议保护：[署名-非商业性使用-禁止演绎](http://creativecommons.org/licenses/by-nc-nd/3.0/cn/)