preface

In recent days, I have been working on a VSCode plug-in called “I love digging gold”, in order to make it more convenient to dig friends while writing code, while fishing. This plugin is mainly based on the VSCode plugin API Webview development, so most functions are directly using iframe to display the gold digging page, but this Webview has great limitations, such as the opening of a new window.

Nuggets home page article list is a new window after clicking, according to this means only let me see the home page article title, but can not see the article?

This is going to turn over!

The chief marshal has all kinds of plans, so there is no rollover (please see the picture ๐Ÿ˜). The optimal path doesn’t work, so go to the trouble of losing more hair.

No more words, see the effect first

Rewrite the nuggets homepage

After seeing the effect, feel good, please reward a ๐Ÿ‘ praise?

To get data, you have to have an interface

Rewriting the homepage of digging gold involves several interfaces, I will not paste the interface address, because digging gold is front and back end separation, also did not use SSR (yes, is super rare card meaning), the interface itself can be seen by F12 in debug mode.

  • Get nuggets categorized (i.e., back end, front end, Android…. The row)

  • Gets a list of articles under the specified category

Classification of navigation

After the interface is requested, it is dynamically added to the category node

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;
Copy the code

The navigation will always be at the top of the page as we scroll, so we’ll use 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;
}
Copy the code

If the page width is not enough, we need to scroll, but we don’t want to show the scrollbar, so we set it to hide with -webkit-scrollbar

.category::-webkit-scrollbar {
  display: none;
}
Copy the code

Add hover and active effects to category tags

.category>.cateitem:hover..category>.cateitem.actived
{
  color: #1683FB;
}
Copy the code

The article lists

With the article list data in hand, let’s assemble the content. This is why the home page is rewritten, because the article list item is clicked and the openInWebview method is called to inform VSCode of the next action.

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' > praise${article_item.article_info.digg_count}comments${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>
`);
}
Copy the code

I just want to use vanilla. Js, the original JS framework, and I found that JQuery works.

It doesn’t matter what you use, it’s about implementation.

Style is a little long, I will not paste, anyway, finally provided the source code, you can see the source code.

Scroll to the bottom to request more articles

A very common function, the implementation method is very simple

$(document).on('scroll'.function(){
  let scroH = $(document).scrollTop();
  let viewH = $(window).height();
  let bodyH = $(document.body).height();

  if (bodyH - scroH == viewH){
    loadArticlesByCategory(lastCursor);// Request the method of the article, with the page number mark}});Copy the code

Download the source code

Making the address

“I Love Nuggets” plugin

Write so much, but also hope that everyone to use this plug-in, in VSCode fishing efficiency greatly improved.

Pay attention to the big handsome doing full stack

Pay attention to big handsome, you want to know the big front end, I have here

Recent articles (thanks for your encouragement and support ๐ŸŒน๐ŸŒน๐ŸŒน)

  • ๐Ÿ”ฅ made a night of animation, in order to make you better understand Vue3 Composition Api 870 thumbs
  • ๐Ÿ”ฅ2020 update, Vue explore the effects of dragging cards 952 likes
  • ๐Ÿ”ฅ love the love ๐ŸŒน, this VSCode plug-in greatly enhance your work mo yu | creator camp 95 great efficiency
  • ๐Ÿ”ฅ how to release your plug-in, follow me VSCode plug-in development | 12 great creator training camp
  • ๐Ÿ”ฅ use scaffolding to create a new plug-in | VSCode plug-in development series 14 praise

The essay calling activity of creator boot camp is in progress……