Skip to content

Commit 0326e85

Browse files
authored
Update README (#127)
* Remove features from test_files * Modify description * {% toc %} tag / toc_only filter * Move "Default Configuration" to the customization section * Add _config.yml * Refine English * Add " Alternative Tools" * Update TOC * Update README.md * Update TOC again * Add "Enable TOC by default" closes #116
1 parent 3f9a7f1 commit 0326e85

File tree

2 files changed

+55
-25
lines changed

2 files changed

+55
-25
lines changed

README.md

Lines changed: 53 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,19 @@
99

1010
- [Installation](#installation)
1111
- [Usage](#usage)
12-
- [1. Basic Usage](#1-basic-usage)
13-
- [2. Advanced Usage](#2-advanced-usage)
12+
- [Basic Usage](#basic-usage)
13+
- [Advanced Usage](#advanced-usage)
1414
- [Generated HTML](#generated-html)
15-
- [Default Configuration](#default-configuration)
1615
- [Customization](#customization)
16+
- [Default Configuration](#default-configuration)
1717
- [TOC levels](#toc-levels)
18+
- [Enable TOC by default](#enable-toc-by-default)
1819
- [Skip TOC](#skip-toc)
19-
- [Skip TOC Section](#skip-toc-section)
20+
- [Skip TOC Sectionally](#skip-toc-sectionally)
2021
- [CSS Styling](#css-styling)
2122
- [Custom CSS Class](#custom-css-class)
2223
- [Using Unordered/Ordered lists](#using-unorderedordered-lists)
24+
- [Alternative Tools](#alternative-tools)
2325

2426
## Installation
2527

@@ -51,7 +53,7 @@ toc: true
5153
There are three Liquid filters, which can be applied to HTML content,
5254
e.g. the Liquid variable `content` available in Jekyll's templates.
5355

54-
### 1. Basic Usage
56+
### Basic Usage
5557

5658
#### `toc` filter
5759

@@ -63,11 +65,11 @@ Add the `toc` filter to your site's `{{ content }}` (e.g. `_layouts/post.html`).
6365

6466
This filter places the TOC directly above the content.
6567

66-
### 2. Advanced Usage
68+
### Advanced Usage
6769

6870
If you'd like separated TOC and content, you can use `{% toc %}` tag (or `toc_only` filter) and `inject_anchors` filter.
6971

70-
#### `{% toc %}` tag
72+
#### `{% toc %}` tag / `toc_only` filter
7173

7274
Generates the TOC itself as described [below](#generated-html).
7375
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.
8688

8789
:warning: **`{% toc %}` Tag Limitation**
8890

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.
9093

9194
```html
9295
<div>
@@ -115,7 +118,7 @@ location with the `toc_only` filter.
115118

116119
## Generated HTML
117120

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.
119122

120123
```html
121124
<ul class="section-nav">
@@ -141,9 +144,14 @@ jekyll-toc generates an unordered list. The HTML output is as follows.
141144

142145
![screenshot](https://user-images.githubusercontent.com/803398/28401295-0dcfb7ca-6d54-11e7-892b-2f2e6ca755a7.png)
143146

144-
## Default Configuration
147+
## Customization
148+
149+
jekyll-toc is customizable on `_config.yml`.
150+
151+
### Default Configuration
145152

146153
```yml
154+
# _config.yml
147155
toc:
148156
min_level: 1
149157
max_level: 6
@@ -155,39 +163,49 @@ toc:
155163
item_prefix: toc-
156164
```
157165

158-
## Customization
159-
160166
### TOC levels
161167

162-
The toc levels can be configured on `_config.yml`:
163-
164168
```yml
169+
# _config.yml
165170
toc:
166171
min_level: 2 # default: 1
167172
max_level: 5 # default: 6
168173
```
169174

170-
The default level range is `<h1>` to `<h6>`.
175+
The default heading range is from `<h1>` to `<h6>`.
176+
177+
### Enable TOC by default
178+
179+
You can enable TOC by default with [Front Matter Defaults](https://jekyllrb.com/docs/configuration/front-matter-defaults/):
180+
181+
```yml
182+
# _config.yml
183+
defaults:
184+
- scope:
185+
path: ""
186+
values:
187+
toc: true
188+
```
171189

172190
### Skip TOC
173191

174-
The heading is ignored in the toc when you add `no_toc` to the class.
192+
The heading is ignored in the toc by adding `no_toc` class.
175193

176194
```html
177195
<h1>h1</h1>
178-
<h1 class="no_toc">This heading is ignored in the toc</h1>
196+
<h1 class="no_toc">This heading is ignored in the TOC</h1>
179197
<h2>h2</h2>
180198
```
181199

182-
### Skip TOC Section
200+
### Skip TOC Sectionally
183201

184202
The headings are ignored inside the element which has `no_toc_section` class.
185203

186204
```html
187205
<h1>h1</h1>
188206
<div class="no_toc_section">
189-
<h2>This heading is ignored in the toc</h2>
190-
<h3>This heading is ignored in the toc</h3>
207+
<h2>This heading is ignored in the TOC</h2>
208+
<h3>This heading is ignored in the TOC</h3>
191209
</div>
192210
<h4>h4</h4>
193211
```
@@ -197,13 +215,15 @@ Which would result in only the `<h1>` & `<h4>` within the example being included
197215
The class can be configured on `_config.yml`:
198216

199217
```yml
218+
# _config.yml
200219
toc:
201220
no_toc_section_class: exclude # default: no_toc_section
202221
```
203222

204-
Configuring multiple classes for `no_toc_section_class` is allowed:
223+
Configuring multiple classes are allowed:
205224

206225
```yml
226+
# _config.yml
207227
toc:
208228
no_toc_section_class:
209229
- no_toc_section
@@ -229,14 +249,15 @@ The toc can be modified with CSS. The sample CSS is the following.
229249

230250
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`.
231251

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`.
234254

235255
### Custom CSS Class
236256

237257
You can apply custom CSS classes to the generated `<ul>` and `<li>` tags.
238258

239259
```yml
260+
# _config.yml
240261
toc:
241262
# Default is "section-nav":
242263
list_class: my-list-class
@@ -254,6 +275,7 @@ By default the table of contents will be generated as an unordered list via `<ul
254275
This can be configured in `_config.yml`:
255276

256277
```yml
278+
# _config.yml
257279
toc:
258280
ordered_list: true # default is false
259281
```
@@ -264,6 +286,7 @@ Add a class to the `sublist_class` configuration to append it to the `ol` tags s
264286
Example
265287

266288
```yml
289+
# _config.yml
267290
toc:
268291
ordered_list: true
269292
list_class: my-list-class
@@ -283,3 +306,10 @@ toc:
283306
This will produce:
284307

285308
![screenshot](https://user-images.githubusercontent.com/7675276/85813980-a0ea5a80-b719-11ea-9458-ccf9b86a778b.png)
309+
310+
## Alternative Tools
311+
312+
- Adding anchor to headings
313+
- [AnchorJS](https://www.bryanbraun.com/anchorjs/)
314+
- Generating TOC for kramdown content
315+
- [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))

jekyll-toc.gemspec

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ Gem::Specification.new do |spec|
88
spec.name = 'jekyll-toc'
99
spec.version = Jekyll::TableOfContents::VERSION
1010
spec.summary = 'Jekyll Table of Contents plugin'
11-
spec.description = 'Jekyll (Ruby static website generator) plugin which generates a table of contents.'
11+
spec.description = 'Jekyll (Ruby static website generator) plugin which generates a Table of Contents for the page.'
1212
spec.authors = %w(toshimaru torbjoernk)
1313
spec.email = 'me@toshimaru.net'
1414
spec.files = `git ls-files -z`.split("\x0")
1515
spec.homepage = 'https://github.com/toshimaru/jekyll-toc'
1616
spec.license = 'MIT'
17-
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
17+
spec.test_files = spec.files.grep(%r{^(test|spec)/})
1818
spec.require_paths = ['lib']
1919

2020
spec.required_ruby_version = '>= 2.4'

0 commit comments

Comments
 (0)