问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何使用docsify的插件 click-to-copy ?

头像
葬天尘
    3673166322

    docsify 官方关于 click-to-copy 插件的介绍是：https://docsify.js.org/#/zh-cn/plugins?id=%e5%a4%8d%e5%88%b6%...
    我按照下面步骤应用到我的文档中：

    1. 在项目根目录下的 index.html 中的最后引用依赖项目
    <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
    1. 还是在文件 index.html 中做如下配置
    window.$docsify = {
      copyCode: {
          // buttonText : 'buttonText:String',
          // errorText  : 'errorText:String',
          // successText: 'successText:String'

          buttonText: {
              '/zh-cn/': '点击复制',
              '/ru/': 'Скопировать в буфер обмена',
              '/de-de/': 'Klicken Sie zum Kopieren',
              '/es/': 'Haga clic para copiar',
              '/': 'Copy to clipboard'
          },
          errorText: {
              '/zh-cn/': '错误',
              '/ru/': 'ошибка',
              '/': 'Error'
          },
          successText: {
              '/zh-cn/': '复制',
              '/ru/': 'Скопировано',
              '/de-de/': 'Kopiert',
              '/es/': 'Copiado',
              '/': 'Copied'
          }
      }
}

    重启后台服务：docsify serve 我的项目目录名称
    然后在代码 block 中右上角显示了 copy to clipboard 但是点击后并没有反应
    到文本文档中黏贴没有效果，官网文档看了几遍实在是搞不通了。

    docsify
    阅读 686
    avatarAI BotBETA

    这个问题可能是由于您的配置没有正确设置，或者有一些步骤没有完成。以下是如何正确使用 docsify 的 click-to-copy 插件的步骤：

    1. 在项目的根目录下，您需要引入 docsify 和 docsify-copy-code 插件。可以在 index.html 文件的底部添加以下代码：
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
    1. 在配置文件（例如，在 index.js 中），您需要设置 docsify 和 docsify-copy-code 插件：
    const docsify = require('docsify');
window.$docsify = docsify();

const copyCodePlugin = require('docsify-copy-code');
window.$docsify.use(copyCodePlugin, {
  buttonText: {
    '/zh-cn/': '点击复制',
    '/ru/': 'Скопировать в буфер обмена',
    '/de-de/': 'Klicken Sie zum Kopieren',
    '/es/': 'Haga clic para copiar',
    '/': 'Copy to clipboard'
  },
  errorText: {
    '/zh-cn/': '错误',
    '/ru/': 'ошибка',
    '/': 'Error'
  },
  successText: {
    '/zh-cn/': '复制',
    '/ru/': 'Скопировано',
    '/de-de/': 'Kopiert',
    '/es/': 'Copiado',
    '/': 'Copied'
  }
});
    1. 最后，您需要在文档中的代码块上添加 data-copy 属性，该属性的值是要复制的代码。例如：
    <pre><code data-copy="复制这段代码">const a = 1; const b = 2; console.log(a + b);</code></pre>

    请注意，您需要确保在文档中正确地引用了 copy-to-clipboard 插件，并在使用之前重新启动 docsify 服务。如果在这些步骤之后仍有问题，可能需要进一步检查您的配置或代码。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进