点击上/下一页后，插件在新页面未生效

fiteen commented 4 years ago

问题一

问题描述：如题。通过标题进入当前网页，代码复制功能有效；但通过上/下一页进入新的一篇文章时，插件无效。

问题二

问题描述：文章 markdown 中插入代码折叠，点击折叠框时周围会出现一圈蓝色边框。
相关代码：

<details>
  <summary>Summary</summary>
  <p>Content<p>
</details>

对前端不是很熟悉，或许要加一下 :focus {outline:none;} 样式？

补充：点击搜索框也有这个情况，貌似是主题升级到 v2.6.1 之后出现的。

ikeq commented 4 years ago

问题 1：

因为是异步渲染，页面不会刷新，解决方案就是要么使用 web components（插入和移除 dom 都有完整的生命周期回调），要么事件委托，以你这里的代码为例，

plugins:
  # 插入依赖 libs
  - //cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.js
  - //cdn.jsdelivr.net/gh/fiteen/fiteen.github.io@v0.1.0/clipboard-use.js
  - //cdn.jsdelivr.net/gh/fiteen/fiteen.github.io@v0.1.1/clipboard.css
  - lib/font-awesome/css/font-awesome.min.css

  # 插入事件委托代码
  - tag: script
    code: |
        $('main').on('click', '.btn-copy', function() {
          // 需要直接执行 copy 动作
        })

  # 在每一篇文章渲染完毕后，插入复制代码的小 icon
  - position: [post, page]
  - template: |
      $(".highlight .code pre").before('<i class="btn-copy fa fa-clipboard"></i>');

问题 2：

之前考虑到可访问性的问题故把 :focus { outline: none } 删掉了，后面优化一下～

fiteen commented 4 years ago

@ikeq 感谢解答。

不过我按照这个上面介绍的方式试了一下，点击上/下一页后复制 icon 并未重新渲染出来。

下面是我的配置代码，能否帮忙看一下问题在哪里。

plugins:
  # 插入依赖 libs
  - //cdn.jsdelivr.net/gh/fiteen/fiteen.github.io@v0.1.1/clipboard.css
  - //cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.js
  - lib/font-awesome/css/font-awesome.min.css

  # 插入事件委托代码
  - tag: script
    type: text/javascript
    code: |
      $(function() {
        $('main').on('click', '.btn-copy', function() {
          new ClipboardJS('.btn-copy', {
            target: function (trigger) {
              return trigger.nextElementSibling;
            }
          });
        })
      })

  # 在每一篇文章渲染完毕后，插入复制代码的小 icon     
  - position: [post, page]
    template: |
      <script type="text/javascript">
        console.log("--add icon--");
        $(".highlight .code pre").before('<i class="btn-copy fa fa-clipboard"></i>');
      </script>

ikeq commented 4 years ago

@fiteen console.log("--add icon--") 是否有执行？

fiteen commented 4 years ago

@ikeq 只有第一次进入才会执行，下一页的时候没有。

ikeq commented 4 years ago

我试了一下，是主题的问题，在修复之前，你可以试试这样写：

.highlight .code pre:after {
  padding: 2px;
  position: absolute;
  right: 5px;
  top: 5px;
  font: normal normal normal 14px/1 FontAwesome;
  cursor: pointer;
}
.highlight:hover .code pre:after {
  content: "\f0ea";
}


plugins:
  # 插入依赖 libs
  - //cdn.jsdelivr.net/gh/fiteen/fiteen.github.io@v0.1.1/clipboard.css
  - //cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.js
  - lib/font-awesome/css/font-awesome.min.css

  # 插入事件委托代码
  - tag: script
    type: text/javascript
    code: |
      $(function() {
        $('main').on('click', '.highlight .code pre', function() {
          console.log("--add icon--");
        })
      })

fiteen commented 4 years ago

@ikeq 可以解决，谢谢～

fiteen commented 4 years ago

@ikeq enmm、好像还是有点难整，执行 copy 动作的这部分代码：

new ClipboardJS('.btn-copy', {
  target: function (trigger) {
    return trigger.nextElementSibling;
  }
});

用伪元素来代替 <i> 以后，我应该写什么来代替.btn-copy 呢？（前端很菜，见谅）

ikeq commented 4 years ago

@fiteen

new ClipboardJS(this, {
  target(trigger) {
    return trigger;
  }
});

ikeq commented 4 years ago

之前由于组件缓存，导致 js 执行失败，均已修复，应该可以使用 https://github.com/ikeq/hexo-theme-inside/issues/194#issuecomment-588029002 这个方案了。

ikeq / hexo-theme-inside

点击上/下一页后，插件在新页面未生效 #194

问题一

问题二

问题 1：

问题 2：