[1.0船新版本 CSS 片段系列] 标题美化

经验分享
13

感谢分享，原来是通过指定 div.is-collapsed 下元素的伪元素的 opacity 来使折叠保持标识显示。
我 11 楼示例的思路是把三角折叠按钮的显示直接替换成别的，直接用折叠按钮的空间，这样不需要额外将伪元素的位置和折叠按钮有交互的区域对齐。如果能解决标识位置的问题，写起来就很简便了。

按照大佬的思路修简，11 楼样式另一种写法的 CSS 如下：

CSS 代码，点击展开 
/*使用此 CSS 宜按照 Markdown 语言推荐写法，标题前后各空一行*/
body {
  --line-height-normal: 1.52; /*行间距*/
  --heading-spacing: calc(var(--p-spacing) * 1.2); /*阅读模式标题间距，星号后面的数字是倍数可以自己调*/
}
.cm-s-obsidian .cm-line.HyperMD-header {padding-block: 0; /*编辑模式标题间距*/}

/*折叠按钮交互*/
.collapse-indicator {--cursor: pointer; /*显示小手*/}
.HyperMD-codeblock .collapse-indicator /*代码块折叠三角*/ {right: var(--size-4-1) !important; padding-right: 0 !important;}

/*小标题折叠按钮*/
:is(h1, h2, h3, h4, h5, h6, .HyperMD-header) {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    font-weight: bold; /*加粗*/
    font-size: 0.7rem; /*字号*/
    top: 50%;
    transform: translateY(-50%);
    left: calc(-1 * var(--size-4-4)); /*与文本间距*/
  }
  &:not(:hover)::before {
    opacity: 0; /*平时隐藏，悬停显示*/
    transition: var(--anim-duration-superfast); /*过渡动画时间*/
  }
  & .collapse-indicator {
    width: var(--size-4-5); /*小标题点不到按钮改大这个*/
    & > svg {opacity: 0;} /*隐藏小标题折叠三角*/
  }
}
:is(div.is-collapsed > :is(h1, h2, h3, h4, h5, h6), .HyperMD-header:has(> .cm-foldPlaceholder))::before {
  opacity: 1; /*折叠保持标识显示*/
  text-decoration: underline 0.1rem; /*下划线*/
}

/*各级小标题折叠按钮文本及颜色*/
:is(h6, .HyperMD-header-6)::before {content: "h6"; color: hsl(258, 88%, 66%);}
:is(h5, .HyperMD-header-5)::before {content: "h5"; color: hsl(218, 100%, 55%);}
:is(h4, .HyperMD-header-4)::before {content: "h4"; color: hsl(194, 100%, 45%);}
:is(h3, .HyperMD-header-3)::before {content: "h3"; color: hsl(46, 100%, 45%);}
:is(h2, .HyperMD-header-2)::before {content: "h2"; color: hsl(23, 100%, 45%);}

默认主题代码块折叠三角总是跳动，也定义了一个样式，如果有冲突把那行删除即可。

因为 Markdown 语言提倡一篇文档只有一个 h1，所以没写 h1 的样式，如有需要，“各级小标题折叠按钮文本及颜色”下复制一行，所有的 2 改为 1 ，再换一个你想要的 color 即可。

再次感谢大佬！

2 个赞