Support custom default doc icons

[wish5115]

建议将SIYUAN_IMAGE_FOLDER，SIYUAN_IMAGE_FILE等开放出来，用户可以自定义默认文件夹等图标

In what scenarios do you need this feature?

目前思源默认的笔记本，文件夹和文件图标用户无法自定义。

建议把这三个常量开放出来用户可以自定义

https://github.com/siyuan-note/siyuan/blob/4ef5d90af38666278473734be75c2f77da164661/app/src/constants.ts#L642

类似这种配置效果

关联帖子 https://ld246.com/article/1728246523163

Describe the optimal solution

笔记本，文件夹和文件默认图标用户可以自定义。

Describe the candidate solution

No response

Other information

No response

[TCOTC]

需要不增加菜单选项的方案

[wish5115]

需要不增加菜单选项的方案

具体怎么加？你可以说说你的想法。

[TCOTC]

先实现以下三点：

• 实时更新文档树上文档的 data-count 属性 实时更新文档树上文档的 data-count 属性 #12727
• li 元素添加一个 data-icon 属性用于表示笔记本或文档的图标，需要实时更新 文档树的 li 元素新增 data-icon 属性用于表示笔记本或文档的自定义图标，需要实时更新 #12728
• 把鼠标悬浮在图标上显示的伪元素提示换成悬浮提示，关联 把几个伪元素提示换成悬浮提示 #12747

然后再使用以下 CSS 片段：

/* 笔记本 */
.layout-tab-container > .file-tree > .fn__flex-1 > ul.b3-list[data-url] > li.b3-list-item[data-type="navigation-root"]:not([data-icon]) > .b3-list-item__icon {
    color: transparent;
}
.layout-tab-container > .file-tree > .fn__flex-1 > ul.b3-list[data-url] > li.b3-list-item[data-type="navigation-root"]:not([data-icon]) > .b3-list-item__icon::before {
    color: black;
    content: "🗃"; /* 笔记本图标自定义 */
    position: absolute;
}

/* 文档 */
.layout-tab-container > .file-tree > .fn__flex-1 li.b3-list-item[data-node-id]:not([data-count="0"]):not([data-icon]) > .b3-list-item__icon {
    color: transparent;
}
.layout-tab-container > .file-tree > .fn__flex-1 li.b3-list-item[data-node-id]:not([data-count="0"]):not([data-icon]) > .b3-list-item__icon::before {
    color: black;
    content: "📑"; /* 文档图标自定义 */
    position: absolute;
}

/* 子文档 */
.layout-tab-container > .file-tree > .fn__flex-1 li.b3-list-item[data-node-id][data-count="0"]:not([data-icon]) > .b3-list-item__icon {
    color: transparent;
}
.layout-tab-container > .file-tree > .fn__flex-1 li.b3-list-item[data-node-id][data-count="0"]:not([data-icon]) > .b3-list-item__icon::before {
    color: black;
    content: "📄"; /* 子文档图标自定义 */
    position: absolute;
}

[wish5115]

先实现以下三点：

1. 实时更新文档树上文档的 data-count 属性
2. li 元素添加一个 data-customicon 属性用于表示笔记本或文档是否有自定义图标，需要实时更新
3. 把鼠标悬浮在图标上显示的伪元素提示换成悬浮提示

感觉这样太过复杂，不如直接替换表情方便

[TCOTC]

只是新增一个属性而已，比你的方案简单。

第一点是已有功能的问题，始终都要修的。第三点也是在计划之中的更改。总的来说只是新增了第二点。

[wish5115]

只是新增一个属性而已，比你的方案简单。

第一点是已有功能的问题，始终都要修的。第三点也是在计划之中的更改。总的来说只是新增了第二点。

但用css伪元素代替表情变得麻烦，而且自定义表情怎么用伪类实现（这里的自定义指自定义表情图片）？光靠css较麻烦。

