mirror of
https://github.com/gohugoio/hugoDocs.git
synced 2025-09-18 10:08:10 -04:00
Clean up code block for ids and classes (Second round)
Also fix issue with needsexamples.html shortcode.
This commit is contained in:
Ryan Watters
parent
e4336f0627
commit
bc9a649195
@ -148,7 +148,7 @@ To demonstrate the remarkably efficiency of Hugo's shortcode feature, we have em
|
||||
|
||||
### `highlight`
|
||||
|
||||
This shortcode will convert the source code provided into syntax-highlighted HTML. Read more on [highlighting](/tools/syntax-highlighting/). `highlight` takes exactly one required parameter of _language_ and requires a closing shortcode.
|
||||
This shortcode will convert the source code provided into syntax-highlighted HTML. Read more on [highlighting](/tools/syntax-highlighting/). `highlight` takes exactly one required `language` parameter and requires a closing shortcode.
|
||||
|
||||
#### Example `highlight` Input
|
||||
|
||||
@ -185,7 +185,7 @@ The `highlight` shortcode example above would produce the following HTML when th
|
||||
{{% /output %}}
|
||||
|
||||
{{% note "More on Syntax Highlighting" %}}
|
||||
To see even more options for adding syntax-highlighted code blocks to your website, see [Syntax Highlighting](/tools/syntax-highlighting/) in Developer Tools.
|
||||
To see even more options for adding syntax-highlighted code blocks to your website, see [Syntax Highlighting in Developer Tools](/tools/syntax-highlighting/).
|
||||
{{% /note %}}
|
||||
|
||||
### `instagram`
|
||||
|
||||
@ -62,12 +62,14 @@ You can show content summaries with the following code. You could use the follow
|
||||
```html
|
||||
{{ range first 10 .Data.Pages }}
|
||||
<article>
|
||||
<div class="summary">
|
||||
<!-- this <div> includes the title summary -->
|
||||
<div>
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||
{{ .Summary }}
|
||||
</div>
|
||||
{{ if .Truncated }}
|
||||
<div class="read-more-link">
|
||||
<!-- This <div> includes a read more link, but only if the summary is truncated... -->
|
||||
<div>
|
||||
<a href="{{ .RelPermalink }}">Read More…</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@ -14,7 +14,7 @@ menu:
|
||||
weight: 130 #rem
|
||||
draft: false
|
||||
aliases: [/extras/toc/,/content-management/toc/]
|
||||
toc: false
|
||||
toc: true
|
||||
---
|
||||
|
||||
Hugo can automatically parse Markdown content and create a Table of Contents you can leverage in your templates to guide readers to sections of longer pages.
|
||||
@ -38,8 +38,6 @@ One morning, when Gregor Samsa woke from troubled dreams, he found himself trans
|
||||
|
||||
He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.
|
||||
|
||||
His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls.
|
||||
|
||||
### My Subheading
|
||||
|
||||
A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops
|
||||
@ -47,6 +45,8 @@ A collection of textile samples lay spread out on the table - Samsa was a travel
|
||||
|
||||
Hugo will take this Markdown and create a table of contents from `## Introduction`, `## My Heading`, and `### My Subheading` and then store it in the [page variable][pagevars]`.TableOfContents`.
|
||||
|
||||
The built-in `.TableOfContents` variables outputs a `<nav id="TableOfContents">` element with a child `<ul>`, whose child `<li>` elements begin with any `<h1>`'s (i.e., `#` in markdown) inside your content.'
|
||||
|
||||
## Template Example: Basic TOC
|
||||
|
||||
The following is an example of a very basic [single page template][]:
|
||||
@ -54,12 +54,14 @@ The following is an example of a very basic [single page template][]:
|
||||
{{% code file="layout/_default/single.html" download="single.html" %}}
|
||||
```html
|
||||
{{ define "main" }}
|
||||
<main id="main">
|
||||
<main>
|
||||
<article>
|
||||
<header>
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
{{ .Content }}
|
||||
<aside id="toc">
|
||||
</article>
|
||||
<aside>
|
||||
{{ .TableOfContents }}
|
||||
</aside>
|
||||
</main>
|
||||
@ -74,9 +76,9 @@ The following is a [partial template][partials] that adds slightly more logic fo
|
||||
{{% code file="layouts/partials/toc.html" download="toc.html" %}}
|
||||
```html
|
||||
{{ if and (gt .WordCount 400 ) (ne .Params.toc "false") }}
|
||||
<aside id="toc">
|
||||
<aside>
|
||||
<header>
|
||||
<h2 class="toc-heading">{{.Title}}</h2>
|
||||
<h2>{{.Title}}</h2>
|
||||
</header>
|
||||
{{.TableOfContents}}
|
||||
</aside>
|
||||
@ -85,10 +87,10 @@ The following is a [partial template][partials] that adds slightly more logic fo
|
||||
{{% /code %}}
|
||||
|
||||
{{% note %}}
|
||||
With the preceding example, even pages with > 400 words *and* `toc` not set to false will not render a table of contents if there are no headings in the page for the `{{.TableOfContents}}` variable to pull from.
|
||||
With the preceding example, even pages with > 400 words *and* `toc` not set to `false` will not render a table of contents if there are no headings in the page for the `{{.TableOfContents}}` variable to pull from.
|
||||
{{% /note %}}
|
||||
|
||||
[conditionals]: /templates/introduction/#conditionals/
|
||||
[conditionals]: /templates/introduction/#conditionals
|
||||
[front matter]: /content-management/table-of-contents/
|
||||
[pagevars]: /variables/page/
|
||||
[partials]: /templates/partials/
|
||||
|
||||
@ -158,7 +158,7 @@ Code blocks are crucial for providing examples of Hugo's new features to end use
|
||||
|
||||
### Standard Syntax
|
||||
|
||||
Across all pages on the Hugo docs, the typical triple-back-tick markdown syntax is used. If you do not want to take the extra time to implement the following code block shortcodes, please use standard Github-flavored markdown. The Hugo docs use a version of [highlight.js](https://highlightjs.org/) that's been modified for specific Hugo keywords.
|
||||
Across all pages on the Hugo docs, the typical triple-back-tick markdown syntax is used. If you do not want to take the extra time to implement the following code block shortcodes, please use standard Github-flavored markdown. The Hugo docs use a version of [highlight.js](https://highlightjs.org/) with a specific set of languages.
|
||||
|
||||
Your options for languages are `xml`/`html`, `go`/`golang`, `md`/`markdown`/`mkd`, `handlebars`, `apache`, `toml`, `yaml`, `json`, `css`, `asciidoc`, `ruby`, `powershell`/`ps`, `scss`, `sh`/`zsh`/`bash`/`git`, `http`/`https`, and `javascript`/`js`.
|
||||
|
||||
@ -210,17 +210,17 @@ This example HTML code block tells Hugo users the following:
|
||||
{{%/* code file="layouts/_default/single.html" download="single.html" */%}}
|
||||
```html
|
||||
{{ define "main" }}
|
||||
<main class="main">
|
||||
<article class="content">
|
||||
<main>
|
||||
<article>
|
||||
<header>
|
||||
<h1>{{.Title}}</h1>
|
||||
{{with .Params.subtitle}}
|
||||
<span class="subtitle">{{.}}</span>
|
||||
<span>{{.}}</span>
|
||||
</header>
|
||||
<div class="body-copy">
|
||||
<div>
|
||||
{{.Content}}
|
||||
</div>
|
||||
<aside class="toc">
|
||||
<aside>
|
||||
{{.TableOfContents}}
|
||||
</aside>
|
||||
</article>
|
||||
@ -237,17 +237,17 @@ The output of this example will render to the Hugo docs as follows:
|
||||
{{% code file="layouts/_default/single.html" download="single.html" %}}
|
||||
```html
|
||||
{{ define "main" }}
|
||||
<main class="main">
|
||||
<article class="content">
|
||||
<main>
|
||||
<article>
|
||||
<header>
|
||||
<h1>{{.Title}}</h1>
|
||||
{{with .Params.subtitle}}
|
||||
<span class="subtitle">{{.}}</span>
|
||||
<span>{{.}}</span>
|
||||
</header>
|
||||
<div class="body-copy">
|
||||
<div>
|
||||
{{.Content}}
|
||||
</div>
|
||||
<aside class="toc">
|
||||
<aside>
|
||||
{{.TableOfContents}}
|
||||
</aside>
|
||||
</article>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,7 +1,7 @@
|
||||
<ul class="utils-list">
|
||||
{{range .Site.Pages }}
|
||||
{{ if .Params.needsexamples }}
|
||||
<li><a href="{{.Site.Params.ghdocsrepo}}content/{{.File.Path}}" target="_blank">{{.Title}} <i class="icon-pencil"></i></a></li>
|
||||
<li><a href="{{.Site.Params.ghdocsrepo}}/content/{{.File.Path}}" target="_blank">{{.Title}} <i class="icon-pencil"></i></a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
@ -92,8 +92,8 @@ aside {
|
||||
&:after {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-family: 'FontAwesome';
|
||||
content: '\f06a';
|
||||
font-family: 'fontello';
|
||||
content: '\e815';
|
||||
font-size: .9em;
|
||||
top: -.6em;
|
||||
right: 0px;
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user