資訊專欄INFORMATION COLUMN
摘要：記得以前做網(wǎng)站的時(shí)候遇到前端分享按鈕會(huì)去百度分享或者在線生成一個(gè)分享代碼，當(dāng)時(shí)不懂現(xiàn)在看起來它們做了不少信息收集工作，于是便想著替換掉在上找了很久發(fā)現(xiàn)沒有特別合適的于是便想著自己做一款組件。
記得以前做網(wǎng)站的時(shí)候遇到前端分享按鈕會(huì)去百度分享或者jiathis在線生成一個(gè)分享代碼，當(dāng)時(shí)不懂現(xiàn)在看起來它們做了不少信息收集工作，于是便想著替換掉；在github上找了很久發(fā)現(xiàn)沒有特別合適的于是便想著自己做一款組件。
先附上地址 https://github.com/slince/social-share.js
考慮到大眾需求，預(yù)先做了五款樣式主題；最后兩個(gè)暗色樣式比較適用比較酷酷的或者冷色系為主的網(wǎng)站；當(dāng)然你也可以自定義主題，不過自定義主題需要你自己寫css樣式了。
默認(rèn)樣式
方形樣式
圓形樣式
暗色方形
暗色圓形
接下來我們?cè)僬f一說安裝的事情，考慮到大眾的需求支持以下幾種安裝方式：
通過npm和yarn安裝:
推薦這種方式，現(xiàn)在前端工程化已經(jīng)很流行了，不在以前那種比較混亂的拿來即用的時(shí)代，使用npm可以很方便的管理你的前端代碼。
npm用戶執(zhí)行：
$ npm install social-share-button.js --save
yarn用戶執(zhí)行
$ yarn add social-share-button.js
通過script引入：
當(dāng)然也支持傳統(tǒng)的script標(biāo)簽引入的功能，到https://github.com/slince/social-share.js/releases界面下載最新的版本，拷貝dist目錄下的文件到你的項(xiàng)目中，然后通過script和link標(biāo)簽分別引入js和css文件即可
用法最簡(jiǎn)單的用法
import SocialShare from "social-share-button.js"; //如果你是通過script標(biāo)簽引入則不需要此步驟
new SocialShare(".social-share-container");
定制主題
new SocialShare(".social-share-container", {
theme: "square"
});
定制分享參數(shù)
new SocialShare(".social-share-container", {
// 定義通用的分享參數(shù)
title: "百度搜索",
url: "http://www.baidu.com",
summary: "一個(gè)中文搜索網(wǎng)站",
image: "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png",
// 多帶帶定義微博的分享參數(shù),其它的同
weibo: {
title: "網(wǎng)易",
url: "http://www.qq.com",
summary: "網(wǎng)易門戶",
image: "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png",
}
});
關(guān)閉指定按鈕
new SocialShare(".social-share-container", {
facebook: false,
twitter: false
});
一些案例展示可以查看example目錄下的例子：希望這款組件可以幫到你，歡迎大家pr，歡迎star
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112630.html
摘要：記得以前做網(wǎng)站的時(shí)候遇到前端分享按鈕會(huì)去百度分享或者在線生成一個(gè)分享代碼，當(dāng)時(shí)不懂現(xiàn)在看起來它們做了不少信息收集工作，于是便想著替換掉在上找了很久發(fā)現(xiàn)沒有特別合適的于是便想著自己做一款組件。 記得以前做網(wǎng)站的時(shí)候遇到前端分享按鈕會(huì)去百度分享或者jiathis在線生成一個(gè)分享代碼，當(dāng)時(shí)不懂現(xiàn)在看起來它們做了不少信息收集工作，于是便想著替換掉；在github上找了很久發(fā)現(xiàn)沒有特別合適的于是...
摘要：記得以前做網(wǎng)站的時(shí)候遇到前端分享按鈕會(huì)去百度分享或者在線生成一個(gè)分享代碼，當(dāng)時(shí)不懂現(xiàn)在看起來它們做了不少信息收集工作，于是便想著替換掉在上找了很久發(fā)現(xiàn)沒有特別合適的于是便想著自己做一款組件。 記得以前做網(wǎng)站的時(shí)候遇到前端分享按鈕會(huì)去百度分享或者jiathis在線生成一個(gè)分享代碼，當(dāng)時(shí)不懂現(xiàn)在看起來它們做了不少信息收集工作，于是便想著替換掉；在github上找了很久發(fā)現(xiàn)沒有特別合適的于是...
摘要：老姚淺談怎么學(xué)鑒于時(shí)不時(shí)，有同學(xué)私信問我老姚，下同怎么學(xué)前端的問題。擼碼聽歌，全局控制。 淺析用 js 解析 xml 的方法 由于項(xiàng)目上需要解析 xml，于是各種百度，然后自己總結(jié)了下各個(gè)主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。 裝 X - 建立自己的斗圖網(wǎng)站庫 之前加過一個(gè)斗圖群，看到很多經(jīng)典的表情，然后就收藏到了 QQ， 迫于本屌絲開不起...
摘要：手把手教你做個(gè)人火的時(shí)候，隨便一個(gè)都能賺的盆滿缽滿，但是，個(gè)人沒有服務(wù)端，沒有美工，似乎就不能開發(fā)了，真的是這樣的嗎秘密花園經(jīng)典的中文手冊(cè)。涵蓋前端知識(shí)體系知識(shí)結(jié)構(gòu)圖書推薦以及入門視頻教程，全的簡(jiǎn)直不要不要的了。 JavaScript 實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制指定區(qū)域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制區(qū)域文本的功能，不需要依賴 flash。...
摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
閱讀 2849·2021-11-19 09:40
閱讀 3709·2021-11-15 18:10
閱讀 3289·2021-11-11 16:55
閱讀 1246·2021-09-28 09:36
閱讀 1663·2021-09-22 15:52
閱讀 3375·2019-08-30 14:06
閱讀 1171·2019-08-29 13:29
閱讀 2317·2019-08-26 17:04
