请教一个图标显示问题

本贴最后更新于 306 天前,其中的信息可能已经时移世易

我根据论坛伙伴的 JS 代码为【笔记本】和【普通文档】以及【含有子文档的父文档】设置了默认显示的图标(代码附在下方)。

但是移动端【笔记本】的图标总会在重建索引后失效,被显示为默认的 🗃️。而电脑上即使重建索引显示也是正常的。

提供一个演示录屏:

点击立即同步后显示为正常。重建索引后图标显示异常。

问题可能不是很直观,希望有大神理解之后能指点一下是否有解决的办法!感谢耐心!

代码

所使用的两段自定义 JS 代码:

// 切换主题后需刷新页面才能生效

// 普通文档:siyuan.storage["local-images"].file='1f4c4'
// 含有子文档的父文档:siyuan.storage["local-images"].folder='1f4d1'
// 笔记本:siyuan.storage["local-images"].note='1f5c3'

// 亮色主题
if(siyuan.config.appearance.mode === 0) {
    // 默认主题
    if(siyuan.config.appearance.themeLight === 'daylight'){
        siyuan.storage["local-images"].folder = 'ns.svg'
        siyuan.storage["local-images"].note = 'nb.svg'
        siyuan.storage["local-images"].file = 'n.svg'
    }
    // 其他主题
    if(siyuan.config.appearance.themeLight === 'macchiato') {
  
    }
}
// 暗色主题
else {
    // 默认主题
    if(siyuan.config.appearance.themeDark === 'midnight'){
        siyuan.storage["local-images"].folder = 'ns-d.svg'
        siyuan.storage["local-images"].note = 'nb-d.svg'
        siyuan.storage["local-images"].file = 'n-d.svg'
    }
    // 其他主题
    if(siyuan.config.appearance.themeDark === 'macchiato') {
        siyuan.storage["local-images"].folder = 'ns-d.svg'
        siyuan.storage["local-images"].note = 'nb-d.svg'
        siyuan.storage["local-images"].file = 'n-d.svg'
    }
}
// 监听主题切换
(()=>{
    // 当主题色变化时执行
    observeThemeModeChange((newMode) => {
        if(newMode === 'light') {
            // 亮色主题
            siyuan.storage["local-images"].folder = 'ns.svg'
            siyuan.storage["local-images"].note = 'nb.svg'
            siyuan.storage["local-images"].file = 'n.svg'
        } else {
            // 暗色主题
            siyuan.storage["local-images"].folder = 'ns-d.svg'
            siyuan.storage["local-images"].note = 'nb-d.svg'
            siyuan.storage["local-images"].file = 'n-d.svg'
        }
        // 刷新页面
        location.reload();
    });
  
    function observeThemeModeChange(callback) {
        // 选择目标节点
        const targetNode = document.documentElement; // <html> 元素
  
        // 配置观察选项:
        const config = { attributes: true, attributeFilter: ['data-theme-mode'] };
  
        // 当观察到变动时的回调函数
        const mutationCallback = function(mutationsList, observer) {
            for (let mutation of mutationsList) {
                if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme-mode') {
                    const newValue = document.documentElement.getAttribute('data-theme-mode');
                    // 调用用户提供的回调函数
                    if (typeof callback === 'function') {
                        callback(newValue);
                    }
                }
            }
        };
  
        // 创建一个观察器实例并传入回调函数
        const observer = new MutationObserver(mutationCallback);
  
        // 开始观察目标节点
        observer.observe(targetNode, config);
  
        // 返回一个停止观察的方法
        return {
            disconnect: () => observer.disconnect()
        };
    }
})();

代码所参考的帖子

  1. 思源笔记丨如何更改默认的文档、父文档、笔记本图标
  2. 我想修改文档图标默认请问怎么弄?
  • 思源笔记

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

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

    28448 引用 • 119792 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    11156 引用 • 50667 回帖 • 52 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • HugZephyr 1 1 评论

    以我拙劣的前端知识, 我找到了可能是这个原因

    正常情况下
    都是 先执行的 js 脚本 修改了图标, 然后再渲染文档树, 这个时候会使用修改后图标去渲染

    然而重建索引的时候
    文档树开始的比较快, 在渲染的过程中, js 开始执行, 修改了图标
    就会导致 相对外层是默认图标, 比较深的是修改后图标

    笔记本折叠再展开之后, 子文档会重新使用修改后图标进行渲染

    这个问题可以通过
    给第一段 js 代码延时 200ms(不定)后执行复现, 这是我加了延时 200ms, 刷新页面复现的

    image.png

    根本原因是: 文档树先开始渲染, js 后开始
    解决办法就是让 文档树更慢开始, 或者 让 js 更快开始

    或者让笔记本重新渲染

    不过 我暂时没啥办法解决, 可以蹲一蹲其他大佬

    1 回复
    非常感谢费心!只能继续蹲一下解决办法了
    veee
  • 其他回帖
  • veee

    点击重建索引时,会短暂显示正常,重建完成之后就显示成 🗃️ 了。

  • 麻烦楼主测试一下 JS 只用这部分,然后每次重建索引之后能否生效:

    siyuan.storage["local-images"].folder = 'ns.svg'
    siyuan.storage["local-images"].note = 'nb.svg'
    siyuan.storage["local-images"].file = 'n.svg'
    
    电脑上仍然正常,手机上也仍然不行。重建索引时短暂正常,完成后就显示成 🗃️ 了。(只启用了这三行 JS 代码,其他都关闭了)
    veee
  • HugZephyr

    手机端有刷新么, 刷新下看看(快捷键 -> 刷新), 或者, 在 js 代码后面加个空格, 看看

    感觉像是重建索引之后, 也需要重新执行 js 片段, 但是没有执行 js

    1 回复
  • 查看全部回帖

推荐标签 标签

  • CodeMirror
    2 引用 • 17 回帖 • 197 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 847 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    182 引用 • 400 回帖 • 1 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 548 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    201 引用 • 120 回帖
  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 694 关注
  • Outlook
    1 引用 • 5 回帖
  • 分享

    有什么新发现就分享给大家吧!

    251 引用 • 1801 回帖 • 1 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 702 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    695 引用 • 538 回帖 • 1 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    215 引用 • 358 回帖
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    173 引用 • 1559 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 188 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 44 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 193 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 1 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖 • 1 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    17 引用 • 7 回帖 • 1 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    240 引用 • 224 回帖
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 184 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    8 引用 • 69 回帖 • 6 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 668 关注
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖 • 3 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1449 引用 • 10092 回帖 • 488 关注