NexT主題添加ShareSDK的分享

原文地址: http://blog.magicer.xyz/2016/04/add-sharesdk/

今天發(fā)現(xiàn)一個分享的的sdk,可以在各個平臺使用。由于不太喜歡主題提供的幾個分享的樣式。就試了試怎么這個。發(fā)現(xiàn)還是不錯滴。。下面是分享的按鈕和分享的樣式:

效果見下面—-
傳送門:ShareSDK

Web集成官方文檔

下面是在網(wǎng)頁上分享按鈕的代碼,只需要將以下代碼添加到想要顯示的位置即可。appkey是你自己的appkey。

<!--MOB SHARE BEGIN-->
<div class="-mob-share-ui-button -mob-share-open">分享</div>
<div class="-mob-share-ui" style="display: none">
    <ul class="-mob-share-list">
         <li class="-mob-share-qzone"><p>QQ空間</p></li>
         <li class="-mob-share-qq"><p>QQ好友</p></li>
         <li class="-mob-share-weixin"><p>微信</p></li>
         <li class="-mob-share-weibo"><p>新浪微博</p></li>
         <li class="-mob-share-tencentweibo"><p>騰訊微博</p></li>
         <li class="-mob-share-douban"><p>豆瓣</p></li>
         <li class="-mob-share-renren"><p>人人網(wǎng)</p></li>
         <li class="-mob-share-kaixin"><p>開心網(wǎng)</p></li>
         <li class="-mob-share-facebook"><p>Facebook</p></li>
         <li class="-mob-share-twitter"><p>Twitter</p></li>
         <li class="-mob-share-pocket"><p>Pocket</p></li>
         <li class="-mob-share-google"><p>Google+</p></li>
         <li class="-mob-share-youdao"><p>有道云筆記</p></li>
         <li class="-mob-share-mingdao"><p>明道</p></li>
         <li class="-mob-share-pengyou"><p>朋友網(wǎng)</p></li>
         <li class="-mob-share-tumblr"><p>Tumblr</p></li>
         <li class="-mob-share-instapaper"><p>Instapaper</p></li>
         <li class="-mob-share-linkedin"><p>LinkedIn</p></li>
    </ul>
    <div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=你的appkey"></script>
<!--MOB SHARE END-->

添加到NexT中

那么怎么添加到next主題上呢。步驟如下

1.創(chuàng)建文件

我們首先要在主題文件夾下的layout文件夾找到_partials下的share文件夾,之后添加一個名為sharesdk.swig的文件。我們可以看出來。這個文件夾下放的全部是分享的配置文件.添加的內(nèi)容為上面的那一大段代碼。只需要修改一部分。修改的部分為:

<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey={{ theme.shareSDKappkey }}"></script>

修改這寫的目的是為了讓我們能夠在主題的配置文件中添加appkey。(只需要在主題的配置文件中添加一個shareSDKappkey并為其附上值即可)。

2添加可選配置

雖然我們添加了sharesdk的分享的按鈕了,但是如果有一天我們不想使用了呢。當(dāng)然,很簡單。只需要修改配置文件就可以了。那么如何實現(xiàn)呢?

首先,找到主題文件夾下的layout文件夾下的post.swig

大概在16行左右添加

<div class="post-spread">
  {% if theme.jiathis %}
    {% include '_partials/share/jiathis.swig' %}
  {% elseif theme.baidushare %}
    {% include '_partials/share/baidushare.swig' %}
  {% elseif theme.add_this_id %}
    {% include '_partials/share/add-this.swig' %}
  {% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
    {% include '_partials/share/duoshuo_share.swig' %}
    {% elseif theme.sharesdk %}
    {% include '_partials/share/sharesdk.swig' %}
  {% endif %}
</div>

添加了代碼

{% elseif theme.sharesdk %}
        {% include '_partials/share/sharesdk.swig' %}

這段代碼就是根據(jù)主題文件的配置,來為文檔添加相應(yīng)的swig文件。要想實現(xiàn)在配置文件中選擇性的使用分享功能,只需要在配置文件中修改即可。

修改_config.yml

接下來就是修改項目的配置文件了。
在主題的配置文件中添加:

#Share
sharesdk: true
shareSDKappkey: appkey

這里要說明的是如果沒有綁定個人域名分享樣式是出不來的,只有用hexo s查看本地才能看到分享遠(yuǎn)程的是沒有的.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 看到有些next主題的網(wǎng)站很炫酷,那么是怎么配置的呢?接下來我會講一講如何實現(xiàn)一些炫酷的效果 主要有以下32種: ...
    Moorez閱讀 58,333評論 118 283
  • 原文發(fā)表在我的博客:為Next集成Mob分享組件插件效果也可以在我的博客觀看,另求關(guān)注、求交流、求意見、求建議。 ...
    華方閱讀 1,889評論 8 11
  • 1. 設(shè)置主題風(fēng)格 打開 themes/next/_config.yml 文件,搜索 scheme 關(guān)鍵字,將你...
    遲道閱讀 21,171評論 10 47
  • 承受著曖昧天氣凝結(jié)的熾烈, 感受著靜謐沉思呼吸的溫?zé)幔?盛夏的溫?zé)胗可狭诵念^, 思緒融化成縷縷熱流―― 你繚亂的如...
    從容sunshine閱讀 254評論 0 0
  • 在語法上和定義一個抽象類完全相同。但是接口不允許提供任何成員的實現(xiàn)方法 一般接口只能包含方法,屬性,索引器和事件的...
    辣個男人OvO閱讀 177評論 0 0