作者大大，Asri是一款非常美观优雅的主题，感谢您的设计与付出。我目前遇到一些使用困扰，在编写文档时，我很依赖标题的层级关系来组织文章结构。但是我发现在Asri主题下很难判

你好，相关代码已经写好了，但暂时不会全面上线，如果想提前体验的话可以将以下代码粘贴到你的css代码片段中： <div class="highlight highli

增加区分标题级别的样式或图标 about asri HOT 4 CLOSED

tdwxz commented on May 31, 2024

增加区分标题级别的样式或图标

from asri.

Comments (4)

mustakshif commented on May 31, 2024

感谢提议，关于标题层级区分的设计我暂时还没有想出合适的方案，后续想出方案后更新，目前只是通过字号区分层级。有没有插件能满足这个需求呢，或者用侧栏大纲辅助？

from asri.

tdwxz commented on May 31, 2024

感谢回复，集市中存在的插件需要刷新页面才能渲染标题序号，操作流程比较繁琐，我目前使用的是侧栏大纲。期待作者大大早日更新。
关于方案我有一点个人想法，Asri最吸引我的点在于保证外观简洁大方的同时又富有功能性，比如顶栏融合和块间距的调整，因此我觉得采用类savor的图标方式可以兼顾美观和功能，保证Asri风格一致。

from asri.

mustakshif commented on May 31, 2024

好的，会纳入更新计划

from asri.

mustakshif commented on May 31, 2024

你好，相关代码已经写好了，但暂时不会全面上线，如果想提前体验的话可以将以下代码粘贴到你的css代码片段中：

.h1:before,
h1:before {
  content: "#1";
}

.h2:before,
h2:before {
  content: "#2";
}

.h3:before,
h3:before {
  content: "#3";
}

.h4:before,
h4:before {
  content: "#4";
}

.h5:before,
h5:before {
  content: "#5";
}

.h6:before,
h6:before {
  content: "#6";
}

.h1::before, .h2::before, .h3::before, .h4::before, .h5::before, .h6::before,
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
  display: block;
  overflow: visible;
  font-weight: 900;
  font-size: 2.4em;
  position: absolute;
  top: -0.36em;
  right: 8px;
  color: inherit;
  opacity: 0.15;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 80%);
          mask-image: linear-gradient(to bottom, black 20%, transparent 80%);
}

h1, h2, h3, h4, h5, h6 {
  position: relative;
}