请教一个图标显示问题

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

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

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

    25114 引用 • 103539 回帖 • 1 关注
  • Q&A

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

    9579 引用 • 43576 回帖 • 97 关注

相关帖子

欢迎来到这里!

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

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

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

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

    1 回复
  • Elystraw 3 评论 via macOS

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

    重建索引之后, 干掉软件重进, 会恢复么?
    EmberSky 1
    @EmberSky 不会,试过了
    Elystraw
    @Elystraw 那我就不太会了
    EmberSky 1
  • Elystraw via macOS

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

  • EmberSky 1 1 评论

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

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

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

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

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

    image.png

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

    或者让笔记本重新渲染

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

    1 回复
    非常感谢费心!只能继续蹲一下解决办法了
    Elystraw
  • 我怎么感觉应该要先执行 JS

    不知道执行顺序有办法改变不?
    Elystraw
    是要先执行 js, 但是楼主手机上先执行的渲染
    EmberSky
  • 麻烦楼主测试一下 JS 只用这部分,然后每次重建索引之后能否生效:

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

推荐标签 标签

  • sts
    2 引用 • 2 回帖 • 228 关注
  • 服务

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

    41 引用 • 24 回帖 • 2 关注
  • 持续集成

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

    15 引用 • 7 回帖
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    31 引用 • 108 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 569 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 2 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 316 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 37 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 77 回帖 • 1 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    298 引用 • 762 回帖 • 1 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 36 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 18 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3455 回帖 • 164 关注
  • 招聘

    哪里都缺人,哪里都不缺人。

    189 引用 • 1057 回帖 • 1 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 645 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    171 引用 • 3848 回帖 • 2 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 608 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 26 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 544 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 341 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    161 引用 • 307 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 680 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 644 关注
  • Visio
    1 引用 • 2 回帖
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    494 引用 • 928 回帖 • 1 关注