Hexo Theme Butterfly主题代码块行号复制：提升代码使用便捷性-CSDN博客

Hexo Theme Butterfly主题代码块行号复制：提升代码使用便捷性

【免费下载链接】hexo-theme-butterfly 🦋 A Hexo Theme: Butterfly 项目地址: https://gitcode.com/gh_mirrors/he/hexo-theme-butterfly

作为一名技术博主或开发者，在撰写技术文章时，代码块是不可或缺的元素。读者常常需要复制代码块中的内容进行学习和实践。然而，默认情况下，Hexo主题Butterfly的代码块可能不包含行号复制功能，这给读者带来了不便。本文将详细介绍如何在Hexo Theme Butterfly主题中实现代码块行号复制功能，提升代码使用的便捷性。

功能概述

代码块行号复制功能可以让读者在复制代码时，自动忽略行号，只复制代码内容。这一功能的实现主要依赖于Prism.js语法高亮库和主题的配置文件。通过对主题配置和相关模板文件的修改，我们可以轻松地为代码块添加行号复制功能。

实现步骤

步骤一：启用Prism.js语法高亮

首先，我们需要确保主题使用Prism.js作为语法高亮工具。在主题配置文件_config.yml中，找到syntax_highlighter选项，将其设置为prismjs。

# _config.yml
syntax_highlighter: prismjs

步骤二：配置代码块行号和复制功能

在_config.yml中，找到code_blocks配置项，确保copy和line_number选项被正确设置。

# _config.yml
code_blocks:
  # 代码块主题: darker / pale night / light / ocean / false
  theme: light
  macStyle: false
  # 代码块高度限制 (单位: px)
  height_limit: false
  word_wrap: false

  # 工具栏
  copy: true  # 启用复制功能
  language: true  # 显示语言
  # true: 收缩代码块 | false: 展开代码块 | none: 展开代码块并隐藏按钮
  shrink: false
  fullpage: false

同时，在prismjs配置中启用行号功能：

# _config.yml
prismjs:
  enable: true
  preprocess: false
  line_number: true  # 启用行号
  tab_replace: '  '

步骤三：修改Prism.js模板文件

接下来，我们需要修改Prism.js的模板文件layout/includes/third-party/prismjs.pug，添加复制功能的相关代码。

打开文件layout/includes/third-party/prismjs.pug，在现有的代码基础上添加复制按钮的HTML结构和JavaScript代码。

// layout/includes/third-party/prismjs.pug
- const { prismjs_js, prismjs_autoloader, prismjs_lineNumber_js } = theme.asset
- const { prismjs, syntax_highlighter } = config
- const { enable, preprocess, line_number } = prismjs

if (syntax_highlighter === 'prismjs' || enable) && !preprocess
  script.
    (() => {
      window.Prism = window.Prism || {}
      window.Prism.manual = true

      const highlightAll = () => {
        window.Prism.highlightAll()
        // 添加复制按钮功能
        document.querySelectorAll('pre[class*="language-"]').forEach(block => {
          const button = document.createElement('button')
          button.className = 'copy-code-button'
          button.textContent = '复制'
          button.addEventListener('click', () => {
            const code = block.querySelector('code').textContent
            navigator.clipboard.writeText(code).then(() => {
              button.textContent = '已复制'
              setTimeout(() => {
                button.textContent = '复制'
              }, 2000)
            }).catch(err => {
              button.textContent = '复制失败'
            })
          })
          block.appendChild(button)
        })
      }

      window.addEventListener('load', highlightAll)
      btf.addGlobalFn('pjaxComplete', highlightAll, 'prismjs')
      btf.addGlobalFn('encrypt', highlightAll, 'prismjs')
    })()

  script(src=url_for(prismjs_js))
  script(src=url_for(prismjs_autoloader))
  if (line_number)
    script(src=url_for(prismjs_lineNumber_js))

步骤四：添加复制按钮样式

为了让复制按钮看起来更美观，我们需要添加一些CSS样式。在主题的CSS文件中，例如source/css/_layout/post.styl，添加以下样式：

/* source/css/_layout/post.styl */
pre[class*="language-"] {
  position: relative;
}

.copy-code-button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #49B1F5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s;
}

.copy-code-button:hover {
  background-color: #3A95D5;
}

步骤五：验证配置

最后，我们需要验证配置是否生效。在layout/includes/head/config.pug文件中，确保代码块的复制功能已被正确配置。

// layout/includes/head/config.pug
const { copy, language, height_limit, fullpage, macStyle } = theme.code_blocks
highlight = JSON.stringify({
  plugin: syntaxHighlighter ? syntaxHighlighter : config.highlight.enable ? 'highlight.js' : 'prismjs',
  highlightCopy: copy,  // 确保复制功能已启用
  highlightLang: language,
  highlightHeightLimit: height_limit,
  highlightFullpage: fullpage,
  highlightMacStyle: macStyle
})

效果展示

完成以上配置后，重新生成博客并运行，我们可以看到代码块右上角出现了"复制"按钮。点击按钮后，代码内容将被复制到剪贴板，按钮文本变为"已复制"，2秒后恢复为"复制"。

常见问题解决

问题一：复制按钮不显示

如果复制按钮不显示，可能是以下原因：

code_blocks配置中的copy选项未设置为true。
Prism.js模板文件中的JavaScript代码未正确添加。
浏览器缓存问题，尝试清除缓存后重新加载页面。

问题二：复制的内容包含行号

如果复制的内容包含行号，可能是因为Prism.js的行号插件与复制功能冲突。确保在Prism.js模板中正确引入了行号插件，并在复制代码时过滤掉行号。

总结

通过以上步骤，我们成功地在Hexo Theme Butterfly主题中实现了代码块行号复制功能。这一功能的添加将极大地提升读者使用代码的便捷性，改善阅读体验。希望本文对您有所帮助，如有任何问题，请随时在评论区留言。

官方文档：README.md 主题配置：_config.yml

【免费下载链接】hexo-theme-butterfly 🦋 A Hexo Theme: Butterfly 项目地址: https://gitcode.com/gh_mirrors/he/hexo-theme-butterfly

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

Hexo Theme Butterfly主题代码块行号复制：提升代码使用便捷性