不用Vue你还记得怎么写前端吗？用JS重写🌜黑暗模式掘金首页 | 创作者训练营

2022-04-25 517

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 大帅早有各种预案，所以不存在翻车（请看头图😁）。最优路径行不通，那就麻烦一点，多掉点头发罢了。

前言

最近这几天一直在埋头开发一款VSCode插件，叫做“我爱掘金”，为的是让广大掘友可以更方便的一边写代码，一边摸鱼。这个插件主要基于VSCode插件API里的Webview来开发，所以大部分功能是直接使用iframe来展示掘金页面，但这个Webview有很大局限，比如禁止打开新的窗口。

而掘金首页的文章列表点击后都是新开窗口，照这意思是只让我看首页的文章标题，但是看不了文章吗？

这是要翻车呀！

大帅早有各种预案，所以不存在翻车（请看头图😁）。最优路径行不通，那就麻烦一点，多掉点头发罢了。

话不多说，先看效果

1650859508(1).png

1650859534(1).png

重写掘金首页

看完效果，觉得还不错的，请赏赐一个👍赞好吗？

要想获得数据，首先得有接口

重写掘金首页涉及到了几个接口，接口地址我就不贴了，因为掘金是前后端分离，也没有用到SSR（对，就是超稀有卡片的意思），接口自己可以按F12在调试模式看到

获得掘金分类（就是后端，前端，Android....那一排）

1650859567(1).png

获得指定分类下的文章列表

1650859598(1).png

分类导航

请求完接口后，动态的添加到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);//请求文章的方法，带上页数标记
  }
});