解决Matery代码块复制内容不换行问题
0x01 问题起因
在Hexo Matery主题开启复制版权copyright,并且设置了版权的信息后,会导致Matery原有的代码块复制内容换行失效,具体问题如下图所示:
0x02 问题分析
目前发现使用了Matery主题的博客上复制内容都会存在这个问题。
后来又去Matery作者博客上看,发现有提示复制成功,且没有换行失效。猜测是因为作者的复制内容虽然开启了版权copyright,但是没有添加复制版权信息的缘故。
从以上的对比,很明显matery原本的复制内容是可以正常换行的,但问题就是出在有没有添加copyright的版权信息上。
于是,回归Matery源代码找到添加copyright的复制版权信息的文件位置themes\matery\layout\_partial\post-detail.ejs
在源码中有个英文提示,是判断复制内容换行关键的判断语句
// otherwise the text inside "pre" loses all the line breaks!
if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
}
很明显问题就是出在这个判断语句上,既然复制内容不换行那就说明这个if条件判断是错误的。那么问题来了,在真正复制内容时selection.getRangeAt(0).commonAncestorContainer.nodeName
究竟是不是PRE
呢,我们使用console.log()
输出看看
从结果可以看出,当在复制内容时selection.getRangeAt(0).commonAncestorContainer.nodeName
的值是CODE
,而不是PRE
。所以由于if
判断的条件是错误的才导致复制内容不会换行。解决办法就是将其判断条件值改为CODE
即可
// otherwise the text inside "pre" loses all the line breaks!
if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'CODE') {
newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
}
修改完后重新部署博客,然后再试试复制内容效果,发现可以正常复制显示内容了
0x03 问题解决
综上分析,解决办法为找到文件themes\matery\layout\_partial\post-detail.ejs
中添加copyright的复制版权信息的代码位置大约在222行左右,修改if条件判断内容为CODE
即可
// otherwise the text inside "pre" loses all the line breaks!
if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'CODE') {
newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
}
至此,Matery代码块复制内容不换行问题解决,更多代码块问题查看这篇文章:Matery之代码块优化
相关文章
- 回溯法解决01背包问题算法_01背包问题伪代码
- 动态规划算法java代码_动态规划算法解决背包问题
- 20 个 解决日常编程问题的Python 代码片段
- 什么是低代码?低代码平台能解决什么样的问题?
- 20 个 解决日常编程问题的 Python 代码片段
- 关于微软 Edge 浏览器无法访问笔者 SAP UI5 教程示例代码的问题
- 【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )
- 2023-04-07:求解矩阵得分点问题!——本文探讨蚂蚁金服算法面试题,介绍两种解决方案:递归和数学公式。文章附有代码和示例,适合算法爱好者和面试备战者参考。
- 针对电商物流网络包裹应急调运与结构优化问题的解题【思路数据代码详解】
- vs2015下C4819该文件包含不能在当前代码页(936)中表示的字符问题解决详解编程语言
- 解决 Linux 内核代码审查人员短缺问题
- Oracle编程解决实际问题的利器(oracle写代码)
- 使用Redis解决幂等性代码问题(redis解决幂等代码)
- Java批量修改文件名的实例代码
- c++递归实现n皇后问题代码(八皇后问题)
- Ruby中用线程实现经典的生产者消费者问题代码实例