You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
There are three Liquid filters, which can be applied to HTML content,
52
54
e.g. the Liquid variable `content` available in Jekyll's templates.
53
55
54
-
### 1. Basic Usage
56
+
### Basic Usage
55
57
56
58
#### `toc` filter
57
59
@@ -63,11 +65,11 @@ Add the `toc` filter to your site's `{{ content }}` (e.g. `_layouts/post.html`).
63
65
64
66
This filter places the TOC directly above the content.
65
67
66
-
### 2. Advanced Usage
68
+
### Advanced Usage
67
69
68
70
If you'd like separated TOC and content, you can use `{% toc %}` tag (or `toc_only` filter) and `inject_anchors` filter.
69
71
70
-
#### `{% toc %}` tag
72
+
#### `{% toc %}` tag / `toc_only` filter
71
73
72
74
Generates the TOC itself as described [below](#generated-html).
73
75
Mostly useful in cases where the TOC should _not_ be placed immediately
@@ -86,7 +88,8 @@ above the content but at some other place of the page, i.e. an aside.
86
88
87
89
:warning: **`{% toc %}` Tag Limitation**
88
90
89
-
`{% toc %}`can be available only in [Jekyll Posts](https://jekyllrb.com/docs/step-by-step/08-blogging/) and [Jekyll Collections](https://jekyllrb.com/docs/collections/). If you'd like to use `{% toc %}` except posts or collections, please use `toc_only` filter as described below.
91
+
`{% toc %}`works only for [Jekyll Posts](https://jekyllrb.com/docs/step-by-step/08-blogging/) and [Jekyll Collections](https://jekyllrb.com/docs/collections/).
92
+
If you'd like to use `{% toc %}` except posts or collections, please use `toc_only` filter as described below.
90
93
91
94
```html
92
95
<div>
@@ -115,7 +118,7 @@ location with the `toc_only` filter.
115
118
116
119
## Generated HTML
117
120
118
-
jekyll-toc generates an unordered list. The HTML output is as follows.
121
+
jekyll-toc generates an unordered list by default. The HTML output is as follows.
119
122
120
123
```html
121
124
<ul class="section-nav">
@@ -141,9 +144,14 @@ jekyll-toc generates an unordered list. The HTML output is as follows.
Configuring multiple classes for `no_toc_section_class` is allowed:
223
+
Configuring multiple classes are allowed:
205
224
206
225
```yml
226
+
# _config.yml
207
227
toc:
208
228
no_toc_section_class:
209
229
- no_toc_section
@@ -229,14 +249,15 @@ The toc can be modified with CSS. The sample CSS is the following.
229
249
230
250
Each TOC `li` entry has two CSS classes for further styling. The general `toc-entry` is applied to all `li` elements in the `ul.section-nav`.
231
251
232
-
Depending on the heading level each specific entry refers to, it has a second CSS class `toc-XX`, where `XX` is the HTML heading tag name. For example, the TOC entry linking to a heading `<h1>...</h1>` (a single
233
-
`#`in Markdown) will get the CSS class `toc-h1`.
252
+
Depending on the heading level each specific entry refers to, it has a second CSS class `toc-XX`, where `XX` is the HTML heading tag name.
253
+
For example, the TOC entry linking to a heading `<h1>...</h1>` (a single `#` in Markdown) will get the CSS class `toc-h1`.
234
254
235
255
### Custom CSS Class
236
256
237
257
You can apply custom CSS classes to the generated `<ul>` and `<li>` tags.
238
258
239
259
```yml
260
+
# _config.yml
240
261
toc:
241
262
# Default is "section-nav":
242
263
list_class: my-list-class
@@ -254,6 +275,7 @@ By default the table of contents will be generated as an unordered list via `<ul
254
275
This can be configured in `_config.yml`:
255
276
256
277
```yml
278
+
# _config.yml
257
279
toc:
258
280
ordered_list: true # default is false
259
281
```
@@ -264,6 +286,7 @@ Add a class to the `sublist_class` configuration to append it to the `ol` tags s
- [Automatic “Table of Contents” Generation](https://kramdown.gettalong.org/converter/html.html#toc) (See also. [Create Table of Contents in kramdown](https://blog.toshima.ru/2020/05/22/kramdown-toc))
0 commit comments