Можно ли в MkDocs / Material поместить оглавление слева? - PullRequest
Новая
       50

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

0 голосов
/ 29 января 2020

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

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

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

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

Обновление:

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

Во-первых, расширьте тему, выполнив следующие инструкции: https://squidfunk.github.io/mkdocs-material/customization/

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

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

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

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

1 Ответ

1 голос
/ 21 февраля 2020

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

  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()
}

Это покажет TO C в левом боковом меню навигации на текущей активной странице.

...