diff options
author | Thibaud Lepretre <thibaud.lepretre@gmail.com> | 2021-08-07 14:49:57 +0300 |
---|---|---|
committer | Thibaud Lepretre <thibaud.lepretre@gmail.com> | 2021-08-11 15:04:00 +0300 |
commit | a98bf8ca122e88fc7d108a2360b02870a124b72c (patch) | |
tree | 4d875fb75f6e62c0dd2c955a904075c595c9cdb6 | |
parent | 6713b3fb8d6170a342521cd36c2c8d0026b33535 (diff) |
Add new shortcode toc to support new markup
fixes #395
-rw-r--r-- | docs/user.md | 20 | ||||
-rw-r--r-- | exampleSite/config.toml | 10 | ||||
-rw-r--r-- | exampleSite/content/posts/Tags-plugins-showcase.md | 2 | ||||
-rw-r--r-- | exampleSite/content/posts/Welcome-to-the-new-Tranquilpeak.md | 3 | ||||
-rw-r--r-- | exampleSite/content/posts/highlighted-code-showcase.md | 2 | ||||
-rw-r--r-- | layouts/_default/single.html | 2 | ||||
-rw-r--r-- | layouts/shortcodes/toc.html | 2 |
7 files changed, 34 insertions, 7 deletions
diff --git a/docs/user.md b/docs/user.md index 999dd35..af432df 100644 --- a/docs/user.md +++ b/docs/user.md @@ -668,10 +668,24 @@ Use: ### Display table of contents -As post excerpt feature enable with `<!--more-->` comment, you can display the table of contents of a post with `<!-- toc -->`. Place this comment where you want to display the table of content. +Hugo Tranquilpeak theme provides a shortcode for adding table of content inside your content. -Here is what looks like the table of contents generated: -![thumbnail-image-position-left](https://s3-ap-northeast-1.amazonaws.com/tranquilpeak-hexo-theme/docs/1.4.0/toc-400.png) +syntgax: +``` +{{< toc >}} +``` + +However you may have to update your hugo `config.toml` configuration to be sure that `startLevel` is matching your content. By default (see [official documentation](https://gohugo.io/getting-started/configuration-markup/#table-of-contents)) Hugo detects table of content starting level 2, that mean `<h2>my title</h2>` or `## my title`. + +If you used to write `# my title` and so transformed to `<h1>my title</h1>`, the table of content will be empty by default if you're not updating `startLevel` to `startLevel = 1` + +```toml +[markup] + [markup.tableOfContents] + endLevel = 3 + ordered = false + startLevel = 1 +``` ### Tags diff --git a/exampleSite/config.toml b/exampleSite/config.toml index a55de40..13a98f9 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -31,6 +31,16 @@ canonifyurls = true archive = "archives" # ------ +# Markup +# ------ +[markup] + # Set startLevel = 1 to support # title (<h1>title</h1>) otherwise table of content is blank/empty + [markup.tableOfContents] + endLevel = 3 + ordered = false + startLevel = 1 + +# ------ # Author # ------ [author] diff --git a/exampleSite/content/posts/Tags-plugins-showcase.md b/exampleSite/content/posts/Tags-plugins-showcase.md index 5ded476..73ff957 100644 --- a/exampleSite/content/posts/Tags-plugins-showcase.md +++ b/exampleSite/content/posts/Tags-plugins-showcase.md @@ -11,7 +11,7 @@ thumbnailImage: //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-6-140.j This post is used to show how tag plugins are displayed. See [docs](https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#tags) for more info. <!--more--> -<!-- toc --> +{{< toc >}} # Alert diff --git a/exampleSite/content/posts/Welcome-to-the-new-Tranquilpeak.md b/exampleSite/content/posts/Welcome-to-the-new-Tranquilpeak.md index 108d703..fe75f76 100644 --- a/exampleSite/content/posts/Welcome-to-the-new-Tranquilpeak.md +++ b/exampleSite/content/posts/Welcome-to-the-new-Tranquilpeak.md @@ -25,7 +25,8 @@ Tranquilpeak is a gorgeous responsive theme for Hugo blog framework. It has many ![Tranquilpeak](/img/showcase.png) Tranquilpeak is a gorgeous responsive theme for Hugo blog framework. It has many features and integrated services to improve user experience. -<!-- toc --> + +{{< toc >}} # Tranquilpeak diff --git a/exampleSite/content/posts/highlighted-code-showcase.md b/exampleSite/content/posts/highlighted-code-showcase.md index 80665aa..1e8cb61 100644 --- a/exampleSite/content/posts/highlighted-code-showcase.md +++ b/exampleSite/content/posts/highlighted-code-showcase.md @@ -15,7 +15,7 @@ thumbnailImage: //d1u9biwaxjngwg.cloudfront.net/highlighted-code-showcase/peak-1 Tranquilpeak Hugo theme have its own theme to highlight source code. It's based on GitHub theme: simple and elegant. Check out how it sublimate source codes. <!--more--> -<!-- toc --> +{{< toc >}} # Tabbed code block diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 19c55b8..d00724c 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -17,7 +17,7 @@ {{ end }} <div class="post-content markdown"> <div class="main-content-wrap"> - {{ (replaceRE "<!--\\s*[t|T][o|O][c|C]\\s*-->" (printf "<h1 id=\"table-of-contents\">%s</h1>%s" (i18n "post.toc") .TableOfContents) .Content) | safeHTML }} + {{ .Content }} {{ partial "post/gallery.html" . }} </div> </div> diff --git a/layouts/shortcodes/toc.html b/layouts/shortcodes/toc.html new file mode 100644 index 0000000..669f274 --- /dev/null +++ b/layouts/shortcodes/toc.html @@ -0,0 +1,2 @@ +<h1 id="table-of-contents">{{ i18n "post.toc" }}</h1> +{{ .Page.TableOfContents }} |