而我的方案，只需把以前代码中的常量改为配置变量即可，实现起来较为简单，而且如果插件或代码片段想实时自定义图标也只需动态修改配置变量即可。而css方案需要用户自己实现，且不好实现，可能存在兼容性等问题。

[TCOTC]

用 background-image 。

这种自定义的需求只能让用户自己实现了。

[88250]

    public static readonly SIYUAN_IMAGE_FILE: string = "1f4c4";
    public static readonly SIYUAN_IMAGE_NOTE: string = "1f5c3";
    public static readonly SIYUAN_IMAGE_FOLDER: string = "1f4d1";

这里允许赋值比较简单吧。

@Vanessa219

[TCOTC]

    public static readonly SIYUAN_IMAGE_FILE: string = "1f4c4";
    public static readonly SIYUAN_IMAGE_NOTE: string = "1f5c3";
    public static readonly SIYUAN_IMAGE_FOLDER: string = "1f4d1";

这里允许赋值比较简单吧。

能支持用自定义表情吗？

[Vanessa219]

把这几个放到 siyuan.storage 里面，后续优插件进行修改如何？

[wish5115]

把这几个放到 siyuan.storage 里面，后续优插件进行修改如何？

very nice

[wish5115]

    public static readonly SIYUAN_IMAGE_FILE: string = "1f4c4";
    public static readonly SIYUAN_IMAGE_NOTE: string = "1f5c3";
    public static readonly SIYUAN_IMAGE_FOLDER: string = "1f4d1";

这里允许赋值比较简单吧。

能支持用自定义表情吗？

这是表情dom结构

这是自定义表情dom结构

所以，自定义表情直接把表情内容换成图片应该就可以了。

[Vanessa219]

需要移除 /emojis/ ， 变量如下：

[Achuan-2]

改成功了，舒服了，不过emoji要用Unicode的编码，有点麻烦

设置方法

• 默认图标：要用Unicode的编码，而不能直接用emoji，比如要设置含有子文档的文档图标为📁，应该用1F4C1，而不是用📁来赋值
• 自定义图标：emojis下的自定义icon路径，比如time/now.svg

我的自定义文档图标

	变量	默认图标	我设置的图标
普通文档	siyuan.storage["local-images"].file	📄1F4C4
含有子文档的文档	siyuan.storage["local-images"].folder	📑1f4d1	📁1F4C1
笔记本	siyuan.storage["local-images"].note	🗃1f5c3	🗂️1F5C2

把下面代码放进代码片段

siyuan.storage["local-images"].folder = '1F4C1'
siyuan.storage["local-images"].note = '1F5C2'

[Achuan-2]

改完图标后舒服了，改之前总是想着要改图标，统一用文件夹，就没有想要改图标的欲望了

[pisceswb]

请问直接将下面的代码放到"外观"选项中的CSS中就可以吗？
siyuan.storage["local-images"].folder = '1F4C1'
siyuan.storage["local-images"].note = '1F5C2'
@Achuan-2

[Achuan-2]

请问直接将下面的代码放到"外观"选项中的CSS中就可以吗？ siyuan.storage["local-images"].folder = '1F4C1' siyuan.storage["local-images"].note = '1F5C2' @Achuan-2

放在js片段

[pisceswb]

请问直接将下面的代码放到"外观"选项中的CSS中就可以吗？ siyuan.storage["local-images"].folder = '1F4C1' siyuan.storage["local-images"].note = '1F5C2' @Achuan-2

放在js片段

可用，感谢！

[pisceswb]

放在js片段中刷新后可以生效，但关闭重启思源笔记，图标自定义失效了。请问怎么解决？谢谢
@Achuan-2

[TCOTC]

你打开开发者工具之后重启思源，看看有没有报错

[pisceswb]

你打开开发者工具之后重启思源，看看有没有报错

是这个吗？

[pisceswb]

[pisceswb]

找到问题了，是我的傻瓜失误。另一台电脑升级了，当前电脑没有升级到新siyuan版本。 @TCOTC @Achuan-2