前端常用组件整理

1. clipboard.js（复制到剪切板）

大小在 3kb 左右，使用简单，一行代码就可实现复制到剪切板。

官网：

https://clipboardjs.com/https://clipboardjs.com/

中文文档：

clipboard.js — 不用安装 Flash 就能复制内容到剪贴板将文本复制到剪贴板不应该是件难事。这种功能不应该需要几十个步骤的配置或几百 KB 的代码来实现。最重要的是，这种功能也不应该依赖 Flash 或任何臃肿的框架。这就是 clipboard.js 项目存在的价值。https://clipboardjs.bootcss.com/

2. barbajs(pjax+动画过渡)

项目地址：GitHub - barbajs/barba: Create badass, fluid and smooth transitions between your website’s pages

可以帮助你在单页应用程序中实现流畅的页面过渡效果。它基于 AJAX 技术，在不刷新整个页面的情况下，加载和替换网页内容。7kb左右。
还没用过，看样子类似pjax+动画过渡?

barba.js

3. Animate.css（动画库）

一个现成的跨浏览器动画库，可以实现一些页面的动态效果。

项目地址：GitHub - animate-css/animate.css: 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
官方文档：

Animate.css | A cross-browser library of CSS animations.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.https://animate.style/

4. Swiper （轮播图）

梅开二度，这个库也是纯粹记录。

项目地址：GitHub - nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions
官方文档：Swiper - The Most Modern Mobile Touch Slider
Swiper中文网：

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。Swiper中文网提供Swiper在线演示、Swiper中文教程、Swiper中文APi、Swiper下载。https://www.swiper.com.cn/

5. echarts （数据可视化）

梅开三度。

项目地址：GitHub - apache/echarts: Apache ECharts is a powerful, interactive charting and data visualization library for browserApache ECharts is a powerful, interactive charting and data visualization library for browser - apache/echartshttps://github.com/apache/echarts
官方文档：

Apache EChartsApache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

6. Editor.md（Markdown编辑器）

开源在线 Markdown 编辑器

项目地址：GitHub - pandao/editor.md: The open source embeddable online markdown editor (component).
官方文档：

Editor.md - 开源在线 Markdown 编辑器Editor.md: a simple online markdown editor.http://editor.md.ipandao.com/

7. wangEditor（富文本编辑器）

开源 Web 富文本编辑器，开箱即用，配置简单。（发现自轻笑giegie）

项目地址：GitHub - wangeditor-team/wangEditor: wangEditor —— 开源 Web 富文本编辑器
官方文档：

wangEditor开源 Web 富文本编辑器，开箱即用，配置简单https://www.wangeditor.com/

8. wowjs（网页滚动动画）

滚动时显示动画。博客用到了该插件，但是我还没用过该插件。

演示站：Reveal Animations When Scrolling — WOW.js
项目地址：GitHub - matthieua/WOW: Reveal CSS animation as you scroll down a page

9. winbox（仿windows弹窗）

一个很完善的弹窗库，界面类似于windows窗口。API 丰富，本站切换背景的弹窗就是使用的这个。

演示站：WinBox.js – Modern HTML5 Window Manager
项目地址：GitHub - nextapps-de/winbox: WinBox is a modern HTML5 window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!

10. easyDanmaku（弹幕库）

项目地址：GitHub - pprory/easyDanmaku: A Danmaku plugin for the web

教程：

给你的留言板添加一个弹幕吧（重制） | Leonus给你的留言板添加一个炫酷的弹幕吧！https://blog.leonus.cn/2023/danmaku.html

11. Outline.js（自动生成文章导读目录）

项目地址：outline.js: outline.js - 自动生成文章导读（Table of Contents）导航的 JavaScript 工具。outline.js 会自动查找文章指定区域中的所有 h1~h6 的标签，并自动分析文章段落间的层次结构，生成文章的导读导航。

教程：

https://yaohaixiao.github.io/outline.js/relative.html

12. OwO.js（文章emoji）

项目地址：GitHub - DIYgod/OwO: :lollipop: Lovely Emoticon and Emoji Keyboard for input

13. Hover.css（ CSS3 悬停效果和动画）

在线演示：   Hover.css - A collection of CSS3 powered hover effects

立即下载：   https://github.com/IanLunn/Hover/archive/master.zip

GitHub地址：   GitHub - IanLunn/Hover: A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

14. Three-dots（加载动画css）

Three Dotshttps://nzbin.github.io/three-dots/

15. message.js（消息弹框）

插件描述： 一款优雅的原生JS页面消息提示插件，兼容性良好，无任何依赖。

Git： Gitee | GitHub

插件预览：Message.js

16. fancybox（图片灯箱）

Git：GitHub - fancyapps/fancybox: jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

17. lazyload（jQuery懒加载）

下载地址：官网

18. disable-devtools（页面防扒）

disable-devtool 可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 ‘代码搬运’

该库有以下特性:

1. 支持可配置是否禁用右键菜单
2. 禁用 f12 和 ctrl+shift+i 快捷键
3. 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
4. 开发者可以绕过禁用 (url参数使用tk配合md5加密)
5. 多种监测模式，支持几乎所有浏览器（IE,360,qq浏览器,FireFox,Chrome,Edge...）
6. 高度可配置
7. 使用极简、体积小巧 (仅7kb)
8. 支持npm引用和script标签引用(属性配置)
9. 识别真移动端与浏览器开发者工具设置插件伪造的移动端，为移动端节省性能
10. 支持识别开发者工具关闭事件

开发者演示及文档地址：Disable web developer tools with one line

使用方法

在主题文件footer.php或者header.php引用下面这段js代码即可

<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>

或者通过版本引用

<!--使用指定版本-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@x.x.x/disable-devtool.min.js'></script>
<!--使用最新版本-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@latest/disable-devtool.min.js'></script>