请教一个图标显示问题

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

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

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

    24734 引用 • 101598 回帖
  • Q&A

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

    9363 引用 • 42646 回帖 • 113 关注

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 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
请输入回帖内容 ...

推荐标签 标签

  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 94 关注
  • AngularJS

    AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 500 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 443 关注
  • 反馈

    Communication channel for makers and users.

    126 引用 • 929 回帖 • 266 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 788 关注
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    226 引用 • 476 回帖
  • BookxNote

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

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

    1 引用 • 1 回帖 • 1 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 382 关注
  • 又拍云

    又拍云是国内领先的 CDN 服务提供商,国家工信部认证通过的“可信云”,乌云众测平台认证的“安全云”,为移动时代的创业者提供新一代的 CDN 加速服务。

    20 引用 • 37 回帖 • 570 关注
  • OkHttp

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

    16 引用 • 6 回帖 • 83 关注
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    946 引用 • 1460 回帖
  • PWA

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

    14 引用 • 69 回帖 • 176 关注
  • 深度学习

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

    53 引用 • 40 回帖
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • Elasticsearch

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

    117 引用 • 99 回帖 • 207 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 719 关注
  • Visio
    1 引用 • 2 回帖
  • danl
    162 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    21 引用 • 204 回帖
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖 • 1 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 6 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 541 回帖 • 2 关注
  • Word
    13 引用 • 40 回帖
  • B3log

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

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

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 278 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