前言
最近这几天一直在埋头开发一款VSCode插件，叫做“我爱掘金”，为的是让广大掘友可以更方便的一边写代码，一边摸鱼。这个插件主要基于VSCode插件API里的Webview来开发，所以大部分功能是直接使用iframe来展示掘金页面，但这个Webview有很大局限，比如禁止打开新的窗口。
而掘金首页的文章列表点击后都是新开窗口，照这意思是只让我看首页的文章标题，但是看不了文章吗？
这是要翻车呀！
大帅早有各种预案，所以不存在翻车（请看头图😁）。最优路径行不通，那就麻烦一点，多掉点头发罢了。
话不多说，先看效果
重写掘金首页
看完效果，觉得还不错的，请赏赐一个👍赞好吗？
要想获得数据，首先得有接口
重写掘金首页涉及到了几个接口，接口地址我就不贴了，因为掘金是前后端分离，也没有用到SSR（对，就是超稀有卡片的意思），接口自己可以按F12在调试模式看到
- 获得掘金分类 （就是后端，前端，Android....那一排）
- 获得指定分类下的文章列表
分类导航
请求完接口后，动态的添加到category节点里
var str=""; for(var i=0;i<categorys.length;i++){ str+="<span class='cateitem' onclick='switchCategory("+i+")'>"+categorys[i].category_name+"</span>"; } document.querySelector(".category").innerHTML=str;
这个导航在滚动页面的时候会一直出现在顶部，所以我们要用上fixed
.category { height: 46px; background: #333; line-height: 46px; overflow-x: scroll; overflow-y: hidden; width: 100%; white-space: nowrap; position: fixed; } .category>.cateitem { color: #999; padding:0px 20px; border-radius: 10px; cursor: pointer; }
如果页面宽度不够，我们是需要滚动的，但是并不想要显示滚动条，所以我们通过-webkit-scrollbar设置为隐藏
.category::-webkit-scrollbar { display: none; }
给分类标签加上hover和激活状态下的效果
.category>.cateitem:hover,.category>.cateitem.actived { color: #1683FB; }
文章列表
获取到文章列表数据后，我们组装一下内容。这里也就是为什么要重写首页的原因，因为文章列表项点击后需要调用openInWebview这个方法，来通知VSCode插件进行下一步动作。
hasMore=res.has_more; lastCursor=res.cursor; var new_articles = res.data for(var i=0;i<new_articles.length;i++){ var article_item=new_articles[i]; $(".articles").append(` <div class='articleitem' onclick='openInWebview("https://juejin.cn/post/${article_item.article_id}")'> <div class='text'> <div class='info'>${article_item.author_user_info.user_name} · ${getTimeUntilNow(article_item.article_info.ctime)} · ${getTagsStr(article_item.tags)}</div> <div class='title'>${article_item.article_info.title}</div> <div class='statistics'>赞 ${article_item.article_info.digg_count} 评论 ${article_item.article_info.comment_count}</div> </div> <div class='image' style='background-image:url(${article_item.article_info.cover_image});display:${article_item.article_info.cover_image==''?'none':'block'}'></div> </div> `); }
这里怎么又用上JQuery了呢，因为刚开始只想用vanilla.js这个原生JS框架，写着写着发现还是jquery好使。
用什么不重要，重点是实现。
样式有点长，就不贴了， 反正最后提供了源码，大家可以看源码。
滚动到底部请求更多文章
非常常见的一个功能，实现方法非常简单
$(document).on('scroll',function(){ let scroH = $(document).scrollTop(); let viewH = $(window).height(); let bodyH = $(document.body).height(); if (bodyH - scroH == viewH){ loadArticlesByCategory(lastCursor);//请求文章的方法，带上页数标记 } });
“我爱掘金”插件
写了这么多，也是希望大家都来用用这个插件，在VSCode里摸鱼的效率大幅提升。
