如何使用 themeEditor 修改界面

本贴最后更新于 348 天前,其中的信息可能已经时移世异

修改特定主题的界面

首先需要修改主题的 theme.json 文件,添加 config 字段,然后在 config 字段中指定的文件中指定设置界面定义。

例如这样

image.png
image.png

[
    {
        "name": "font-weight",
        "type": "number",
        "label": "一级标题字重",
        "selector": ".b3-typography .h1, .b3-typography h1, .protyle-wysiwyg .h1, .protyle-wysiwyg h1",
        "memo": "",
        "default":700,
        "unit": "none",
        "step": 100,
        "min": 500,
        "max": 1000
      },
      {
        "name": "font-weight",
        "type": "number",
        "label": "段落字重",
        "selector": ".b3-typography .p, .b3-typography p, .protyle-wysiwyg .p, .protyle-wysiwyg p",
        "memo": "",
        "default":700,
        "unit": "none",
        "step": 100,
        "min": 500,
        "max": 1000
      }
]

这个配置文件产生的自定义界面是这样的:

image

上面那个图片里面产生的效果就是它调整之后的。

如果调整之后的效果差不多可以了,点击这里

image

它会生成一个代码片段,这个代码片段只有在对应的主题下才会生效

差不多就是这样吧。

自定义通用配置

通用配置比较简单 ,只要直接把配置文件放进 data\storage\petal\themeEditor\commonConfigs 文件架就行了。

使用 css 配置

如果你不大清楚编写规则的话可以参考插件自带的几个示例配置,还是不会的话,就直接用 css 后缀名的配置文件就可以了。

特别的,css 配置文件中的 @import 规则会被解析为开关。

不过这种方式产生的界面可能会不大好读,例如这个 css

.file-tree {
    font-size: 12px; /* 设置合适的字体大小,可以根据需要调整 */
}

作为配置内容的话,产生的界面是这样的:

image

用这个文件调节主题外观之后产生的结果就是这个:

image

关掉插件之后如何管理代码片段

插件的这两个按钮
image

的作用分别是将当前配置好的样式写入主题专用代码片段和公共代码片段,之后使用 quicksnippets 插件就能快速开关了,差不多就是这样吧。

image

  • 思源笔记

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

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

    22026 引用 • 87851 回帖 • 4 关注
1 操作
leolee 在 2023-11-23 15:50:11 更新了该帖

相关帖子

欢迎来到这里!

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

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