0

我正在使用 MkDocs 和 Material 主题。我想建立一个看起来有点像 Stripe API 文档的网站。

默认情况下，Material 主题将 .md 文档放在左侧的侧边栏中，将带有这些文档的标题放在右侧的目录侧边栏中。我想把它全部放在左边：

Introduction
  A ## heading here
  Another heading
Getting Started
  Subsection
  etc.

我可以通过使每个条目成为自己的文档来做到这一点，但我更希望每个主要标题只有一个文档，目录由下面的子标题组成。可能的？

更新：

我已经取得了一些进展。

首先，按照以下说明扩展主题：https ://squidfunk.github.io/mkdocs-material/customization/

其次，通过覆盖“site_nav”模板块来摆脱右侧的目录。在 main.html 中，只需从 base.html 复制现有的 site_nav 块，然后注释掉“目录”部分。

第三，将 nav-item.html 部分复制到 /partials 目录并进行修改。

现在我被困住了。看起来 nav-item.html 确实有代码可以在每个项目下呈现 TOC，并且它确实使用 display:none 呈现。但是，当我关闭它时，TOC 没有正确显示。

我已经完成了一个小时的 CSS 摆弄，但没有成功。有任何想法吗？

4

3 回答 3

2

您对问题的更新正是我所做的，所以我不确定这是否有用。

在 mkdocs.yml 中添加 custom_dir 到主题：

theme:
  name: material
  custom_dir: overrides

创建一个文件overrides/main.html并观察您要替换的文件https://github.com/squidfunk/mkdocs-material/blob/master/material/base.html。使用导航代码但包括 toc 部分以获得以下内容：

{% extends "base.html" %}

{% block site_nav %}
  <div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
    <div class="md-sidebar__scrollwrap">
      <div class="md-sidebar__inner">
        {% include "partials/toc.html" %}
      </div>
    </div>
  </div>
{% endblock %}

结果如下： 带有更改的 mkdocs 的屏幕截图

如果您正在考虑更改目录以包含页面，请查看 git repo 中的部分内容。

于 2020-11-13T23:25:17.443 回答
1

我想出的最简单的技巧如下：

  1. 在你的 mkdocs.yml 中，写：

    extra_javascript:
  - 'javascripts/extra.js'

  2. 在你的 docs/javascripts/extra.js 中，写：

    document.addEventListener("DOMContentLoaded", function() {
    show_toc_left();
});

function show_toc_left(){
    document.querySelectorAll('.md-nav .md-nav--secondary')[0].setAttribute("style", "display: block; overflow: visible; color: #7d7f8e9c")
    document.querySelectorAll('.md-nav .md-nav--secondary label')[0].remove()
}

这将在当前活动页面的左侧导航菜单中显示目录。

于 2020-02-21T13:47:11.323 回答
0

在您的自定义 css 文件中，写入：

.md-sidebar--secondary {
  order: 0;
}

在你的 mkdocs.yml 中，写：

extra_css:
  - assets/<custom_css_filename>.css
于 2022-02-15T21:42:06.083 回答