在编辑器中使用 H1 与 H2 标题

当在主题中使用一级 markdown 标题(#)时,它在 HTML 输出中会生成 h1 还是 h2?

1 个赞

它将输出一个 <h1> :slight_smile:

1 个赞

所以这意味着 Discourse 认为在一个页面中有多个 <h1> 标签是件好事吗? 感觉如果主题标题是 h1,那么该主题内的第一级标题默认应该是 h2,不是吗?

1 个赞

Discourse 不做任何假设,它会输出你要求它输出的内容。
最好是使用 ## 确保在帖子中使用 ### 作为顶级标题 :slight_smile:

编辑:参见 Use of H1 vs. H2 headings in composer - #16 by Canapin

2 个赞

这绝对是我们可以避免的“用户教育”,方法就是不要让 # 成为一级标题…… :anxious_face_with_sweat:

你知道有什么方法可以改变这一点吗?或者至少在工具栏中隐藏一级标题?(我猜直接用 Markdown 写作的人是一个现实的教育目标……)

1 个赞

是的,这相当简单。列表项有一个 data-name="heading-1" 属性,你可以用 CSS 来定位它 :slight_smile:

1 个赞

哈哈——我刚才也在研究这个问题。在快速测试中,这会隐藏 markdown 和富文本编辑器中的 H1 选项:

button[data-name="heading-1"] {
  display: none;
}

(我可能会保留这个设置!我认为在编辑器中提供 H1 没什么太大必要。)

2 个赞

我理解你的观点,但这并不是 Discourse 一定要这样决定的。Discourse 遵循一种称为 CommonMark 的 Markdown 约定,它规定,# 应该被转换为 H1。我认为这种 Markdown 标题如何转换为 HTML 标签的约定在主要的 Markdown 规范中是相当标准的。

2 个赞

嗯,两个 <h1> 标题其实不是什么大问题。这是一个非常古老的 SEO 梗,很长时间以来都不是问题了。谷歌等会使用第一个或者他们认为最合适的那个。

我们可以讨论一下使用两个主标题在内容上是否是最明智的做法,但当一个平台对主题名称和帖子中的标题使用不同的样式时,这真的无关紧要。

不过,在帖子中使用 ##/<h2> 仍然更合适。但因为它不扮演任何实际角色,我的意见是,用户最好使用一些可以避免这些标题的标题,因为他们害怕使用“错误”的标题 :man_shrugging:

2 个赞

标题对今天的 SEO 来说可能只是一个微小的信号——但我仍然不喜欢多个 H1,因为我是一个书呆子。:nerd_face:

我还在考虑 Steph 如何为页面发布创建可打印文档,其中帖子中的 H1 渲染得比页面顶部的 H1 还要大:

image

将它们设为 H2 会使它们比顶部的 H1 稍小:

image

1 个赞

是的,这就是问题所在。对我来说,自然而然地先使用一级标题,但如果主题没有以同样的假设进行样式设置,就会很乱。这里有一种脱节的感觉。

(题外话:在你没有进行任何干预的情况下,它向你显示的是英文文档吗?!?)

这很自然,是的,当您从头开始构建网页时,这是有道理的。但是内容管理系统(CMS)或发布系统几乎总是从标题字段获取页面的 H1,因此您通常会使用 H2 来表示内容部分。

(我使用了网络浏览器的翻译工具来获取英语。)

1 个赞

我同意。但依我看,我们不应该期望社区成员必须知道这一点。

是的——而且我看不出仅仅隐藏 H1 选项有什么坏处。

尽管我没有看到大多数用户在撰写典型帖子时大量使用标题。撰写更长篇幅文档主题的用户可能已经(或很快就会)对 ## 和那个 “TT” 图标有了一些了解。

(另外:我刚刚注意到这个有趣的旧讨论,其中建议标题只应用于主题中,而在回复中禁用:在回复中禁用 h1 和 h2 等标题

2 个赞

另外:我刚刚注意到一个有趣的旧讨论,其中建议标题只应用于主题,而在回复中应禁用:在回复中禁用 h1 和 h2 等标题

如果有人对此感兴趣,这个小片段仅在回复时会完全隐藏作曲器中的“TT”标题图标:

.composer-action-reply button.heading {
  display: none;
}
1 个赞

标题不仅关乎搜索引擎优化(SEO),也关乎无障碍访问(accessibility)。

屏幕阅读器可以从一个标题跳到另一个标题,我们可以用键盘快捷键指定标题深度。

主题有其 <h1> 标题,但每个回复前都会加上其自己隐藏的 <h2>,屏幕阅读器可以将其显示出来:

<h2 aria-hidden="false" class="sr-only" id="post-heading-9">
  post by Jagster 4 hours ago
</h2>

因此,在任何情况下,当你在内容中发布 <h1><h2> 标题时,它都将是预先存在的 <h2> 的后代元素 :upside_down_face:

我认为,在帖子中使用高于 <h3> 的标题可能会使屏幕阅读器的导航变得有点奇怪。

虽然现有主题之间并不完全一致,但来自 Customization > Plugin 的帖子模板使用 <h3> 作为顶级标题:

| | | |
| - | - | - |
| :information_source: | **Summary** | In a few words, what does this plugin do? |
| :hammer_and_wrench: | **Repository Link** | <> |
| :open_book: | **Install Guide** | [How to install plugins in Discourse](https://meta.discourse.org/t/install-plugins-in-discourse/19157) |

<br>  

### Features
 
Describe the major features of the plugin
 
### Configuration

Include detailed steps on how to configure the plugin (include screenshots where necessary)

### Settings 

Include a table of settings and setting descriptions

| Name | Description
|-|-|
|

有趣的是,Customization > ThemeCustomization > Theme component 模板的情况并非如此,但它们的模板不包含任何标题。也许应该改变这一点。

4 个赞

同意。我也有点书呆子气,喜欢我的标题层级清晰。
所以实际上,在一篇帖子中,如果我们想把事情做对,应该只使用 h3 h4 h5——也许可以有一个“修复”这个问题的某种主题组件,这意味着从按钮中移除更高级别的标题,并“转换”h3及以下在主题中的样式,以便当我们使用它们时看起来是正确的……?

还有一个 h6,以防你在帖子中需要再多一个层级,但它非常小

H5 也比帖子中的普通文本小,所以我不确定我是否会使用它

这是 h5
2 个赞

啊,我没意识到这一点!这可能解释了 Pfaffman 评论“帖子中的第一级标题应该是 h3”的原因 [1]

那么 CSS 技巧就变成了:

button[data-name="heading-1"], button[data-name="heading-2"] {
  display: none;
}

感谢您关注可访问性——我正在努力牢记这一点。


  1. source ↩︎

3 个赞

您可以调整 H3-5 的样式……或者它们保持原样也可以:

2 个赞