Можно ли в MkDocs / Material разместить оглавление слева?

Я использую MkDocs с темой Material. Я хотел бы создать сайт, который немного напоминал бы документацию Stripe API.

По умолчанию тема «Материал» помещает документы .md на боковую панель слева, а заголовки с этими документами - на боковой панели «Оглавление» справа. Хочу все это разместить слева:

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

Я мог бы сделать это, сделав каждую запись отдельным документом, но я бы предпочел иметь только один документ для каждого основного заголовка, с оглавлением, состоящим из подзаголовков внизу. Возможный?

Обновление:

Я добился некоторого прогресса.

Сначала расширьте тему, следуя этим инструкциям: https://squidfunk.github.io/mkdocs-material/customization/

Во-вторых, избавьтесь от оглавления справа, переопределив блок шаблона site_nav. В main.html просто скопируйте существующий блок site_nav из base.html, затем закомментируйте раздел «Оглавление».

В-третьих, скопируйте партиал nav-item.html в каталог / partials и внесите изменения.

Теперь я застрял. Похоже, что в nav-item.html есть код для отображения оглавления для каждого элемента, и он отображается с отображением: нет. Однако, когда я его выключаю, оглавление не отображается должным образом.

Я потратил час на возню с CSS, чтобы заставить его работать безуспешно. Любые идеи?


material-design mkdocs
person ccleve    schedule 28.01.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Самый простой способ, который я придумал, следующий:

  1. В своем mkdocs.yml напишите:

    extra_javascript:
  - 'javascripts/extra.js'

  2. В своих документах / 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()
}

Это отобразит оглавление в левом меню навигации текущей активной страницы.

person Florian Liebhart    schedule 21.02.2020

arrow_upward
1
arrow_downward

Ваше обновление вопроса - это именно то, что я сделал, поэтому я не уверен, будет ли это полезно.

В 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.

person Luke    schedule 13.11.2020