Pandoc: настройте HTML-шаблон, чтобы разместить оглавление под определенным заголовком

Я использую Pandoc, как описано здесь, для преобразования Markdown в HTML и пытаюсь настроить вывод так, чтобы оглавление отображалось под определенным заголовком в моем документе. Однако я столкнулся с трудностями при достижении этого с помощью шаблона HTML по умолчанию.

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "$lang$" xml:lang = "$lang$"$if (dir)$ dir = "$dir$"$endif$>
<head>
  <meta charset = "utf-8" />
  <meta name = "generator" content = "pandoc" />
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=yes" />
$for(author-meta)$
  <meta name = "author" content = "$author-meta$" />
$endfor$
$if (date-meta)$
  <meta name = "dcterms.date" content = "$date-meta$" />
$endif$
$if (keywords)$
  <meta name = "keywords" content = "$for(keywords)$$keywords$$sep$, $endfor$" />
$endif$
$if (description-meta)$
  <meta name = "description" content = "$description-meta$" />
$endif$
  <title>$if (title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
  <style>
    $styles.html()$
  </style>
$for(css)$
  <link rel = "stylesheet" href = "$css$" />
$endfor$
$for(header-includes)$
  $header-includes$
$endfor$
$if (math)$
$if (mathjax)$
  <script src = "https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script>
$endif$
  $math$
$endif$
</head>
<body>
$for(include-before)$
$include-before$
$endfor$
$if (title)$
<header id = "title-block-header">
<h1 class = "title">$title$</h1>
$if (subtitle)$
<p class = "subtitle">$subtitle$</p>
$endif$
$for(author)$
<p class = "author">$author$</p>
$endfor$
$if (date)$
<p class = "date">$date$</p>
$endif$
$if (abstract)$
<div class = "abstract">
<div class = "abstract-title">$abstract-title$</div>
$abstract$
</div>
$endif$
</header>
$endif$
$if (toc)$
<nav id = "$idprefix$TOC" role = "doc-toc">
$if (toc-title)$
<h2 id = "$idprefix$toc-title">$toc-title$</h2>
$endif$
$table-of-contents$
</nav>
$endif$
$body$
$for(include-after)$
$include-after$
$endfor$
</body>
</html>

Текущая настройка

Я использую следующую команду Pandoc:

pandoc -F "C:\Users\foobar\AppData\Local\Yarn\bin\mermaid-filter.cmd" -t html --standalone --css=custom.css --toc --template=custom-template.html -o output.html input.md

Моя файловая структура Markdown выглядит так:

# Document Title

Some introductory text...

## Table of Contents

(I want the auto-generated ToC to appear here)

## First Section

Content of the first section...

Я экспортировал шаблон HTML по умолчанию, используя:

pandoc -D html > custom-template.html

Вопрос

Как я могу изменить HTML-шаблон и/или CSS Pandoc, чтобы автоматически созданное оглавление вставлялось сразу после заголовка «Оглавление» в выходном HTML?

Дополнительная информация

Вот содержимое моего custom.css файла:

table {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    border-spacing: 0;
    border-collapse: collapse;
    border: 2px solid black;
}

table th {
    padding: 3px 10px;
    background-color: white;
    border: 1px solid black;
}

table td {
    padding: 3px 10px;
    border: 1px solid black;
}

Будем очень признательны за любую помощь или рекомендации по настройке вывода Pandoc для достижения этого конкретного размещения оглавления!

html css markdown pandoc

14.08.2024 16:01

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Оглавление вставляется в ваш шаблон с помощью $table-of-contents$ . Вы не можете изменить его в шаблоне.

Но вы можете вставить $table-of-contents$ в часть javascript вашего шаблона и поместить его в любой элемент вашего дома. Такой подход вы можете увидеть в toc-css.

Или вы пишете простой фильтр Lua, который вставляет оглавление в ваш документ. Вот пример:

Ваш файл уценки input.md:

# Document Title

Some introductory text...

## Table of Contents

YOURTOCMARKER

## First Section

Content of the first section...

Lua-фильтр my_filter.lua

local your_toc = {}
Pandoc = function(elem)
    your_toc = pandoc.structure.table_of_contents(elem)
    print(your_toc)
    return elem:walk{
        Block = function(s)
            if pandoc.utils.stringify(s) == "YOURTOCMARKER" then
                print(type(your_toc))
                return {
                    pandoc.RawBlock('html', '<nav id = "my_toc">'), 
                    your_toc, 
                    pandoc.RawBlock('html', '</nav>'),
                }
            end
        end
    }
end

Запустите со следующим

pandoc input.md -f markdown -t html -o output.html --lua-filter your_filter.lua

выдает следующий результат output.html:

<h1 id = "document-title">Document Title</h1>
<p>Some introductory text…</p>
<h2 id = "table-of-contents">Table of Contents</h2>
<nav id = "my_toc">
  <ul>
    <li>
      <a href = "#document-title" id = "toc-document-title">Document Title</a>
      <ul>
        <li>
          <a href = "#table-of-contents" id = "toc-table-of-contents">Table of Contents</a>
        </li>
        <li>
          <a href = "#first-section" id = "toc-first-section">First Section</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
<h2 id = "first-section">First Section</h2>
<p>Content of the first section…</p>

Конечно, вы можете комбинировать этот подход с опциями --css и --template.

15.08.2024 12:45