常用的开源web组件

图片(Fancybox) Fancybox3


<!-- 1. Add latest jQuery and fancybox files -->


- 音乐

[Aplayer](https://clearsky.me/hexo-aplayer.html)

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>
<div class="aplayer" data-id="22773511" data-server="netease" data-type="song" data-mode="single"></div>

主要参数	值
data-id	歌曲/专辑/歌单 ID
data-server	netease（网易云音乐）tencent（QQ音乐） xiami（虾米） kugou（酷狗）
data-type	song （单曲） album （专辑） playlist （歌单） search （搜索）
data-mode	random （随机） single （单曲） circulation （列表循环） order （列表）
data-autoplay	false（手动播放） true（自动播放）

来源

视频

Dplayer

<link class="dplayer-css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

<div id="dplayer"></div>
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot: true,
    video: {
        url: 'demo.mp4',
        pic: 'demo.jpg',
        thumbnails: 'thumbnails.jpg'
    },
    subtitle: {
        url: 'webvtt.vtt'
    },
    danmaku: {
        id: 'demo',
        api: 'https://api.prprpr.me/dplayer/'
    }
});

图标字体

FontAwesome

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

使用方法

<i class="fa fa-camera-retro"></i> fa-camera-retro

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div>

ourfor / blog

常用的开源web组件 #18