Add files
This commit is contained in:
@@ -0,0 +1,96 @@
|
||||
---
|
||||
title: In-Page Navigation
|
||||
parent: Navigation
|
||||
nav_order: 5
|
||||
---
|
||||
|
||||
# In-Page Navigation
|
||||
{: .no_toc }
|
||||
|
||||
## Table of Contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
To support in-page navigation, you can generate a *Table of Contents* (TOC) with links to headings, like the one shown above, as well as a link to the top of the page.
|
||||
|
||||
## Generating Table of Contents
|
||||
|
||||
To generate a *Table of Contents* in a page, you use Kramdown's `{:toc}` method, immediately after the start of a list. This will automatically generate a list of anchor links to various sections of the page, based on headings and heading levels.
|
||||
|
||||
{: .note }
|
||||
`{:toc}` can be used only once on each page.
|
||||
|
||||
You **must** have a list immediately preceding the table of contents. The type of list determines the style of your table of contents.
|
||||
|
||||
For an *ordered* table of contents, use the following markdown code:
|
||||
|
||||
```md
|
||||
1. TOC
|
||||
{:toc}
|
||||
```
|
||||
|
||||
The `{:toc}` line *must* follow the `1. TOC` line, which begins a list.
|
||||
|
||||
For an *unordered* table of contents, instead use the following markdown code:
|
||||
|
||||
```
|
||||
- TOC
|
||||
{:toc}
|
||||
```
|
||||
|
||||
## Omitting Heading from Table of Contents
|
||||
|
||||
If you want to omit a particular heading from the TOC, follow it immediately by `{: .no_toc }` (possibly together with other CSS class names).
|
||||
|
||||
```markdown
|
||||
# In-Page Navigation
|
||||
{: .no_toc }
|
||||
|
||||
## Table of Contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
```
|
||||
|
||||
This example omits the top-level heading (`In-Page Navigation`) from the TOC, as well as the heading for the *Table of Contents* itself.
|
||||
|
||||
## Collapsible Table of Contents (with `<details>` and `<summary>`)
|
||||
|
||||
You can make the Table of Contents collapsible using the `<details>` and `<summary>` elements, as in the following example.
|
||||
|
||||
```markdown
|
||||
<details open markdown="block">
|
||||
<summary>
|
||||
Table of contents
|
||||
</summary>
|
||||
{: .text-delta }
|
||||
1. TOC
|
||||
{:toc}
|
||||
</details>
|
||||
```
|
||||
|
||||
The attribute `open` (which expands the Table of Contents by default) and the styling (here with `text-delta`) are optional.
|
||||
|
||||
## Back to Top {#back-to-top-doc}
|
||||
|
||||
{: .warning }
|
||||
The default id for a section with heading "Back to Top" is `"back-to-top"`.
|
||||
To avoid invalid HTML, sites that set the `back_to_top` configuration variable
|
||||
should override the default id for such sections. The Markdown source file for
|
||||
the current page uses `## Back to Top {#back-to-top-doc}`.
|
||||
|
||||
You can add a link from the bottom of each page to its top. You do this by including the `back_to_top` configuration option in your site's `_config.yml` file, together with `back_to_top_text` for the anchor link.
|
||||
|
||||
### Example
|
||||
{: .no_toc }
|
||||
|
||||
```yaml
|
||||
back_to_top: true
|
||||
back_to_top_text: "Back to top"
|
||||
```
|
||||
|
||||
{: .warning }
|
||||
Back-to-top links currently appear only when *other* configuration options require footer generation!
|
||||
Reference in New Issue
Block a user