最近在給客戶做網(wǎng)站的時(shí)候 想用百度分享 但是百度分享死活打不開(kāi)  這樣的話 我們是可以 從網(wǎng)上上下 百度分享離線文件

今天給大家分享另一種分享代碼  share.js

一鍵分享功能是網(wǎng)站社交化的一個(gè)重要組件，當(dāng)前發(fā)現(xiàn)一款使用非常簡(jiǎn)單的js插件，就是share.js，項(xiàng)目地址: https://github.com/overtrue/share.js 。 share.js使用非常簡(jiǎn)單，它可以通過(guò)參數(shù)配置自由控制展示哪些分享圖標(biāo)，同時(shí)它還可以自定義分享時(shí)的title以及icon。

如此簡(jiǎn)單的一個(gè)js組件，對(duì)于我這樣的一個(gè)后端開(kāi)發(fā)人員，那也是分分鐘上手，用法這里不細(xì)說(shuō)， 請(qǐng)參考作者github?，F(xiàn)在結(jié)合share.js，給自己的靜態(tài)博客實(shí)現(xiàn)一鍵分享功能，同時(shí)給自己的博客實(shí)現(xiàn)通過(guò)參數(shù)控制分享圖標(biāo)的顯示位置。

要使用share.js功能，首先要把share.js的css文件、js文件都引入到html中。本博客是利用Hugo生成的，從share.js項(xiàng)目的src目錄，直接將子目錄css、font、js文件夾 復(fù)制到博客項(xiàng)目的static目錄中，然后將js、css文件引入主模板baseof.html中即可，js文件只需要qrcode.js以及social-share.js文件即可。


使用方法


HTML代碼


<div class="inner-meta clearfix social-share"></div>

自定義配置

所有配置可選， 通常默認(rèn)就滿足需求：

可用的配置有：

url                 : '', // 網(wǎng)址，默認(rèn)使用 window.location.href
source              : '', // 來(lái)源（QQ空間會(huì)用到）, 默認(rèn)讀取head標(biāo)簽：<meta name="site" content="http://overtrue" />
title               : '', // 標(biāo)題，默認(rèn)讀取 document.title 或者 <meta name="title" content="share.js" />
description         : '', // 描述, 默認(rèn)讀取head標(biāo)簽：<meta name="description" content="PHP弱類型的實(shí)現(xiàn)原理分析" />
image               : '', // 圖片, 默認(rèn)取網(wǎng)頁(yè)中第一個(gè)img標(biāo)簽
sites               : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 啟用的站點(diǎn)
disabled            : ['google', 'facebook', 'twitter'], // 禁用的站點(diǎn)
wechatQrcodeTitle   : '微信掃一掃：分享', // 微信二維碼提示文字
wechatQrcodeHelper  : '<p>微信里點(diǎn)“發(fā)現(xiàn)”，掃一下</p><p>二維碼便可將本文分享至朋友圈。</p>'

以上選項(xiàng)均可通過(guò)標(biāo)簽 data-xxx 來(lái)設(shè)置：

駝峰轉(zhuǎn)為中橫線，如wechatQrcodeHelper 的data標(biāo)簽為data-wechat-qrcode-helper

禁用 google、twitter、facebook 并設(shè)置分享的描述

<div class="share-component" data-disabled="google,twitter,facebook" data-description="Share.js - 一鍵分享到微博，QQ空間，騰訊微博，人人，豆瓣"></div>

 

設(shè)置微信二維碼標(biāo)題

<div class="social-share" data-wechat-qrcode-title="請(qǐng)打開(kāi)微信掃一掃"></div>

針對(duì)特定站點(diǎn)使用不同的屬性（title, url, description,image...）

<div class="social-share" data-weibo-title="這個(gè)標(biāo)題只有的分享到微博時(shí)有用，其它標(biāo)題為全局標(biāo)題" data-qq-title="分享到QQ時(shí)用此標(biāo)題"></div>

你也可以自定義圖標(biāo)

使用: data-initialized="true" 標(biāo)簽或者 initialized 配置項(xiàng)來(lái)禁用自動(dòng)生成icon功能。
 

1. <div class="social-share" data-initialized="true">
2.  
       <a href="#" class="social-share-icon icon-weibo"></a>
3.  
       <a href="#" class="social-share-icon icon-qq"></a>
4.  
       <a href="#" class="social-share-icon icon-qzone"></a>
5.  
   </div>

以上a標(biāo)題會(huì)自動(dòng)加上分享鏈接（a 標(biāo)簽必須帶 icon-NAME 屬性，不然分享鏈接不會(huì)自動(dòng)加上）。

如果你想在分享icon列表中內(nèi)置一些元素，比如放一個(gè)收藏按鈕在分享按鈕的后面：

1. <div class="social-share">
2.  
       <a href="javascript:;" class="social-share-icon icon-heart"></a>
3.  
   </div>

這樣并沒(méi)有實(shí)現(xiàn)，因?yàn)榻Y(jié)果是所有的分享按鈕都創(chuàng)建在了收藏按鈕的后面了，這時(shí)候你就可以用 data-mode="prepend" 來(lái)確定分享按鈕創(chuàng)建的方式。

1. <div class="social-share" data-mode="prepend">
2.  
       <a href="javascript:;" class="social-share-icon icon-heart"></a>
3.  
   </div>

這樣，所有的分享圖標(biāo)就會(huì)創(chuàng)建在容器的內(nèi)容前面，反之可以用 append 創(chuàng)建在容器內(nèi)容后面，當(dāng)然這是默認(rèn)的，也不需要這么做。

指定移動(dòng)設(shè)備上顯示的圖標(biāo)

<div class="share-component" data-mobile-sites="weibo,qq,qzone,tencent"></div>

當(dāng)在手機(jī)上打開(kāi)該頁(yè)面的時(shí)候就只會(huì)顯示這4個(gè)圖標(biāo)了。