hexo-theme-icarus配置“分享”插件

hexo-theme-icarus配置“分享”插件

Icarus用戶指南 - 分享按鈕

在主題中配置

hexo-blog\themes\icarus_config.yml

share:
    type: sharejs

查看sharejs.ejs文件

hexo-blog\themes\icarus\layout\share\sharejs.ejs

<div class="social-share"></div>
<%- _css(cdn('social-share.js', '1.0.16', 'dist/css/share.min.css')) %>
<%- _js(cdn('social-share.js', '1.0.16', 'dist/js/social-share.min.js')) %>

再結合hexo-blog\themes\icarus_config.yml的 CDN 庫配置

providers:
    # Name or URL of the JavaScript and/or stylesheet CDN provider
    cdn: jsdelivr
    # Name or URL of the webfont CDN provider
    fontcdn: google
    # Name or URL of the webfont Icon CDN provider
    iconcdn: fontawesome

jsdelivr相關資料

http://www.jsdelivr.com/
https://www.v2ex.com/t/208365

jsdelivr查找social-share.js文件

github上share.js用法

自定義圖標

使用: data-initialized=“true” 標籤或者 initialized 配置項來禁用自動生成icon功能

<div class="social-share" data-initialized="true">
    <a href="#" class="social-share-icon icon-weibo"></a>
    <a href="#" class="social-share-icon icon-qq"></a>
    <a href="#" class="social-share-icon icon-qzone"></a>
</div>

以上a標題會自動加上分享鏈接（a 標籤必須帶 icon-NAME 屬性，不然分享鏈接不會自動加上）。

修改 hexo-blog\themes\icarus\layout\share\sharejs.ejs文件

<div class="social-share" data-initialized="true">
    <a href="#" class="social-share-icon icon-wechat"></a>
    <a href="#" class="social-share-icon icon-weibo"></a>
    <a href="#" class="social-share-icon icon-qq"></a>
    <a href="#" class="social-share-icon icon-qzone"></a>
    <a href="#" class="social-share-icon icon-facebook"></a>
    <a href="#" class="social-share-icon icon-google"></a>
</div>
<%- _css(cdn('social-share.js', '1.0.16', 'dist/css/share.min.css')) %>
<%- _js(cdn('social-share.js', '1.0.16', 'dist/js/social-share.min.js')) %>