MicroLink使用

发表于 | 更新于: | 分类于 | 阅读次数:
字数统计: 184 | 阅读时长 ≈ 1

MicroLink使用

安装

1
$ npm install @microlink/react styled-components --save

使用方法

1
2
3
4
5
6
7
8
import MicrolinkCard from '@microlink/react'

// Just provide a URL to create a card
<MicrolinkCard
  url='https://www.theverge.com/tldr/2018/2/7/16984284/tesla-space-falcon-heavy-launch-elon-musk'
/>

//size:'large'

Styling

  • microlink_card: 是根 div
  • micro_card_media: 可以是video或者image
  • mircolink_card_media_image : div用于包装link的preview的background-image
  • microlink_card_media_video_wrapper: video link 的preview包装器
  • microlink_card_media_video :link video preview 的video元素
  • micro_card_content: link content 的 div
  • micro_card_content: link content
  • microlink_card_content_title: card title p元素
  • microlink_card_content_description: card description
  • microlink_card_content_url: link url span元素

使用styled-components进行修饰

1
2
3
4
5
6
7
8
import MicrolinkCard from '@microlink/react'
import styled from 'styled-components'

const myCustomCard = styled(MicrolinkCard)`
  font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
  max-width: 100%;
  border-radius: .42857em;
`

设想是通过爬虫抓取url,然后生成pocket形式的网页