请教一个图标显示问题

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

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

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

    24827 引用 • 102132 回帖
  • Q&A

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

    9418 引用 • 42911 回帖 • 109 关注

相关帖子

欢迎来到这里!

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

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

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

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

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

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

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

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

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

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

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

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

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

    image.png

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

    或者让笔记本重新渲染

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

    1 回复
    非常感谢费心!只能继续蹲一下解决办法了
    Elystraw
  • 查看全部回帖

推荐标签 标签

  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 60 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 53 关注
  • Git

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

    211 引用 • 358 回帖
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • 叶归
    5 引用 • 16 回帖 • 11 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    143 引用 • 442 回帖 • 1 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 5 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    53 引用 • 40 回帖
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    22 引用 • 148 回帖 • 9 关注
  • 机器学习

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

    83 引用 • 37 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    951 引用 • 943 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 1 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖 • 1 关注
  • 心情

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

    59 引用 • 369 回帖
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 7 关注
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖 • 2 关注
  • FlowUs

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

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

    1 引用
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 79 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    7 引用 • 27 回帖
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    335 引用 • 324 回帖
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 232 关注
  • B3log

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

    1063 引用 • 3455 回帖 • 165 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    6 引用 • 140 回帖
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    267 引用 • 666 回帖 • 2 关注
  • OpenResty

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

    17 引用 • 55 关注