原文鏈接：基于 Hexo 鍵入分享功能
前言
本站基于
Hexo搭建，用的 ?? hexo-theme-butterfly 主題 v3.7.1，請注意最新的?? hexo-theme-butterfly 版本已經更新到 v4.2.2 ，
如果你是 v3.7.1 之外的版本，可能有些地方會有出入，請留意，
注意：我的博客根目錄路徑為 【G:/hexo-blog/blog-demo】，下文所說的根目錄都是此路徑，將用
[BlogRoot]代替，如果不清楚根目錄路徑，請回到教程 基于 Hexo 從零開始搭建個人博客（二），查看你執行hexo init xxx這條命令時所選擇的路徑，例如我選擇的路徑是【G:/hexo-blog】，我的博客根目錄即為【G:/hexo-blog/xxx】，
修改站點組態檔_config.yml，路徑為【BlogRoot/_config.yml】，
修改主題組態檔_config.butterfly.yml，路徑為【BlogRoot/_config.butterfly.yml】，
推薦閱讀
- 基于 Hexo 從零開始搭建個人博客（一）
- 基于 Hexo 從零開始搭建個人博客（二）
- 基于 Hexo 從零開始搭建個人博客（三）
- 基于 Hexo 從零開始搭建個人博客（四）
- 基于 Hexo 從零開始搭建個人博客（五）
- 基于 Hexo 從零開始搭建個人博客（六）
- 基于 Hexo 鍵入搜索功能
- 基于 Hexo 鍵入在線聊天功能
- Hexo + Butterfly 自定義右鍵選單
注意：主題集成了三種分享功能，分別是
AddThis、Sharejs、Addtoany，只能從其中選擇一個分享服務商，
AddThis
-
前往AddThis 官網注冊賬號，輸入下圖中資訊即可，
-
配置 WEBSITE TOOLS，
首先首先選擇Share Buttons，
其次選擇分享模型：Floating、Inline、Expanding、Image Sharing、Popup、Banner、Slider，每種模型的效果如下：
Floating
Inline
Expanding
Image Sharing
Popup
Banner
Slider
點擊【Continue】然后對不同的模型做一些定制化的設定，例如，選擇分享平臺的個數、設定按鈕的大小，顏色，設定圖示的顏色、模型出現的位置等，這里只對 Floating 做出舉例，具體效果請看下圖：
最后點擊 【Activate Tool】 按鈕即可， -
找到【Get The Code】-> 【Just Copy】，可以看到你的
pub-id，
-
修改主題組態檔
_config.butterfly.yml，
addThis:
enable: true # or false
pubid: 你的pub-id
- 重新編譯運行，即可看到效果，
Sharejs
如果你不了解 sharejs ，可以看看它的檔案，
修改主題組態檔_config.butterfly.yml
sharejs:
enable: true
sites: facebook,twitter,wechat,weibo,qq #想要顯示的內容
Addtoany
如果你不了解 Addtoany ，可以看看它的檔案，
修改主題組態檔_config.butterfly.yml
addtoany:
enable: true
item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link
效果如下：
本文來自博客園，作者：啊睦，轉載請注明原文鏈接：https://www.cnblogs.com/tzy1997/p/16540423.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500809.html
標籤：Html/Css
下一篇：前端DAY01-HTML