复制代码块主题组件

:warning: 此主题组件现已弃用,取而代之的是 复制代码块内容到剪贴板,这是 Discourse 的核心功能。

:sun_with_face: 在主题创建器中预览
:computer: Git 仓库: https://github.com/discourse/discourse-copy-codeblocks
:bulb: 如何安装主题或主题组件?

此主题组件为 Discourse 帖子中的代码块添加复制按钮——非常适合分享代码示例或需要复制文本的知识库文章的社区。

在桌面端,复制按钮会在鼠标悬停于代码块时显示。

在移动端,复制按钮始终显示,但会将代码块内的代码向下推,以避免遮挡过长的第一行代码。

请注意,此功能仅适用于由 ``` 生成的代码块,不适用于行内代码块。

这是一个代码块。
复制这段文本。

这是一个 行内代码块。此处无法复制。

特别感谢 @j.jaffeux,他完成了此功能的大部分初始开发工作。

24 个赞

这个与 https://meta.discourse.org/t/copy-option-for-code-blocks-in-discourse/60961?u=falco 有什么区别?

7 个赞

多个方面:

  • 不捆绑完整的剪贴板库
  • 不依赖 jQuery
  • 不会泄露事件监听器
  • 不依赖多个事件
  • 采用最新的编码标准
  • 不存在引用错误

不确定在移动设备上是否也能正常工作。

15 个赞

太棒了!

想了解一下,我们是否可以考虑用图标替换本地化的“复制”/“已复制”文字?例如,用 复制图标 表示“复制”,用 对勾图标 表示“已复制”?

3 个赞

我很乐意在组件中添加一个设置。我之所以选择使用本地化文本,是因为这样能清楚地说明正在发生的情况,而且文本即使高度较短也能保持可读性。从美观角度来看,这种方式似乎更符合该使用场景。

7 个赞

听起来我们应该移除或弃用其中一个,并整合精力?:thinking:

7 个赞

Minor issue: the copied delay is too fast on my iPhone. The text should say ‘copied’ for about 3 seconds before flipping back.

It does look good :+1:

8 个赞

在此处进行了修改:

https://github.com/discourse/discourse-copy-codeblocks/commit/d1af36a4a5197dab4ca1dd62a05930088882de45

此外还修复了与旧版 Discourse 相关的几个 bug,这些版本中缺少 @ember/runloop 以及来自 rsvp 库的 Promise。(感谢 @jomaxro 报告这些问题)

7 个赞

抱歉,但这次一个 :heart: 还不够。

太棒了!这真令人兴奋。结合这个 https://meta.discourse.org/t/discourse-placeholder-theme-component/113533,效果非常酷。

我刚才用它做了什么

sfdisk -d /dev/=gooddev= | sfdisk /dev/=newdev=
mdadm --manage /dev/md1 --add /dev/=newdev=
mdadm --detail /dev/md1

观看它运行!

while true; do mdadm --detail /dev/md1|grep "Rebuild Status" ; sleep 10;done

获取所有硬盘的通电时间

for x in a b c d ; do smartctl -a /dev/sd$x|grep Power_On; done
12 个赞

我非常喜欢这个功能!:heart_eyes: 不过,对于移动端,能否让“复制”按钮仅在点击时才显示?在移动端,每个代码块都多出一行,导致屏幕空间持续被占用,这让我有点沮丧:

不过,我也意识到:

  • 代码块并不是那么常见
  • 由于这是可选功能,你只会在那些确实经常需要复制代码块的网站上启用它

话虽如此……任何代码块在移动端被复制的概率都微乎其微,因此我觉得这里的 UI 与使用频率的比例不太合理,更希望移动端能采用点击后才显示的方式?

不急。

3 个赞

是的,这个请求完全合理:+1:我也有同样的担忧,我们会找到解决方案的。

1 个赞

Even this would be preferable on mobile, I think. Alignment is off but you get the concept:

(Even if it overlaps text, etc, not sure if that makes it harder or easier than on-tap display? :thinking:)

我们原本就有这个功能,但它会重叠文本且无法查看。我喜欢点击后显示的想法。我会去研究一下。

1 个赞

在移动设备上,这是一个更好的权衡,绝对如此。在笔记本电脑、台式机或平板上,多占用的空间完全没问题。

1 个赞

你好,

我很想使用这个功能,但一旦我为我的 Grey Amber 主题启用它,我的网站就变得迟缓,有时甚至无响应,直到我将其关闭。

有人遇到过这种行为吗?或者启用此功能时是否会对 VPS 造成过大负担?

该网站几乎 99.9% 的内容都是单行代码,我原本希望将其转换为代码块,因此它似乎并不需要尝试获取并转换任何现有代码。但事实真的如此吗?

我需要给它一些时间来正常运行吗?它只是持续导致网站暂时崩溃,有时页面加载时会显示错误,并出现 Discourse 的“请重试”提示。

提前感谢。

2 个赞

哇,这听起来确实是个严重的 bug!

1 个赞

次要错误:复制文本可能会出现在引用中。(比上一帖的问题轻微得多。)

需要排除引用中的 button.copy-cmd。在 CSS 中应用 user-select: none 可以修复 Ctrl-C 的问题,但无法修复引用功能。

3 个赞

你有你网站的链接吗?主题导致这种情况似乎非常奇怪。你页面上有多少个代码块?

所以我在这里做了多项更改。鉴于我们面临的问题是:

  • 移动端的屏幕空间
  • 引用时复制文本的 bug
  • 以及我们收到了希望使用图标而非文字的请求

解决所有这些问题的显而易见方案……就是使用图标。

在移动端,现在将其放在右侧是可以接受的,因为它占用空间更少,我们只需为文本添加一些内边距即可:

唯一的小问题是,如果第一行很长,它会被按钮遮挡,但考虑到你可以滚动查看,我认为这是可以接受的:

而在桌面端,它将像以前一样正常工作,且不再出现引用 bug:

关于潜在的性能 bug,我测试了一个包含数十个代码块的页面,没有任何问题。因此,在我能采取任何行动之前,需要复现该问题 @lcestou 请提供。

请在此处尝试新的代码块:

rsync -a file.txt file_backup.txt
rsync -a /var/www/public_html/ /var/www/public_html_backup/
7 个赞

此功能现已集成到 Discourse 核心中 :tada:

因此,此主题组件现已 弃用。它仍可在旧版 Discourse 实例中运行,但将不再接收任何更新。

我已更新原帖以反映此信息。

5 个赞