pengzhanbo / vuepress-theme-plume

Vuepress Theme. A simple, feature-rich, document & blog
https://theme-plume.vuejs.press
MIT License
48 stars 11 forks source link

有关mk标题的疑问和建议 #85

Closed jiezhuo closed 1 week ago

jiezhuo commented 4 weeks ago

请看在blog中的mk有这么一段代码:

---
title: 主题效果预览
author: pengzhanbo
createTime: 2023/12/25 01:28:29
permalink: /article/0lk24ty5/
sticky: true
tags:
  - 预览
  - 标签
---

<!-- markdownlint-disable MD025 -->
# 标题H1

## 标题H2

### 标题H3

#### 标题H4

##### 标题H5

###### 标题H6

现象:可以观察到标题1-6在渲染之后都有各自的表现形式,只有标题2之间自带一条横杠由于分隔内容,且右侧的此页目录中只显示标题1和标题2

这里我猜测作者的想法是在实际使用中进使用二级标题和三级级标题,而一级标题使用“title: ”替代了,因此右侧目录就直接忽略了一级标题。这里带来的问题是如果需要使用四级标题,则四级标题不显示在右侧目录,且>=四级标题和与正文的区分度不大,造成视觉体验不是太好,也就是说实际上该主题只支持两个级别标题,这样的话确实有些受限。

我认为应至少支持3个可易于区分的级别标题,为了兼容旧的规则,我的想法是

  1. 标题1直接弃用(使用唯一的title代替了),标题2的样式使用标题1的样式以此类推,并或使用其他合适的方法增强视觉上的区别
  2. 标题2自带的分割线可移除,如果需要的话用户手动添加即可,并提供多种分割线的示例样式,如粗/细的实线或虚线,允许手动添加到任意位置
  3. 右侧的目录可自定义可见的标题等级,在进一步甚至可以支持展开和默认默认是否展开

以上只是我的建议,可能有什么我没有考虑到因此作者的主题选择了目前的现状,作者可根据实际需求和审美选择合适的样式,我都表示尊重和支持,这个主题真的很棒,未来深入学习后希望我也能加入这个项目

pengzhanbo commented 4 weeks ago

右侧的目录的层级控制,目前是在 vuepress markdown.headers 配置控制的。我在 vuepress/ecosystem 已经提交了新的方案进行优化,新的版本将会更新该内容。

H1 标题确实是没有必要的,我会重新审视 h2 - h6 的样式上的视觉效果进行优化,但 h2 的下划线应该会继续保留,这是有效分隔文章主要段落的方式。

h4 h5 h6 可能很难再进一步缩小字体大小了,再缩小就会比 正文 的默认字体大小还要小了,这更不合理。

实际上大多数情况下,很少使用到 h5 h6 ,这对文章的分隔太深了,当需要使用到它们的时候,也许该审视下文章的内容结构是否合理。

主题非常欢迎 所有人 提供新的想法或建议,以及参与本项目的更新维护!

pengzhanbo commented 4 weeks ago

主题更新了新的配置 支持自定义显示层级。 同时,也可以在单个页面中进行 配置

jiezhuo commented 1 week ago

已测试:自定义显示层级的功能工作正常 该issue还未关闭的原因是h2-h4的样式还未考虑好如何调整吗

pengzhanbo commented 1 week ago

出于阅读感官而言,我认为当前的 h2 的 字号 24px ,粗细等是刚好合适的,放大到 h1 的字号 28px 会太大了,特别是 h2 是允许 存在多个的,与默认的字体大小 16px 大小对比的话,28px 差值太大了,这也是为什么我会将 h1 单独抽离到离正文内容相对较远的原因。因此 h2 还是不做调整比较好。

然后,h1, h2, h3, h4 的字体大小是以 4px 作为差值的计算的,h3 时为 20px,h4 为 16px, 由于以及达到 正文字体大小,因此,h5, h6 依然还是 16px,再小就不合适了。

关于 h2 的 上边框,我认为它作为主题的默认样式,用于分割文章的段落内容是合理的,而它的样式是否做成可配置的,我认为没有必要,因为很容易就可以通过 自定义样式 的方式进行重写,将其抽象为单独的配置项反而复杂化了。

jiezhuo commented 1 week ago

好的好的,既然这样的话,关于标题的大小那就保持现状吧,感谢回复。

不过我还想描述一下为什么我之前说“实际上该主题只支持两个级别标题(觉得有点少,3个比较合适)”,我说的两个级别是指h2和h3,为什么不包含h4呢,因为无法区分h4和正文,一种常用的标记“加粗的正文”都比h4要更明显,所以我排除了h4。

pengzhanbo commented 1 week ago

不过我还想描述一下为什么我之前说“实际上该主题只支持两个级别标题(觉得有点少,3个比较合适)”,我说的两个级别是指h2和h3,为什么不包含h4呢,因为无法区分h4和正文,一种常用的标记“加粗的正文”都比h4要更明显,所以我排除了h4。

@jiezhuo 关于粗细,这可能是由于 字体本身的原因导致的,主题并没有特别设置字体必须使用哪个,它是跟着 浏览器的字体设置和系统字体设置来显示的。在主题对于标题,统一使用的字体粗细为 600。假如你的浏览器或系统所使用的字体本身并不支持 600 的字重,那么就会被降级兼容为其他的字重。

比如说,在我的电脑上的显示效果如下,可以看到 字重的区别很明显。

image