为揭秘CSDN谁有100万粉丝？我连夜研发了粉丝数排行榜插件，通过 dalao 一键即可唤醒

曾经终败给现在 2022-10-10 11:23 103阅读 0赞

> 橡皮擦，做好技术接待工作

本博客起源于 5A 技术俱乐部的一次闲聊，大家在讨论 CSDN 粉丝最多的作者是谁？

恰巧这题有解，接下来，橡皮擦将通过实现 CSDN 插件扩展的方式，为你揭秘 CSDN 哪些坐拥 10W+粉丝的大作者。

## 创建插件 ##

本插件扩展基于 CSDN 开发助手研发，即 [https://plugin.csdn.net/][https_plugin.csdn.net]，开发之前，你需要先安装一个。

> 安装了之后，再访问 CSDN 就没有任何广告打扰了，这操作不得不夸赞一下，用流行的话说就是我杀我自己。

![为揭秘CSDN谁有100万粉丝？我连夜研发了一款粉丝数排行榜插件，通过 dalao 一键即可唤醒][CSDN_100_ dalao]  
**从配置开始，安装开发者助手后，先选择插件扩展**

![为揭秘CSDN谁有100万粉丝？我连夜研发了一款粉丝数排行榜插件，通过 dalao 一键即可唤醒][CSDN_100_ dalao 1]  
在弹窗的窗口中选择，新增插件，即可进入插件添加页面。

开发文档参考 [https://csdn-plugin.gitcode.host/csdn-chrome-plugin/extend/index.html][https_csdn-plugin.gitcode.host_csdn-chrome-plugin_extend_index.html]，具体语法橡皮擦不再细说，直接进入代码编写时间。

添加插件弹窗选择 `本地代码`。

![为揭秘CSDN谁有100万粉丝？我连夜研发了一款粉丝数排行榜插件，通过 dalao 一键即可唤醒][CSDN_100_ dalao 2]  
插件依赖的是前端技术栈，如果你希望编写更强大的插件，围绕 CSS 和 JS 学习即可。

本次要实现的是 CSDN 粉丝数排行榜，目标展示前 10 即可。页面布局参考周榜 `https://blog.csdn.net/rank/list/weekly` 实现。

下图触发关键词开始设置的为 `likes`，后续因存在重复修改为 `dalao` 。  
![为揭秘CSDN谁有100万粉丝？我连夜研发了一款粉丝数排行榜插件，通过 dalao 一键即可唤醒][CSDN_100_ dalao 3]

## 编写代码 ##

切换到 HTML 页面，参考 CSDN 周榜 HTML 页面进行代码提取，具体代码如下，编写过程中，可随时切换到预览选项卡，查看实时效果。

<html>
      <head>
        <title>粉丝数排行榜</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
      </head>
      <body>
        <div class="floor-rank-total">
          <div class="floor-rank-total-item">
            <div class="total-content">
              <span class="number rank-index-icon" style="background-position: 0px 0px" ></span>
              <a target="_blank" href="https://blog.csdn.net/hihell">
                <img src="https://profile.csdnimg.cn/6/E/2/3_hihell" alt="" class="author" /></a>
              <div class="total-box">
                <dl>
                  <dd>
                    <a target="_blank" href="https://blog.csdn.net/hihell" >梦想橡皮擦</a >
                    <img src="https://csdnimg.cn/release/cmsfe/public/img/expertNew.44860fbe.png" alt="" />
                    <img src="https://csdnimg.cn/release/cmsfe/public/img/vipNew.b81a61be.png" alt="" />
                    
                  </dd>
                  <dt>
                    粉丝数
                    <span style="margin-left: 8px; margin-right: 24px">7W+</span>
                    博客等级
                    <img src="https://csdnimg.cn/identity/blog9.png" alt="" style="margin-left: 8px; margin-right: 24px" />
                  </dt>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

加载 HTML 代码之后，页面呈现如下效果。  
![为揭秘CSDN谁有100万粉丝？我连夜研发了一款粉丝数排行榜插件，通过 dalao 一键即可唤醒][CSDN_100_ dalao 4]  
出现该页面表示页面元素已经准备好，但 CSS 样式丢失，接下来的工作就是拷贝 CSDN 周榜的 CSS 样式到本地代码。

经过一番查找，得到样式表链接 `https://csdnimg.cn/release/cmsfe/public/css/tpl/blog-rank/index.6d05d9f2.css` ，你可以直接在 HTML 代码中引入，也可以复制到上图 CSS 选项卡中。

CSS 加载成功，页面变为如下样式。

后面的工作就变得非常简单了，通过 Python 爬虫采集 CSDN 用户数据，获取粉丝数最多的 10 位大佬，爬虫代码不公开了，想要学习的可以订阅 [《Python 爬虫 100 例专栏》][Python _ 100]

![为揭秘CSDN谁有100万粉丝？我连夜研发了一款粉丝数排行榜插件，通过 dalao 一键即可唤醒][CSDN_100_ dalao 5]

## 结果展示 ##

经过一番分析，橡皮擦得到了如下排行，CSDN 粉丝关注排行榜 TOP10 的作者排序如下：

![为揭秘CSDN谁有100万粉丝？我连夜研发了一款粉丝数排行榜插件，通过 dalao 一键即可唤醒][CSDN_100_ dalao 6]  
为了显示出橡皮擦自己来，我在涛哥下面放了一个序号为 14 的我自己。

![为揭秘CSDN谁有100万粉丝？我连夜研发了一款粉丝数排行榜插件，通过 dalao 一键即可唤醒][CSDN_100_ dalao 7]

> TOP10 粉丝全部在 10W+，不过测试中，发现部分作者已经不在更新文章了，后续部队，我们有机会了。

## 写在后面 ##

该插件通过 CSDN 开发者工具提供的搜索栏快速唤醒，数据**每 2 周**更新一次，大家可以持续关注。

![为揭秘CSDN谁有100万粉丝？我连夜研发了一款粉丝数排行榜插件，通过 dalao 一键即可唤醒][CSDN_100_ dalao 8]

> 今天是持续写作的第 172 / 200 天。可以点赞、评论、收藏啦。

**相关阅读**

1.  [10 行代码集 2000 张美女图，Python 爬虫 120 例，再上征途][10 _ 2000 _Python _ 120]
2.  [通过 Python 爬虫，发现 60%女装大佬游走在 cosplay 领域][Python _ 60_ cosplay]
3.  [Python 千猫图，简单技术满足你的收集控][Python]
4.  [熊孩子说“你没看过奥特曼”，赶紧用 Python 学习一下，没想到][Python 1]
5.  [技术圈的【多肉小达人】，一篇文章你就能做到][Link 1]
6.  [我用 Python 连夜离线了 100G 图片，只为了防止网站被消失][Python _ 100G]
7.  [对 Python 爬虫编写者充满诱惑的网站,《可爱图片网》,瞧人这网站名字起的][Python 2]
8.  [5000 张高清壁纸大图（手机用），用 Python 在法律的边缘又试探了一把][5000 _ Python]

[https_plugin.csdn.net]: https://plugin.csdn.net/
[CSDN_100_ dalao]: /images/20221005/73d996abf3c24d7787bd3a56ff07fcc0.png
[CSDN_100_ dalao 1]: /images/20221005/4f93b305e8c54830af461b8c3ed93995.png
[https_csdn-plugin.gitcode.host_csdn-chrome-plugin_extend_index.html]: https://csdn-plugin.gitcode.host/csdn-chrome-plugin/extend/index.html
[CSDN_100_ dalao 2]: /images/20221005/2877d997393444f49665a937ea8f0ead.png
[CSDN_100_ dalao 3]: /images/20221005/95596c95003649c389e5ba3e9df316d2.png
[CSDN_100_ dalao 4]: /images/20221005/0b647c8399f6418396775e1ec49f4a43.png
[Python _ 100]: https://blog.csdn.net/hihell/category_9280209.html
[CSDN_100_ dalao 5]: /images/20221005/39fb7f5ff74047ecbd33e3e861bcaf5c.png
[CSDN_100_ dalao 6]: /images/20221005/41b3f73b53d94194aa9007e7994c3ef6.png
[CSDN_100_ dalao 7]: /images/20221005/aef25d165b124fcdb3e8ecff8924f34c.png
[CSDN_100_ dalao 8]: /images/20221005/6c100a7f99c84e519441dcfa4db7eba1.png
[10 _ 2000 _Python _ 120]: https://dream.blog.csdn.net/article/details/117024328
[Python _ 60_ cosplay]: https://dream.blog.csdn.net/article/details/117221667
[Python]: https://dream.blog.csdn.net/article/details/117458947
[Python 1]: https://dream.blog.csdn.net/article/details/117458985
[Link 1]: https://blog.csdn.net/hihell/article/details/117661488
[Python _ 100G]: https://dream.blog.csdn.net/article/details/117918309
[Python 2]: https://dream.blog.csdn.net/article/details/118035208
[5000 _ Python]: https://dream.blog.csdn.net/article/details/118145504