请教一个图标显示问题

我根据论坛伙伴的 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. 我想修改文档图标默认请问怎么弄?
  • 思源笔记

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

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

    25771 引用 • 106684 回帖
  • Q&A

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

    9883 引用 • 44937 回帖 • 79 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • veee 3 评论 via macOS

    手机端好像没找到刷新。加空格是在哪里加呢?没太懂...直接在后面加试了下还是不行

    重建索引之后, 干掉软件重进, 会恢复么?
    HugZephyr 1
    @EmberSky 不会,试过了
    veee
    @Elystraw 那我就不太会了
    HugZephyr 1
  • 其他回帖
  • 我怎么感觉应该要先执行 JS

    不知道执行顺序有办法改变不?
    veee
    是要先执行 js, 但是楼主手机上先执行的渲染
    HugZephyr
  • HugZephyr 1 1 评论

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

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

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

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

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

    image.png

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

    或者让笔记本重新渲染

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

    1 回复
    非常感谢费心!只能继续蹲一下解决办法了
    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
  • 查看全部回帖

推荐标签 标签

  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 738 关注
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖 • 4 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    186 引用 • 1020 回帖 • 1 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 676 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    92 引用 • 752 回帖
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 3 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖
  • Outlook
    1 引用 • 5 回帖 • 3 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 517 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 91 关注
  • 导航

    各种网址链接、内容导航。

    44 引用 • 177 回帖 • 1 关注
  • danl
    173 关注
  • Q&A

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

    9883 引用 • 44937 回帖 • 79 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 248 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 649 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    438 引用 • 1250 回帖 • 594 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    499 引用 • 1395 回帖 • 244 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 52 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 555 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 199 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 1 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    77 引用 • 37 回帖
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    45 引用 • 114 回帖 • 179 关注