【butterfly】增加分享本页

距离上次更新已经过了 955 天，文章所描述的内容可能已经发生变化，请留意。

引入 ClipboardJS

在主题配置文件_config.butterfly.yml 中的 inject 项下面 bottom 项添加如下代码：

diff

inject:
  head:

  bottom:
    # 自定义js
    - <script src="/js/script.js?v1"></script>
+    # ClipboardJS
+    - <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>

添加按钮

在 [you_blog]\themes\butterfly\layout\includes\rightside.pug 增加以下代码：

diff

when 'comment'
  if commentsJsLoad
    a#to_comment(href="#post-comment" title=_p("rightside.scroll_to_comment"))
      i.fas.fa-comments
+when 'share'
+  button.share(type="button" title='分享链接' onclick="share()")
+    i.fas.fa-share-nodes

增加 js

在自定义 js 文件中添加如下代码

// 分享本页start
function share() {
    let url = window.location.origin + window.location.pathname
    new ClipboardJS(".share", { text: function() { return '标题：' + document.title + '\n链接：' + url } });
    btf.snackbarShow("本页链接已复制到剪切板，快去分享吧~")
}
// 分享本页end