volantis-x / hexo-theme-volantis

A Wonderful Theme for Hexo.
https://volantis.js.org
MIT License
1.98k stars 596 forks source link

【问题】:代码块有两个copy按钮 #888

Closed haloged closed 1 year ago

haloged commented 1 year ago

检查清单

主题版本

6.x

复现地址

https://haloged.eu.org/2023/05/14/untitled-1684066642418/

问题描述

在打开文章代码块时会显示两个copy按钮

配置文件

站点配置文件

```yml # Admin admin: name: ****** password: ****** secret: hey hexo expire: 60*1 # cors: http://localhost:3000 ```

主题配置文件

```yml ############################### Cover ############################### > start cover: height_scheme: full # full, half layout_scheme: search # blank (留白), search (搜索), dock (坞), featured (精选), focus (焦点) display: home: true archive: true others: false # can be written in front-matter 'cover: true' background: https://gcore.jsdelivr.net/gh/MHG-LAB/cron@gh-pages/bing/bing.jpg # background: https://bing.ioliu.cn/v1/rand?w=1920&h=1200 logo: # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-Cover@3x.png title: 'Haloged Blog' subtitle: '' search: A Wonderful Theme for Hexo # search bar placeholder ############################### Cover ############################### > end # 分享 share: - id: qq img: volantis-static/media/org.volantis/logo/128/qq.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png - id: qzone img: volantis-static/media/org.volantis/logo/128/qzone.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png - id: weibo img: volantis-static/media/org.volantis/logo/128/weibo.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png - id: qrcode # 当id为qrcode时需要安装插件 npm i hexo-helper-qrcode img: volantis-static/media/org.volantis/logo/128/wechat.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png - id: telegram img: volantis-static/media/org.volantis/logo/128/telegram.png # https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/telegram.png ############################### Article Layout ############################### > end ############################### Rightmenu ############################### > start ### 自定义右键 新 rightmenus: enable: true # 右键菜单项及加载顺序 # 内容示例:plugins.[组名], menus.[组名], hr(分割线,推荐去线留白), music(音乐控制器) order: - plugins.navigation - hr - plugins.inputBox - plugins.seletctText - plugins.elementCheck - plugins.elementImage - menus.link - hr - menus.darkMode - plugins.articlePage - music ############################ # - {id: '', name: '', icon: '', link: '', event: '', group: ''} # id: 唯一值 # name: 用于菜单名称显示 # icon: 用于菜单图标显示 # link: 跳转链接 # event: 事件,当输入内容不为内置事件时,作 JavaScript 代码执行 # group: 菜单项所处分组名称 # 注: # 1. link/event 二选一,同时出现时仅处理 link # 2. 内置事件列表: copyText, copyLink, copyPaste, copyAll, copyCut, copyImg, printMode, readMode # 3. 内置组列表:navigation, inputBox, seletctText, elementCheck, elementImage, articlePage # 4. plugins 列允许自定义组内项目 # 5. menus 列允许自定义组及其内容 # 6. 除 navigation 外的内置组,在显示时会隐藏含 link 属性的菜单项 ########################### # 基础项设置 options: # 图标前缀 fa-solid, fa-regular, fa-light, fa-thin, fa-duotone, fa-brands iconPrefix: fa-solid # 例外,在 articlePage 组显示时(文章页)时依旧显示含 link 属性的菜单项 articleShowLink: true # 当设定全局音乐播放器时,是否一直显示音乐控制菜单。false:仅当音乐播放时启用 musicAlwaysShow: true # 右键内置组,预置实现 plugins: # 导航组件 # 横向排列,共用一行,仅显示图标 (原则上支持的数量不限) navigation: - {id: 'left', name: '转到上一页', icon: 'fa-solid fa-arrow-left', event: 'history.back()', group: 'navigation'} - {id: 'right', name: '转到下一页', icon: 'fa-solid fa-arrow-right', event: 'history.forward()', group: 'navigation'} - {id: 'redo', name: '刷新当前页面', icon: 'fa-solid fa-redo', event: 'window.location.reload()', group: 'navigation'} - {id: 'up', name: '回到顶部', icon: 'fa-solid fa-arrow-up', event: 'VolantisApp.scrolltoElement(volantis.dom.bodyAnchor)', group: 'navigation'} #- {id: 'home', name: '回到首页', icon: 'fa-solid fa-home', link: '/', group: 'navigation'} # 文本输入框相关组件 # 生效于 input/textarea,粘贴、剪切、全选 inputBox: - {id: 'copyPaste', name: '粘贴文本', icon: 'fa-solid fa-paste', event: 'copyPaste', group: 'inputBox'} - {id: 'copyAll', name: '全选文本', icon: 'fa-solid fa-object-ungroup', event: 'copyAll', group: 'inputBox'} - {id: 'copyCut', name: '剪切文本', icon: 'fa-solid fa-cut', event: 'copyCut', group: 'inputBox'} # 文本选中类组件 # 生效于右键选中文本,__text__ 为选中的文本。 seletctText: - {id: 'copyText', name: '复制文本', icon: 'fa-solid fa-copy', event: 'copyText', group: 'seletctText'} - {id: 'searchWord', name: '站内搜索', icon: 'fa-solid fa-search', event: 'OpenSearch(__text__)', group: 'seletctText'} - {id: 'bingSearch', name: '必应搜索', icon: 'fa-solid fa-search', event: 'window.open(`https://cn.bing.com/search?q=${__text__}`)', group: 'seletctText'} #- {id: 'googleSearch', name: '谷歌搜索', icon: 'fa-solid fa-search', event: 'window.open(`https://www.google.com/search?q=${__text__}`)', group: 'seletctText'} # 链接判断组件 # 生效于链接处的右键行为,__link__ 为链接地址 elementCheck: - {id: 'openTab', name: '新标签页打开', icon: 'fa-solid fa-external-link-square-alt', event: 'window.open(__link__)', group: 'elementCheck'} - {id: 'copyLink', name: '复制链接地址', icon: 'fa-solid fa-link', event: 'copyLink', group: 'elementCheck'} # 图片判断类组件 # 生效于图片类的右键行为,__link__ 为链接地址 elementImage: - {id: 'copyImg', name: '复制图片', icon: 'fa-solid fa-image', event: 'copyImg', group: 'elementImage'} - {id: 'googleImg', name: '谷歌识图', icon: 'fa-solid fa-images', event: 'window.open(`https://www.google.com.hk/searchbyimage?image_url=${__link__}`)', group: 'elementImage'} # 文章页面组件 # 生效于 post.article 页面 articlePage: - {id: 'printMode', name: '打印页面', icon: 'fa-solid fa-print', event: 'printMode', group: 'articlePage'} - {id: 'readMode', name: '阅读模式', icon: 'fa-solid fa-book-open', event: 'readMode', group: 'articlePage'} # 右键自定义菜单区域 menus: link: - {id: 'help', name: '常见问题', icon: 'fa-solid fa-question', link: 'https://volantis.js.org/faqs/', group: 'link'} - hr darkMode: - {id: 'darkMode', name: '暗黑模式', icon: 'fa-solid fa-moon', event: 'volantis.dark.toggle()', group: 'darkMode'} ### # 自定义右键菜单 rightmenu: enable: false faicon: fa # 公共图标类型 fa fal fa-solid fa-duotone # hr: 分割线, music: 音乐控制器 layout: [home, hr, help, examples, contributors, hr, source_docs, source_theme, hr, print, darkmode, reading, music] ### 可选功能项 ### print: # 只有文章页才允许自定义打印 name: 打印页面 icon: fa fa-print darkmode: # 需开启 plugins.darkmodejs name: 暗黑模式 icon: fa fa-moon reading: name: 阅读模式 icon: fa fa-book-open customPicUrl: # 右键的图片复制:只有 Chrome 支持,且只支持 PNG 格式的图片。 enable: false # 如果使用了对象存储且开启了自适应 Webp,那么可以提供额外的链接用以替换图片的访问地址 old: #https://static.inkss.cn/img/article/ new: #https://cdn.jsdelivr.net/gh/inkss/inkss-cdn@master/img/article/ music: # 当设定全局音乐播放器时,是否一直显示音乐控制菜单。false:仅当音乐播放时启用 alwaysShow: true ### 自定义菜单 ### help: name: 常见问题 icon: fa fa-question url: https://volantis.js.org/faqs/ examples: name: 示例博客 icon: fa fa-rss url: https://volantis.js.org/examples/ contributors: name: 加入社区 icon: fa fa-fan fa-spin url: https://volantis.js.org/contributors/ source_docs: name: 本站源码 icon: fa fa-code-branch url: https://github.com/volantis-x/volantis-docs/ source_theme: name: 主题源码 icon: fa fa-code-branch url: https://github.com/volantis-x/hexo-theme-volantis/ ############################### Rightmenu ############################### > end ```

