还在对着网站开发需求埋头苦想？这些插件让你一步到位

Author Avatar
DataLeoZ 3月 24, 2019
  • 在其它设备中阅读本文章

前言

在逐步深入学习网站开发时，我们尽可能地想要自己动手去实现每个功能，既加深了理解，也能够在通晓原理的基础上根据自身需要有的放矢，更进一步。这当然是很好的学习态度，然而在实际使用和工作中，越来越多的需求会出现在眼前，有的简单，有的复杂。在规定的时间内保质保量的完成任务，比起日常学习时知其所以然的优先性就要更高了。如何实现图片缓加载提高性能？如何准确实现网站多语言？如何对看似简单的轮播图进行针对化定制？如何发送邮件和短信通知？这些需求在日常的网站使用中非常常见，但细究起来实现下来也没有那么简单。一下的一些插件在我日常使用中给了我很大帮助，配置简单，定制化程度高，推荐给大家尝试。

LozadJS

lozadJS

图片缓加载技术，是指在网页加载过程中，不在初次加载时加载全部的图片资源，而是仅仅加载出视窗范围内的图片资源，有效降低了网页资源初次加载时最消耗时间的资源加载时间。LozadJS作为一个纯JS插件占用资源非常少，配置非常简单，更重要的是它支持对于多种类型的图片资源加载，无论是直接使用还是在”backgroud-image”中进行使用，都可以实现Lazy Load 的功能，非常实用。

安装和使用方法举例

原文和详细参数、方法请参考LozadJS的GitHub仓库：github.com/ApoorvSaxena/lozad.js

通过CDN安装

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

使用

可以对多种类型图片资源使用

<img class="lozad" data-src="image.png" />
<!-- background image example -->
<div class="lozad" data-background-image="image.png">
</div>

通过JS方法初始化Lozad功能

const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer.observe();

WeGlot

WeGlot是一款翻译API,通过它可以实现多语言网站一次性创建，支持JS,Laravel,Wordpress等许多主流平台使用。除了语种全面，其最大的特点是自动翻译引擎经过了自家调教，准确度和自然性远高于谷歌翻译（虽然我觉得近些年随着狗哥在NLP方面的发展，机器翻译甚至语音识别都已经有了长足进步），并且对于特定内容需要避免或进行定制化翻译也可以在账户中非常轻松的进行设置，这是目前翻译插件中最为便捷的。由于平台较多，就不介绍具体的使用方法了。

BTW,去年我在使用这个插件的时候，他们家对于Laravel平台的支持正在进行调试，并且在邮件中告知了一种新的基于subdomain的使用方式，我觉得大大简化了操作，应该会很快出现在正式版本中，只需要link到zh.domain.com这种形式的子域名下就可以实现全站的自动翻译了，非常便捷。

Owl Carousel 2是一个可以定制轮播图的插件，它基于Jquery,可以通过简单的设置参数实现响应式的轮播图效果，例如从右到左，自动宽度/高度，缓加载，多种动画等等。

简明安装流程

引用CSS

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

引用JS

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

设置HTML

<!-- Set up your HTML -->
<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

原文和详细参数、方法请参考Owl Carousel 2 官网

Twilio

Twilio
Twilio是一家支持语音，短信，视频等一系列多媒体媒介发送的公司，支持几乎所有主流语言和平台，通过简单的设置就可以实现自定义短信，语音的发送功能。并且，它的价格是按照发送数量进行收费的，所以弹性很大，资费灵活。
因为涉及的平台和语言众多，所以有兴趣的朋友可以参考官网的使用文档。

将来如果遇到有更多的好插件我也会更新或制作新的推荐~

Banner Photo by Joshua Aragon on Unsplash

This blog is under a CC BY-NC-SA 3.0 Unported License
本文使用 CC BY-NC-SA 3.0 中国 协议许可
署名-非商业性使用-相同方式共享（BY-NC-SA）：使用者可以对本创作进行共享、演绎，但使用时须进行署名（同时标明是否（对原始作品）作了修改），且不得运用于商业目的，采用本创作的内容必须同样采用本协议进行授权。详情请参考协议细则。
本文链接：https://dataleoz.com/web-dev-plugins-recommendation/

Powered by Hexo
Theme - Material