Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lete114/cardlink
为页面上的超链接生成卡片式链接 | Generate card-based links for hyperlinks on the page
https://github.com/lete114/cardlink
card cardlink javascript link
Last synced: 14 days ago
JSON representation
为页面上的超链接生成卡片式链接 | Generate card-based links for hyperlinks on the page
- Host: GitHub
- URL: https://github.com/lete114/cardlink
- Owner: Lete114
- License: mit
- Created: 2022-06-05T14:36:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-11T16:28:44.000Z (7 months ago)
- Last Synced: 2024-09-20T05:51:38.961Z (about 2 months ago)
- Topics: card, cardlink, javascript, link
- Language: JavaScript
- Homepage: https://Lete114.github.io/CardLink/
- Size: 168 KB
- Stars: 30
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
CardLink
Generate card-based links for hyperlinks on the page
## Installation
Using npm:
```bash
npm install cardlink --save
```
Using CDN:
```html
/**
* 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>
```
## Usage
Modules
```js
import cardLink from 'cardlink' // or const cardLink = require('cardlink')
// Only use parseer
import cardLinkParse from 'cardlink/parse' // or const cardLinkParse = require('cardlink/parse')
```
Browser
1. Usage
```html
<script>
cardLink(document.querySelectorAll('article a[target=_blank]'))
```
2. Usage
```html
// 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()
```
## Problems
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
```html
// 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]'))
```
## Options API
### cardLink(nodes)
Type: `NodeList`
default: `document.querySelectorAll('a[cardlink]')`
By default, card links are generated for all `a[cardlink]` on the page
## Design Sketch
