[js] 顶栏添加刷新按钮

作用

在顶栏 VIP 按钮前面添加一个刷新按钮,就算不显示 VIP 按钮也能正常添加。(附图中就是不显示的)

PixPin20241013181435.png

代码

(function() {
  function addBtnRefresh() {
    let settingBtn = document.createElement("div");
    settingBtn.id = "refreshBtn";
    settingBtn.classList = "ariaLabel toolbar__item";
    settingBtn.ariaLabel = "刷新页面";
    settingBtn.innerHTML = `<svg><use xlink:href="#iconRefresh"></use></svg>`;

    settingBtn.addEventListener(
      "click",
      function (e) {
        location.reload();
      }
    );
    return settingBtn;
  }
var vip = document.getElementById("toolbarVIP");
vip.parentNode.insertBefore(addBtnRefresh(),vip);
})();

使用方法

将代码复制到代码片段里面启用。

注意事项

没有做特殊判断,虽然插件只添加一次按钮,但是极为特殊情况下可能出现别的现象(几乎完全不会出现问题)。

我记得快捷键那里的刷新就是用的 reload,所以这里直接拿来用了。主题里面也用的刷新,没见出问题。如果遇到有内容不刷新还请告诉我。

参考代码

[js] 全屏和刷新按钮、右上角倒计时 - 链滴

[js] 顶栏倒计时 - 链滴

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22376 引用 • 89563 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    70 引用 • 375 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • EmptyLight

    有些操作只靠刷新思源是没有效果的,这个刷新实际上相当于修改快捷键的刷新或者更换主题的刷新,真遇到什么问题还是建议重启思源。

  • 其他回帖
  • AtianLee 6 评论
    来晚了,看来已经有结论了,不过你顶栏上面是添加了两次按钮吗?还是两个按钮凑巧外观一样?
    EmptyLight
    @EmptyLight 另一个是工具栏插件,不知道为啥他的图标和刷新的一样
    AtianLee
    @JeffreyChen 谢谢,看样子只能索引一层文件夹
    AtianLee
    @AtianLee 我偷懒用的自带刷新图标
    EmptyLight
    你只能用一层文件夹了
    JeffreyChen
  • AtianLee 6 评论

    楼主,刷新后为啥资源库还是不更新啊,还是要退出思源再打开,才能检测到新的资源

    1 回复
    资源库不刷新是遇到什么问题?在什么情况下出现的?
    EmptyLight
    @EmptyLight 就比如说,我复制个 pdf 文件到 assets 文件夹下,然后再去引用这个 pdf 资源,搜索不到该资源,这个刷新也不行,只能关闭思源再重新打开才能搜索到这个资源
    AtianLee
    @AtianLee 应该不会的,你可以录屏看看
    JeffreyChen
    @AtianLee 建议录屏发社区问下,这个不是我的代码问题,或许是刚复制进去的没有建立资源索引,或者没能立即显示出来(不过思源的资源文件建议附加 id,直接粘贴到文档里面思源会处理的,pdf 默认也是引用形式)
    EmptyLight
    @JeffreyChen 佬,帮忙看下
    AtianLee
    @EmptyLight 佬,帮忙看下
    AtianLee