前言

最近这几天一直在埋头开发一款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;

IT知识分享网

这个导航在滚动页面的时候会一直出现在顶部，所以我们要用上fixed

IT知识分享网.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和激活状态下的效果

IT知识分享网.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);//请求文章的方法，带上页数标记
  }
});

源码下载

github地址

“我爱掘金”插件

写了这么多，也是希望大家都来用用这个插件，在VSCode里摸鱼的效率大幅提升。

关注大帅搞全栈

关注大帅，你想了解的大前端，我这里都有

近期文章（感谢掘友的鼓励与支持🌹🌹🌹）

• 🔥做了一夜动画，就为让大家更好的理解Vue3的Composition Api 870赞
• 🔥2020更新，Vue仿探探拖拽卡片的效果 952赞
• 🔥爱了爱了🌹，这个VSCode插件极大提升你的工mo作yu效率 | 创作者训练营 95赞
• 🔥如何发行你的插件，跟我学 VSCode 插件开发 | 创作者训练营 12赞
• 🔥使用脚手架新建一个插件 | VSCode 插件开发系列教程 14赞

创作者训练营 征文活动正在进行中……