All geek questions in one place

Jekyll: Put the kramdown table of contents in _include for hash navigation

I want to provide hash links to page headers in a webpage menu. A web page is created using Jekyll, and its default layout is as follows:

<!DOCTYPE html> <html> {% include head.html %} <body> {% include header.html %} <div id="BigFatContainer"> {{ content }} {% include footer.html %} </div> </body> </html>

The title bar contains a menu for navigating various pages. I was able to add a table of contents to {{ content }} with the following Kramdown command:

 * Point at which the TOC is attached {:toc}

You can use some ugly JavaScript hack to move this table of contents from {{ content }} and to header.html , but that would be a bad solution. It is not possible to put the {:toc} macro inside header.html , since it is not parsed by Kramdown, and even if you make sure it is parsed by Kramdown, using, for example, this plugin displays TOC header.md instead of TOC for the content.

+6
source share
3 answers

@ Miroslav-Nedyalkov was on the right track. Following his suggestion to take a look at the Bootstrap documentation, I found that he uses Ruby Gem - jekyll-toc , which allows you to place TOC anywhere in the layout file. You include it in the front subject. Now I am successfully using:

 <nav aria-label="Table of Contents"> {{ content | toc_only }} </nav> <section itemprop="articleBody"> {{ content }} </section>
0
source

I suggest you use the Bootstrap site approach (scroll down and follow the correct navigation area), using - make your TOC as part of the content area, but the style that it will place on the side, as the main navigation. The main reason I offer you this approach is because you can (and most likely will) have more than one page. In this case, you will need to display a different page navigation for each page and display some navigation between the pages.

For more information, you can refer to this article - http://idratherbewriting.com/2015/01/20/implementing-scrollspy-with-jekyll-to-auto-build-a-table-of-contents/

0
source

Why move the toc block?

Correctly say that this toc is part of the content of the page. Semantically.

You problem here is not at the level of the structure of the document, but at the presentation.

In this case, it is recommended to use CSS to solve your problem.

-3
source

Source: https://habr.com/ru/post/980055/

More articles:


All Articles