Ver 0.9.6 二维码显示不正确 about castle-typecho-theme HOT 33 CLOSED

Chrome 上此问题复现，FireFox Developer Edition 上无法复现 (只能用 Chrome 的垃圾调试器来调试一下了)

手动执行这段js能正常显示

from castle-typecho-theme.

是新功能吗?我用的Cent Browser (Chrome 86.0.4240.198)

from castle-typecho-theme.

应该也是某个 CSS 不兼容没生效？

应该不是，我没有用奇怪的语法
仅压缩后的 CSS 才会，可能是某处的空格之类的被压没了（挠头）

奇奇怪怪的bug又增加了(

from castle-typecho-theme.

已解决，Close。

from castle-typecho-theme.

经过我的简单排查,deviceQR方法内部并无错误,但是并未被调用

from castle-typecho-theme.

Chrome上此问题复现,FireFox Developer Edition 上无法复现 (只能用Chrome的垃圾调试器来调试一下了)

from castle-typecho-theme.

Chrome 上此问题复现，FireFox Developer Edition 上无法复现 (只能用 Chrome 的垃圾调试器来调试一下了)

确实，Firefox 上没这问题，看看到底是哪里导致 Chrome 上面出问题了

from castle-typecho-theme.

Chrome的调试器有点渣,不好在执行的地方下断点,我这边尝试本地搞一个Typecho试试

from castle-typecho-theme.

Chrome 的调试器有点渣，不好在执行的地方下断点，我这边尝试本地搞一个 Typecho 试试

初步猜想是这个判断不兼容 Chrome
(乱猜的，没验证

from castle-typecho-theme.

from castle-typecho-theme.

经过调试,发现从始至终Chrome并未调用那个function

from castle-typecho-theme.

是Chrome的异常抛出在highlight函数这里,然后导致在他后面的deviceQR未能执行

from castle-typecho-theme.

将highlight函数进行try...catch并忽略异常后,二维码成功显示
相关代码如下

// 此方法仅为测试错误使用,请不要再生产环境使用
highLight: function() {
      try {
         $$('code[class^="lang"]:not(pre code)').each((function(key, item) {
            let child = item
              , parent = document.createElement("pre");
            child.parentNode.replaceChild(parent, child),
            parent.appendChild(child)
        }
        )),
        $$("pre code").each((function(key, item) {
            !1 === item.classList.contains("hljs") && $$(this).html("<ol><li>" + $$(this).html().replace(/\n/g, "\n</li><li>") + "\n</li></ol>")
        }
        )),
        $$(document).ready((function() {
            $$("pre code").each((function(key, item) {
                !1 === item.classList.contains("hljs") && hljs.highlightBlock(item)
            }
            ))
        }
        ))
      } catch (error) {
         //ignore
      }
       
   },

from castle-typecho-theme.

后话: 根治这个问题的方法是修复highLight函数的问题,上面那个仅是加了个try catch来暴力忽略错误
好像是Chrome的QuerySelector不支持:not语法而FireFox支持此语法
建议 @bakaomg 在之后换一下这个QuerySelector

from castle-typecho-theme.

emmm 我在本地测试是完全没问题的，奇怪了

from castle-typecho-theme.

@kengwang

其实是支持的（

from castle-typecho-theme.

这边测试环境是 Chrome 89.0.4389.114

from castle-typecho-theme.

Google Chrome 90.0.4430.72 不复现 QAQ
这是要让我回归Chrome的节奏吗? QAQ 我挺舍不得 Cent Browser的

from castle-typecho-theme.

而且我发现一个问题，生产环境和开发环境差别很大，比如评论区代码高亮的换行没了
很奇怪...

from castle-typecho-theme.

是新功能吗？我用的 Cent Browser (Chrome 86.0.4240.198)

我也是 Cent Browser (Chrome 86.0.4240.198) XD

from castle-typecho-theme.

@kengwang

其实是支持的（

Chrome 要 88 以上
建议马上改个适用性强一点的方法

from castle-typecho-theme.

emmm 其实历史版本中有多处使用了 :not 选择器... 好像也没出现过很严重的问题
我尝试用其他方法实现（

from castle-typecho-theme.

emmm 其实历史版本中有多处使用了 :not 选择器... 好像也没出现过很严重的问题
我尝试用其他方法实现（

:not有两种用法，
Negation pseudo-class selector (:not()) 能完全兼容 Chrome
而 Selector list argument ,也就是这次用的只支持 88 以上的 Chrome

from castle-typecho-theme.

emmm 其实历史版本中有多处使用了 :not 选择器... 好像也没出现过很严重的问题
我尝试用其他方法实现（

貌似要把 :not 里面的 pre code 分开表述?
好像就是这样的

from castle-typecho-theme.

貌似要把 :not 里面的 pre code 分开表述?

分开表述的话 好像就没法排除了（
想读取子元素有无 ol 发现 each 内无法获取（

from castle-typecho-theme.

貌似要把 :not 里面的 pre code 分开表述？

分开表述的话 好像就没法排除了（
想读取子元素有无 ol 发现 each 内无法获取（

以下均为瞎说警告(
我不是很懂JavaScript ,可能 大概是这样吧

from castle-typecho-theme.

试了下 是无效的（因为也不是 JQ 而是 MDUI 的 Mini JQ 库）
还是先在后端处理完再输出，曲线救国吧（

from castle-typecho-theme.

还有二维码的边距到生产环境就没了，蛮奇怪的

from castle-typecho-theme.

还有二维码的边距到生产环境就没了，蛮奇怪的

应该也是某个CSS不兼容没生效?

from castle-typecho-theme.

应该也是某个CSS不兼容没生效?

应该不是，我没有用奇怪的语法
仅压缩后的 CSS 才会，可能是某处的空格之类的被压没了（挠头）

from castle-typecho-theme.

@CberYellowstone 已修（

from castle-typecho-theme.

from castle-typecho-theme.

目前在学校，明天中午验证一下（

可（

from castle-typecho-theme.