代码复制按钮无法正常显示

ppoffice / hexo-theme-icarus

A simple, delicate, and modern theme for the static site generator Hexo.

https://ppoffice.github.io/hexo-theme-icarus/

MIT License

6.35k stars 1.55k forks source link

代码复制按钮无法正常显示 #825

Closed ce-amtic closed 3 years ago

ce-amtic commented 3 years ago

Bug描述 初次打开网页时，代码框的复制按钮无法正常显示，按 Ctrl+R 刷新后依然不能显示（如图），但是按 Shift+F5 刷新后又可以显示。

反复确认主题配置并未发现问题。去看了一下您的 demo，发现存在同样的问题，想不到是出于什么原因。

截图

ppoffice commented 3 years ago

请按照issue模板列出你的主题配置以及浏览器环境

ce-amtic commented 3 years ago

主题配置

article:
    highlight:
        theme: atom-one-light
        clipboard: true
        fold: folded
    thumbnail: true
    readtime: true
    licenses:

浏览器是 Google Chrome 87.0，另外使用 Firefox 浏览器（版本不是很清楚）测试过，也存在同样的问题。

ppoffice commented 3 years ago

CDN呢？

ce-amtic commented 3 years ago

providers:
    cdn: jsdelivr
    fontcdn: google
    iconcdn: https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css

图标用了国内的 CDN，会不会是这个原因？

ppoffice commented 3 years ago

@ce-amtic 可能是你的网络环境无法正确加载jsdelivr。请参照https://ppoffice.github.io/hexo-theme-icarus/Configuration/icarus%E7%94%A8%E6%88%B7%E6%8C%87%E5%8D%97-cdn%E6%8F%90%E4%BE%9B%E5%95%86/ 将你的CDN换为loli.net

ce-amtic commented 3 years ago

已经替换 CDN 配置，但是问题依然存在。

providers:
    cdn: loli
    fontcdn: loli
    iconcdn: loli

发现 clipboard.js 已经成功加载，但是

<div class="level-right">
    <a href="javascript:;" class="copy" title="Copy" data-clipboard-target="#code-1609503773896788 .code">
        <i class="fas fa-copy"></i>
    </a>
</div>

这段代码有时会变成这个样子

<div class="level-right">
</div>

两种情况下均能找到 clipboard.js

我发现您的 demo 也存在同样的问题，是我的网络环境导致的吗？

ppoffice commented 3 years ago

@ce-amtic 更换浏览器或者使用隐私模式浏览网页观察是否有同样问题。记得禁用所有第三方插件。

hamlinzheng commented 3 years ago

+1，同样的问题。更换过多个CDN、Chrome的普通模式以及隐私模式、Edge浏览器访问都会出现上述不出现复制按钮的情况（补充：第一次进入页面是能加载出复制按钮的，但是F5刷新后复制按钮就不见了），使用Ctrl+F5刷新后复制按钮重新出现。另外通过观察，访问使用旧版Icarus主题的博客没有这个问题，新版（4.0+）似乎都有这个问题。

ppoffice commented 3 years ago

@hamlinzheng @ce-amtic 请更新主题至最新commit。

ce-amtic commented 3 years ago

已经解决问题，非常感谢！