📚 文档目录

01-添加自定义css和js文件02-footer栏03-友链卡片样式04-站点图片批量半自动截图05-分类磁贴插件版06-添加侧边栏电子钟07-侧边栏归档、分类修改08-标签云增加文章数上下标09-顶部加载渐变条10-导航栏魔改11.1-返回顶部按钮显示网页阅读进度11.2-添加白天夜间模式转换动画11.3-增加分享本页11.4-直达底部12-添加51统计13-404页面展示最近文章14-分类标签归档页增加文章索引15-新标签打开文章16-使用Algolia搜索17-文章双栏布局插件18-动态分类标签导航栏19-增加评论热评轮播功能20-链接卡片标签外挂21-新年倒计时卡片22-文章统计图页面23-隐藏部分文章不在首页显示

引入ClipboardJS

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

1
2
3
4
5
6
7
8
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增加以下代码：

1
2
3
4
5
6
7
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文件中添加如下代码

1
2
3
4
5
6
7
// 分享本页start
function share() {
    let url = window.location.origin + window.location.pathname
    new ClipboardJS(".share", { text: function() { return '标题：' + document.title + '\n链接：' + url } });
    btf.snackbarShow("本页链接已复制到剪切板，快去分享吧~")
}
// 分享本页end
11.4-直达底部 11.2-添加白天夜间模式转换动画