Feat: Add quicklink support

[1v9]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines.
• Tests for the changes was maked (for bug fixes / features).
  • Muse | Mist have been tested.
  • Pisces | Gemini have been tested.
• Docs in NexT website have been added / updated (for new features).

PR Type

What kind of change does this PR introduce?

• Bugfix.
• Feature.
• Code style update (formatting, local variables).
• Refactoring (no functional changes, no api changes).
• Build related changes.
• CI related changes.
• Documentation content changes.
• Other... Please describe:

What is the current behavior?

Issue resolved N/A

What is the new behavior?

When a page has finished loading, quicklink will attempt to use fetch() or falls back to XHR to prefetch URLs (same origin and ignore # such as #more) for links that are in-viewport during idle time.

Put simply, the links you can see will be prefetched. For example, if your sidebar is hidden at first, you need to open the sidebar to prefetch the rss link because you can't see it.

• Screens with this changes:

• 1v9's Blog

How to use?

In NexT _config.yml:

...
quicklink: true
...
vendors:
...
  quicklink: //cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js
...

Does this PR introduce a breaking change?

• Yes.
• No.

[1v9]

🔔 need help

If someone has a better code, please resubmit a PR. I have a lot of things to do these days.

I tried to ignore url of post-copyright-link but failures cause I'm not familiar with the CSS selector. See Set the DOM element to observe for in-viewport linksI and Custom Ignore Patterns.

I am not a programmer, this is my first PR. I stumbled upon quicklink and trIed to add it to NexT.
Fortunately, there are a lot of templates in the master branch for my reference, so I only need to copy and paste. There seems to be no big problem, let me explain further.

🥇 suggested scenario

Visitors are almost from advanced modern browsers, and you have set appropriate Cache-Control headers for better browser caching.

I'm using Nginx to set Cache-Control header for different file and path, everything is OK.

First time to disable cache in Chrome F12 is always slow, here is a fresh demo:

⚠️ quicklink.umd.js

• When quicklink works in internal mode and all *js files are finally bundled into one, there will be duplicate resource consumption. Two choices can avoid this problem, exclude the quicklink.umd.js file or use CDN mode.

• The quicklink.umd.js file should not be modified by some hexo plugin or other similar tools unless you confirmd the file could still work after modification.

❓ browser compatibility

I have tested quicklink support (enable { priority: true} to use fetch method first) on various kinds of browser, basically as here said, Chrome, Firefox, Edge fully supported it.

[ivan-nginx]

So, PR actually worked for now? Or it have some bugs?

[1v9]

@ivan-nginx Yes, I have enabled quicklink on my blog, seems good.

[ivan-nginx]

Also, can u add docs in NexT website how to use this feature?