环境信息

node.js & npm

``` Node.Js版本:v18.12.1 npm版本:9.3.1 ```

package.json

``` +-- hexo-blog-encrypt@3.1.6 +-- hexo-browsersync@0.3.0 +-- hexo-deployer-git@3.0.0 +-- hexo-generator-archive@1.0.0 +-- hexo-generator-category@1.0.0 +-- hexo-generator-feed@3.0.0 +-- hexo-generator-index@2.0.0 +-- hexo-generator-sitemap@3.0.1 +-- hexo-generator-tag@1.0.0 +-- hexo-helper-qrcode@1.0.2 +-- hexo-hey@0.4.1 +-- hexo-renderer-ejs@1.0.0 +-- hexo-renderer-jade@0.5.0 +-- hexo-renderer-marked@4.1.0 +-- hexo-renderer-stylus@2.1.0 +-- hexo-server@2.0.0 +-- hexo-theme-fluid@1.9.4 +-- hexo-theme-icarus@5.1.1 +-- hexo-theme-landscape@0.0.3 +-- hexo-theme-volantis@5.7.7 +-- hexo-wordcount@6.0.1 `-- hexo@5.4.2 ```

inkss commented 1 year ago

请问关于代码高亮您是如何设置的?

站点配置文件中的 highlight.enable 设置情况为?

haloged commented 1 year ago
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: true
inkss commented 1 year ago

暂时先将 hljs: true 修改为 false 吧。

此时的 Html 输出与现有的选择器起了冲突 .article pre code

VolantisApp.utilCopyCode(".highlight .code pre, .article pre code")

终于可以在线写文章了!!!