如何在Spotify Backstage TechDocs中实现页面级CSS自定义？

方案1：通过extra_css全局注入自定义CSS #

将自定义CSS文件放在docs目录下（例如docs/css/custom-style.css），然后在mkdocs.yaml中正确配置路径：

site_name: 'Tech Guides'
site_description: 'Teste.'

nav:
  - Início: index.md

plugins:
  - techdocs-core
  - kroki

extra_css:
  - css/custom-style.css

在custom-style.css里，针对TechDocs（基于mkdocs-material）的DOM类编写样式，示例：

/* 修改正文标题颜色 */
.md-content h1 {
  color: #2563eb;
}
/* 自定义段落行高 */
.md-content p {
  line-height: 1.8;
}

方案2：Markdown文件内嵌入<style>块实现页面级自定义 #

先开启mkdocs的HTML渲染权限，在mkdocs.yaml中添加Markdown扩展配置：

markdown_extensions:
  - pymdownx.extra
  - pymdownx.raw_html:
      allow_unsafe: true  # 允许内联<style>及其他HTML标签生效

之后在目标Markdown文件顶部直接写入专属样式：

<style>
/* 仅作用于当前页面的样式 */
.md-content h2 {
  border-left: 4px solid #10b981;
  padding-left: 12px;
}
</style>

# 页面标题
## 二级标题
这是仅当前页面生效的自定义样式示例。

方案3：修复HTML页面无限加载问题 #

直接使用HTML文件时的无限加载，是因为缺少TechDocs页面的必要结构和模板继承。通过Jinja2模板继承创建符合要求的自定义HTML页面：

1. 在docs目录下创建custom-page.html：

{% extends "base.html" %}

{% block content %}
<style>
/* 页面专属样式 */
.custom-box {
  background-color: #f3f4f6;
  padding: 16px;
  border-radius: 8px;
}
</style>
<div class="md-content">
  <h1>自定义HTML页面</h1>
  <div class="custom-box">
    <p>这是通过模板继承实现的自定义内容，不会触发无限加载。</p>
  </div>
</div>
{% endblock %}

2. 在mkdocs.yaml的导航中配置该页面：

nav:
  - 自定义页面: custom-page.html

以上三种方案均无需更换主题，可分别实现全局或页面级的CSS自定义。

内容的提问来源于stack exchange，提问作者Victor Batalha