Language:
English
中文
Generate card-based links for hyperlinks on the page
Using npm:
npm install cardlink --save
Using CDN:
<script src="https://cdn.jsdelivr.net/npm/cardlink"></script>
<!-- Only use parseer -->
<script src="https://cdn.jsdelivr.net/npm/cardlink/dist/parse.js"></script>
<script>
/**
* Get info
* @param {String} html String type html
* @param {String} link Website address
* @returns {{ title: string; link: string; icon: string }} Website info
*/
cardLinkParse(html, link)
<script>
Modules
import cardLink from 'cardlink' // or const cardLink = require('cardlink')
// Only use parseer
import cardLinkParse from 'cardlink/parse' // or const cardLinkParse = require('cardlink/parse')
Browser
- Usage
<script>
cardLink(document.querySelectorAll('article a[target=_blank]'))
</script>
- Usage
<script>
// Set the cardlink property for the specified a tag, and finally call cardLink()
document.querySelectorAll('article a[target=_blank]').forEach((el) => {
el.setAttribute('cardlink', '')
})
// OR
document.querySelector('a#example').setAttribute('cardlink', '')
// By default, card links are generated for all `a[cardlink]` on the page
cardLink()
</script>
Since this is a front-end request for HTML, some sites may have cross-domain (CORS) issues, so cardLink
allows you to use a proxy server to request HTML from the target site
<script>
// Note: cardLink sends requests to the proxy server only when cross-domain requests occur (thus reducing the pressure on the proxy server)
// Preset the proxy server before executing cardLink
cardLink.server = 'https://api.allorigins.win/raw?url='
cardLink(document.querySelectorAll('article a[target=_blank]'))
</script>
Type: NodeList
default: document.querySelectorAll('a[cardlink]')
By default, card links are generated for all a[cardlink]
on the page