diff --git a/content/content-management/archetypes.md b/content/content-management/archetypes.md index cdbe6953f..235de4ff2 100644 --- a/content/content-management/archetypes.md +++ b/content/content-management/archetypes.md @@ -49,15 +49,13 @@ To override the content type Hugo infers from `[content-section]`, add the `--ki Running this command in a new site that does not have default or custom archetypes will create the following file: -{{% output file="content/posts/my-first-post.md" %}} -``` +{{< output file="content/posts/my-first-post.md" >}} +++ date = "2017-02-01T19:20:04-07:00" title = "my first post" draft = true +++ -``` -{{% /output %}} +{{< /output >}} {{% note %}} In this example, if you do not already have a `content/posts` directory, Hugo will create both `content/posts/` and `content/posts/my-first-post.md` for you. @@ -121,16 +119,14 @@ $ hugo new posts/my-new-post.md Hugo then creates a new markdown file with the following front matter: -{{% output file="content/posts/my-new-post.md" %}} -``` +{{< output file="content/posts/my-new-post.md" >}} +++ categories = ["web development"] date = "2017-02-01T19:20:04-07:00" tags = ["golang", "hugo"] title = "my new post" +++ -``` -{{% /output %}} +{{< /output >}} We see that the `title` and `date` key-values have been added in addition to the `tags` and `categories` key-values from `archetypes/default.md`. @@ -162,8 +158,7 @@ $ hugo new posts/post-from-custom.md This time, Hugo recognizes our custom `archetypes/posts.md` archetype and uses it instead of `archetypes/default.md`. The generated file will now include the full list of front matter parameters, as well as the base archetype's `title` and `date`: -{{% output file="content/posts/post-from-custom-archetype.md" %}} -``` +{{< output file="content/posts/post-from-custom-archetype.md" >}} +++ categories = "" date = 2017-02-13T17:24:43-08:00 @@ -171,8 +166,7 @@ description = "" tags = "" title = "post from custom archetype" +++ -``` -{{% /output %}} +{{< /output >}} ### Hugo Docs Custom Archetype diff --git a/content/content-management/shortcodes.md b/content/content-management/shortcodes.md index 3482d6722..a4424a996 100644 --- a/content/content-management/shortcodes.md +++ b/content/content-management/shortcodes.md @@ -95,16 +95,14 @@ The `figure` shortcode can use the following named parameters: #### Example `figure` Output -{{% output file="figure-output-example.html" %}} -``` +{{< output file="figure-output-example.html" >}}

Steve Francia

-``` -{{% /output %}} +{{< /output >}} ### `gist` @@ -130,11 +128,9 @@ If the gist contains several files and you want to quote just one of them, you c #### Example `gist` Output -{{% output file="gist-output.html" %}} -``` +{{< output file="gist-output.html" >}} {{< gist spf13 7896402 >}} -``` -{{% /output %}} +{{< /output >}} #### Example `gist` Display @@ -165,8 +161,7 @@ This shortcode will convert the source code provided into syntax-highlighted HTM The `highlight` shortcode example above would produce the following HTML when the site is rendered: -{{% output file="tutorials/learn-html/index.html" %}} -``` +{{< output file="tutorials/learn-html/index.html" >}} <section id="main"> <div> <h1 id="title">{{ .Title }}</h1> @@ -175,8 +170,7 @@ The `highlight` shortcode example above would produce the following HTML when th {{ end }} </div> </section> -``` -{{% /output %}} +{{< /output >}} {{% note "More on Syntax Highlighting" %}} To see even more options for adding syntax-highlighted code blocks to your website, see [Syntax Highlighting in Developer Tools](/tools/syntax-highlighting/). @@ -206,11 +200,9 @@ You also have the option to hide the caption: By adding the preceding `hidecaption` example, the following HTML will be added to your rendered website's markup: -{{% output file="instagram-hide-caption-output.html" %}} -``` +{{< output file="instagram-hide-caption-output.html" >}} {{< instagram BWNjjyYFxVx hidecaption >}} -``` -{{% /output %}} +{{< /output >}} #### Example `instagram` Display @@ -265,11 +257,9 @@ Extract the value from the field `data-id` and pass it to the shortcode: #### `speakerdeck` Example Output -{{% output file="speakerdeck-example-input.md" %}} -``` +{{< output file="speakerdeck-example-input.md" >}} {{< speakerdeck 4e8126e72d853c0060001f97 >}} -``` -{{% /output %}} +{{< /output >}} #### `speakerdeck` Example Display @@ -297,11 +287,9 @@ Pass the tweet's ID from the URL as a parameter to the `tweet` shortcode: Using the preceding `tweet` example, the following HTML will be added to your rendered website's markup: -{{% output file="example-tweet-output.html" %}} -``` +{{< output file="example-tweet-output.html" >}} {{< tweet 877500564405444608 >}} -``` -{{% /output %}} +{{< /output >}} #### Example `tweet` Display @@ -329,11 +317,9 @@ Extract the ID from the video's URL and pass it to the `vimeo` shortcode: Using the preceding `vimeo` example, the following HTML will be added to your rendered website's markup: -{{% output file="example-vimeo-output.html" %}} -``` +{{< output file="example-vimeo-output.html" >}} {{< vimeo 146022717 >}} -``` -{{% /output %}} +{{< /output >}} {{% tip %}} If you want to further customize the visual styling of the YouTube or Vimeo output, add a `class` named parameter when calling the shortcode. The new `class` will be added to the `
` that wraps the `