为分享 Bricks 设计添加一键复制到剪贴板按钮

更新于 2022 年 10 月 5 日。

Bricks 的流行度持续上升，再加上自 v1.5.3 起支持的跨站复制粘贴功能，意味着很快就会有很多人寻找一种方式来分享自己的 Section、Container 以及其他元素——无论是以免费还是付费俱乐部的形式。

本教程展示如何在 Bricks 中设置一个「复制到剪贴板」按钮，让你的访客或站点会员单击一下就能复制你的 Bricks 元素代码，并粘贴到他们自己的 Bricks 站点中。

按钮被点击后，文字会变为「Copied!（已复制）」，几秒后再恢复为「Click to Copy（点击复制）」。

页面上的按钮与属性

创建一个你想要放置复制按钮的页面，用 Bricks 编辑它。

1. 添加一个 Section。
2. 在该 Section 的 Container 内添加一个 Button（按钮）元素。
3. 将其文字设为类似「Click to Copy」。
4. 把 Link type（链接类型）设为 External URL（外部链接），链接填 #。
5. 进入 STYLE → Custom CSS，把 CSS ID 设为 copy-btn。
6. 进入 STYLE → ATTRIBUTES，添加一个新属性，名称为 data-code，在值中粘贴你的元素代码。
7. 如果 JSON 代码包含动态数据标签，你需要把所有 { 替换为：

{

以及把所有 } 替换为：

}

可使用 Sublime Text 或 Visual Studio Code 之类的文本/代码编辑器来完成替换。这可以规避标签在前端 JSON 中被渲染的问题。

8. 添加一个 Code（代码）元素，内容如下：

<script>
  function updateClipboard(newClip) {
    navigator.clipboard.writeText(newClip).then(() => {
      console.log('clipboard successfully set')
    }, () => {
      /* clipboard write failed */
    });
  }

  document.addEventListener('DOMContentLoaded', () => {
		document.querySelector('#copy-btn').addEventListener('click', (e) => {
      // store the original button text
      const buttonText = e.target.textContent
      
      // prevent the default link behavior
      e.preventDefault()
      
      // call the updateClipboard function whilst passing the "code" data attribute's value to it
      updateClipboard(e.target.dataset.code)
      
      // change the button text
      e.target.textContent = 'Copied!'
      
      // restore the original button text after 2s
      setTimeout(() => {
        e.target.textContent = buttonText
      }, 2000)
    })
	})
</script>

模板方式：按文章提供复制内容

我们可以设置一个自定义字段，填入 Bricks 元素的 JSON，并把该字段的值作为 data 属性的值，这样就能为每篇文章提供各自的「复制到剪贴板」按钮。

例如，为 post 文章类型添加一个 Text（文本）类型的自定义字段：bricks_code。

现在编辑你的文章，把 JSON 粘贴进该字段并发布/更新。

按照上面「页面」标题下的步骤操作——但要在应用于所有文章的 Bricks 模板中完成。

创建一个自定义函数，在把 { 和 } 替换为对应的 HTML 字符编码后，返回用 htmlentities() 包裹的自定义字段值。

如果使用 ACF：

function bl_get_cf() {
    $json = get_post_meta( get_the_ID(), 'bricks_code', true );

    $json = str_replace( '{', '{', $json );
    $json = str_replace( '}', '}', $json );

    return htmlentities( $json );
}

其中 bricks_code 是自定义字段的名称/ID。

把上面这个函数用于 data-code 属性的值。

参考资料

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

https://stackoverflow.com/a/69973457

https://forum.bricksbuilder.io/t/wait-svg-html-code-does-not-copy-with-copy-paste-function/6385

https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#examples

https://www.w3schools.com/Php/func_string_htmlentities.asp

https://www.rapidtables.com/web/html/html-codes.html

小结

通过给按钮设置 data-code 属性、配合一小段剪贴板 JS，就能让访客一键复制你的 Bricks 元素 JSON。若要按文章提供不同内容，可用 ACF 等自定义字段存储 JSON，并在模板中调用 bl_get_cf() 输出。关于为元素扩展自定义数据，也可参考 为元素添加自定义控制字段。

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程