Hexo-based typing sharing feature

Original link: Based on Hexo typing sharing function | Tang Zhiyuan の blog

preface

This site is based on Hexo, with the hexo-theme-butterfly theme v3.7.1, please note that the latest hexo-theme-butterfly version has been updated to v4.2.2. If you are a version other than v3.7.1, there may be some discrepancies, please be careful.

Note: My blog root directory path is [G:/hexo-blog/blog-demo], the root directory mentioned below is this path, and will be replaced by [BlogRoot]. If you are not clear about the root directory path, please go back to the tutorial Build a personal blog from scratch based on Hexo (2), and check the path you chose when executing the command hexo init xxx, for example, the path I chose is [G:/hexo-blog], and my blog root is [G:/hexo-blog/xxx]. Modify the site configuration file _config.yml to BlogRoot/_config.yml. Modify the theme configuration file _config.butterfly.yml to [BlogRoot/_config.butterfly.yml].

AddThis

1. Go to the AddThis official website to register an account and enter the information in the figure below.

1. CONFIGURE WEBSITE TOOLS. First, select Share Buttons.

Then choose the sharing model: Floating, Inline, Expanding, Image Sharing, Popup, Banner, Slider. The effect of each model is as follows:

Floating

Inline

Expanding

Image Sharing

Popup

Banner

Slider

Click [Continue] and make some customized settings for different models. For example, select the number of sharing platforms, set the size of buttons, color, set the color of icons, where the model appears, etc. Here is only an example of Floating, please see the following figure for the specific effect:

Finally, click the [Activate Tool] button.

1. Find [Get The Code]-> [Just Copy] to see your pub-id

1. Modify the theme configuration file _config.butterfly.yml.

addThis:
  enable: true # or false
  pubid: 你的pub-id           

1. Recompile and run, and you can see the effect.

Sharejs

If you don't know sharejs(https://github.com/overtrue/share.js/), you can check out its documentation.

Modify the theme configuration file _config.butterfly.yml

sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq  #想要显示的内容           

Addtoany

If you don't know AddToAny: Share Buttons by the Universal Sharing Platform, check out its documentation.

Modify the theme configuration file _config.butterfly.yml

addtoany:
  enable: true
  item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link           

The effect is as follows: