样式修改、主题制作 深入教程/经验分享

大前提:有一定的 css 基础

  1. 大部分常用的样式改动可以通过内置的变量解决

    1. --h1-color 指等级为 1 的标题颜色

    2. --line-height-normal 指编辑器内的文字行高

    3. 属性值可以通过 --h1-color: red; 的方式修改,所有的变量在 devtools 中 source 面板的 app.css,也可以看这里

    4. 为了更好的显示效果,宽度推荐使用 var(--size-x-x)

  2. 慎用 !important,它会提高你的维护成本。如果遇到第一点的样式修改不生效的问题,推荐使用在具体的元素上修改,而不是在 body 上修改

    1. 其实更推荐使用最新的 @layer 修改 (不过我没去看过 2333

    2. 如果需要修改的样式原本直接写在元素上,大胆使用 !important

  3. 合理利用 :is() 或者 :not() 减少代码,安装版本为最新版的 obsidian ,可以使用 @container:has()

    1. :is() :not() 内不能是 ::before 或者 ::after 等伪元素

    2. @container 可以让容器内元素根据容器宽度进行媒体响应,具体应用可以参考我的主题中文本内搜索框部分
      container-query

    3. :has() 通过判断是否包含某个元素实现了该功能,包括选择当前元素的父元素和前一个兄弟元素,具体应用可以参考我的主题中预览模式代码美化部分

  4. clamp() 函数很有用

  5. 引用 quote 的缩进不要更改,OB 是通过 js 实时计算的,自己修改会很麻烦

  6. 使用好 chrome devtools、Theme Design Utilities 插件

    1. devtools

      1. 获取元素选择器路径:选中元素 → 右键 → copy → copy selector

      2. 模拟 hover、active 等状态:Styles 面板,右上角: hov,点击选中

      3. 查看元素最终显示的属性:Computed 面板,点击可以跳转到对应的样式

      4. 查看当前元素的父元素(查找绝对定位元素的父元素很有用):点击箭头,选择 Properties,查找 parentElement

    2. Theme Design Utilities

      1. 社区插件可以直接搜素

      2. Freeze Obsidian:在修改一些失去焦点就会消失的元素很有用,使用须打开 devtools

      3. Mobile Emulation:修改移动端样式时使用

      4. 其他功能也挺不错的

  7. 这个 是 pdf 的 dom 节点,一些修改的样式不生效是因为 .print 上的 css 变量和 body 上自带的 css 变量一致,所以如果需要修改 pdf 的样式,最好在 css 变量的选择器上加 .print

  8. 字体的使用可以通过 @font-face 进行简化,转换为 base64 目前使用的是 ctool,也有 utools 版,使用更加方便。字体特性可以通过 font-feature-settings 属性开启

  9. 自定义图标

    1. 使用 unocss 的思路,将原本的图标通过 -webkit-mask-image 进行替换,内容使用svg

    2. 找图标: Icônes

    3. 压缩和转义 svg: https://www.zhangxinxu.com/sp/svgo/

    4. 找到要替换的元素,设置 background-color: currentColor;-webkit-mask-size: 100% 100%;,如果本身是 svg,需要再对子元素 path 加上 display:none;

    5. 对替换的元素添加 -webkit-mask-image: url('data:image/svg+xml;utf8,压缩后的svg');

    6. 如果未生效,在 <svg ...>...</svg> 中添加作用域,变成 <svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>

    7. 可以参考我的代码(使用 sass,但是原理类似)

2 个赞

弱弱的问下,现在能用css实现标题自动编号吗?据说以前的版本不行,不知道最近的版本可不可以

无解,ob的节点还是动态更新的,文章一长,编号会乱