关于前端:基于-Hexo-键入分享功能

37次阅读

共计 1378 个字符,预计需要花费 4 分钟才能阅读完成。

原文链接:基于 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 自定义右键菜单

留神:主题集成了三种分享性能,别离是AddThisSharejsAddtoany,只能从其中抉择一个分享服务商。

AddThis

  1. 返回 AddThis 官网注册账号,输出下图中信息即可。
  2. 配置 WEBSITE TOOLS。
    首先首先抉择Share Buttons

    其次抉择分享模型:Floating、Inline、Expanding、Image Sharing、Popup、Banner、Slider。每种模型的成果如下:
    Floating

    Inline

    Expanding

    Image Sharing

    Popup

    Banner

    Slider

    点击【Continue】而后对不同的模型做一些定制化的设置。例如,抉择分享平台的个数、设置按钮的大小,色彩,设置图标的色彩、模型呈现的地位等。这里只对 Floating 做出举例,具体成果请看下图:

    最初点击【Activate Tool】按钮即可。

  3. 找到【Get The Code】->【Just Copy】,能够看到你的 pub-id
  4. 批改主题配置文件_config.butterfly.yml

    addThis:
      enable: true # or false
      pubid: 你的 pub-id
  5. 从新编译运行,即可看到成果。

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

成果如下:

正文完
 0