Skip to content

Commit

Permalink
Improve consistent use of method instead of variable
Browse files Browse the repository at this point in the history
  • Loading branch information
jmooring committed Jun 15, 2024
1 parent 820881d commit 14f9acb
Show file tree
Hide file tree
Showing 11 changed files with 55 additions and 122 deletions.
2 changes: 1 addition & 1 deletion content/en/content-management/shortcodes.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ In addition to cleaner Markdown, shortcodes can be updated any time to reflect n

{{< youtube 2xkNJL4gJ9E >}}

In your content files, a shortcode can be called by calling `{{%/* shortcodename parameters */%}}`. Shortcode parameters are space delimited, and parameters with internal spaces can be quoted.
In your content files, a shortcode can be called by calling `{{%/* shortcodename parameters */%}}`. Shortcode arguments are space delimited, and arguments with internal spaces must be quoted.

The first word in the shortcode declaration is always the name of the shortcode. Parameters follow the name. Depending upon how the shortcode is defined, the parameters may be named, positional, or both, although you can't mix parameter types in a single call. The format for named parameters models that of HTML with the format `name="value"`.

Expand Down
4 changes: 2 additions & 2 deletions content/en/content-management/taxonomies.md
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ wikipedia: "https://en.wikipedia.org/wiki/Bruce_Willis"
[content type]: /content-management/types/
[documentation on archetypes]: /content-management/archetypes/
[front matter]: /content-management/front-matter/
[taxonomy list templates]: /templates/taxonomy-templates/#taxonomy-list-templates
[taxonomy list templates]: /templates/taxonomy-templates/#taxonomy-templates
[taxonomy templates]: /templates/taxonomy-templates/
[terms within the taxonomy]: /templates/taxonomy-templates/#taxonomy-terms-templates
[terms within the taxonomy]: /templates/taxonomy-templates/#term-templates
[site configuration]: /getting-started/configuration/
6 changes: 3 additions & 3 deletions content/en/methods/shortcode/Params.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Params
description: Returns a collection of the shortcode parameters.
description: Returns a collection of the shortcode arguments.
categories: []
keywords: []
action:
Expand All @@ -10,7 +10,7 @@ action:
signatures: [SHORTCODE.Params]
---

When you call a shortcode using positional parameters, the `Params` method returns a slice.
When you call a shortcode using positional arguments, the `Params` method returns a slice.

{{< code file=content/about.md lang=md >}}
{{</* myshortcode "Hello" "world" */>}}
Expand All @@ -21,7 +21,7 @@ When you call a shortcode using positional parameters, the `Params` method retur
{{ index .Params 1 }} → world
{{< /code >}}

When you call a shortcode using named parameters, the `Params` method returns a map.
When you call a shortcode using named arguments, the `Params` method returns a map.

{{< code file=content/about.md lang=md >}}
{{</* myshortcode greeting="Hello" name="world" */>}}
Expand Down
2 changes: 1 addition & 1 deletion content/en/methods/shortcode/Parent.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ action:
signatures: [SHORTCODE.Parent]
---

This is useful for inheritance of common shortcode parameters from the root.
This is useful for inheritance of common shortcode arguments from the root.

In this contrived example, the "greeting" shortcode is the parent, and the "now" shortcode is child.

Expand Down
2 changes: 1 addition & 1 deletion content/en/templates/embedded.md
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ To include the embedded template:

### Configure X (Twitter) Cards

Hugo's X (Twitter) Card template is configured using a mix of configuration variables and [front-matter](/content-management/front-matter/) on individual pages.
Hugo's X (Twitter) Card template is configured using a mix of configuration settings and [front-matter](/content-management/front-matter/) values on individual pages.

{{< code-toggle file=hugo >}}
[params]
Expand Down
11 changes: 1 addition & 10 deletions content/en/templates/homepage.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,8 @@ toc: true
aliases: [/layout/homepage/,/templates/homepage-template/]
---

Homepage is a `Page` and therefore has all the [page variables][pagevars] and [site variables][sitevars] available for use.

{{% note %}}
The homepage template is the *only* required template for building a site and therefore useful when bootstrapping a new site and template. It is also the only required template if you are developing a single-page website.
{{% /note %}}


{{< youtube ut1xtRZ1QOA >}}

Expand All @@ -32,8 +29,6 @@ See the homepage template below or [Content Organization][contentorg] for more i

## Example homepage template

The following is an example of a homepage template that uses [partial][partials], [base] templates, and a content file at `content/_index.md` to populate the `{{ .Title }}` and `{{ .Content }}` [page variables][pagevars].

{{< code file=layouts/index.html >}}
{{ define "main" }}
<main aria-role="main">
Expand All @@ -56,10 +51,6 @@ The following is an example of a homepage template that uses [partial][partials]
{{ end }}
{{< /code >}}

[base]: /templates/base/
[contentorg]: /content-management/organization/
[lists]: /templates/lists/
[lookup]: /templates/lookup-order/
[pagevars]: /methods/page/
[partials]: /templates/partials/
[sitevars]: /methods/site/
24 changes: 3 additions & 21 deletions content/en/templates/lists/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,25 +34,9 @@ The idea of a list page comes from the [hierarchical mental model of the web][me

[![Image demonstrating a hierarchical website sitemap.](site-hierarchy.svg)](site-hierarchy.svg)

## List defaults

### Default templates

Since section lists and taxonomy lists (N.B., *not* [taxonomy terms lists][taxterms]) are both *lists* with regards to their templates, both have the same terminating default of `_default/list.html` or `themes/<THEME>/layouts/_default/list.html` in their lookup order. In addition, both [section lists][sectiontemps] and [taxonomy lists][taxlists] have their own default list templates in `_default`.

See [Template Lookup Order](/templates/lookup-order/) for the complete reference.

## Add content and front matter to list pages

Since v0.18, [everything in Hugo is a `Page`][bepsays]. This means list pages and the homepage can have associated content files (i.e. `_index.md`) that contain page metadata (i.e., front matter) and content.

This new model allows you to include list-specific front matter via `.Params` and also means that list templates (e.g., `layouts/_default/list.html`) have access to all [page variables][pagevars].

{{% note %}}
It is important to note that all `_index.md` content files will render according to a *list* template and not according to a [single page template](/templates/single-page-templates/).
{{% /note %}}

### Example project directory
Add content and front matter to list pages by creating an _index.md file for `home`, `section`, `taxonomy`, and `term` pages.

The following is an example of a typical Hugo project directory's content:

Expand Down Expand Up @@ -241,15 +225,13 @@ See the documentation on [`where`] and
[getpage]: /methods/page/getpage/
[homepage]: /templates/homepage/
[mentalmodel]: https://webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html
[pagevars]: /methods/page/
[partials]: /templates/partials/
[RSS 2.0]: https://cyber.harvard.edu/rss/rss.html
[rss]: /templates/rss/
[sections]: /content-management/sections/
[sectiontemps]: /templates/section-templates/
[sitevars]: /methods/site/
[taxlists]: /templates/taxonomy-templates/#taxonomy-list-templates
[taxterms]: /templates/taxonomy-templates/#taxonomy-terms-templates
[taxlists]: /templates/taxonomy-templates/#taxonomy-templates
[taxterms]: /templates/taxonomy-templates/#term-templates
[taxvars]: /methods/taxonomy/
[views]: /templates/views/
[`where`]: /functions/collections/where/
Expand Down
2 changes: 1 addition & 1 deletion content/en/templates/section-templates.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Section page templates
linkTitle: Section templates
description: Templates used for section pages are **lists** and therefore have all the variables and methods available to list pages.
description: Use section templates to list members of a section.
categories: [templates]
keywords: [lists,sections,templates]
menu:
Expand Down
69 changes: 32 additions & 37 deletions content/en/templates/shortcode-templates.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Hugo's embedded shortcodes cover many common, but not all, use cases. Luckily, H

### File location

To create a shortcode, place an HTML template in the `layouts/shortcodes` directory of your [source organization]. Consider the file name carefully since the shortcode name will mirror that of the file but without the `.html` extension. For example, `layouts/shortcodes/myshortcode.html` will be called with either `{{</* myshortcode /*/>}}` or `{{%/* myshortcode /*/%}}`.
To create a shortcode, place an HTML template in the `layouts/shortcodes` directory. Consider the file name carefully since the shortcode name will mirror that of the file but without the `.html` extension. For example, `layouts/shortcodes/myshortcode.html` will be called with either `{{</* myshortcode /*/>}}` or `{{%/* myshortcode /*/%}}`.

You can organize your shortcodes in subdirectories, e.g. in `layouts/shortcodes/boxes`. These shortcodes would then be accessible with their relative path, e.g:

Expand All @@ -44,31 +44,31 @@ Shortcode templates have a simple [lookup order]:
1. `/layouts/shortcodes/<SHORTCODE>.html`
2. `/themes/<THEME>/layouts/shortcodes/<SHORTCODE>.html`

### Positional vs. named parameters
### Positional vs. named arguments

You can create shortcodes using the following types of parameters:
You can create shortcodes using the following types of arguments:

* Positional parameters
* Named parameters
* Positional *or* named parameters (i.e, "flexible")
* Positional arguments
* Named arguments
* Positional *or* named arguments

In shortcodes with positional parameters, the order of the parameters is important. If a shortcode has a single required value (e.g., the `youtube` shortcode below), positional parameters work very well and require less typing from content authors.
In shortcodes with positional arguments, the order of the arguments is important. If a shortcode has a single required value, positional arguments require less typing from content authors.

For more complex layouts with multiple or optional parameters, named parameters work best. While less terse, named parameters require less memorization from a content author and can be added in a shortcode declaration in any order.
For more complex layouts with multiple or optional arguments, named arguments work best. While less terse, named arguments require less memorization from a content author and can be added in a shortcode declaration in any order.

Allowing both types of parameters (i.e., a "flexible" shortcode) is useful for complex layouts where you want to set default values that can be easily overridden by users.
Allowing both types of arguments is useful for complex layouts where you want to set default values that can be easily overridden by users.

### Access parameters
### Access arguments

All shortcode parameters can be accessed via the `.Get` method. Whether you pass a key (i.e., string) or a number to the `.Get` method depends on whether you are accessing a named or positional parameter, respectively.
All shortcode arguments can be accessed via the `.Get` method. Whether you pass a string or a number to the `.Get` method depends on whether you are accessing a named or positional argument, respectively.

To access a parameter by name, use the `.Get` method followed by the named parameter as a quoted string:
To access an argument by name, use the `.Get` method followed by the named argument as a quoted string:

```go-html-template
{{ .Get "class" }}
```

To access a parameter by position, use the `.Get` followed by a numeric position, keeping in mind that positional parameters are zero-indexed:
To access an argument by position, use the `.Get` followed by a numeric position, keeping in mind that positional arguments are zero-indexed:

```go-html-template
{{ .Get 0 }}
Expand All @@ -80,13 +80,13 @@ For the second position, you would just use:
{{ .Get 1 }}
```

`with` is great when the output depends on a parameter being set:
`with` is great when the output depends on a argument being set:

```go-html-template
{{ with .Get "class" }} class="{{ . }}"{{ end }}
```

`.Get` can also be used to check if a parameter has been provided. This is
`.Get` can also be used to check if a argument has been provided. This is
most helpful when the condition depends on either of the values, or both:

```go-html-template
Expand All @@ -95,43 +95,41 @@ most helpful when the condition depends on either of the values, or both:

#### `.Inner`

If a closing shortcode is used, the `.Inner` variable will be populated with the content between the opening and closing shortcodes. To check if `.Inner` contains anything other than whitespace:
The `.Inner` method returns the content between the opening and closing shortcode tags. To check if `.Inner` returns anything other than whitespace:

```go-html-template
{{ if strings.ContainsNonSpace .Inner }}
Inner is not empty
{{ end }}
```

A shortcode with content declared via the `.Inner` variable can also be declared without the content and without the closing tag by using the self-closing syntax:
{{% note %}}
Any shortcode that calls the `.Inner` method must be closed or self-closed. To call a shortcode using the self-closing sytax

Check warning on line 107 in content/en/templates/shortcode-templates.md

View workflow job for this annotation

GitHub Actions / spellcheck

Unknown word (sytax)

```go-html-template
{{</* innershortcode /*/>}}
```

{{% note %}}
Any shortcode that refers to `.Inner` must be closed or self-closed.

{{% /note %}}

#### `.Params`

The `.Params` variable in shortcodes contains the list parameters passed to shortcode for more complicated use cases. You can also access higher-scoped parameters with the following logic:
The `.Params` method in shortcodes returns the arguments passed to the shortcode for more complicated use cases. You can also access higher-scoped arguments with the following logic:

$.Params
: these are the parameters passed directly into the shortcode declaration (e.g., a YouTube video ID)
: these are the arguments passed directly into the shortcode declaration (e.g., a YouTube video ID)

$.Page.Params
: refers to the page's parameters; the "page" in this case refers to the content file in which the shortcode is declared (e.g., a `shortcode_color` field in a content's front matter could be accessed via `$.Page.Params.shortcode_color`).

$.Page.Site.Params
$.Site.Params
: refers to parameters defined in your site configuration.

#### `.IsNamedParams`

The `.IsNamedParams` method checks whether the shortcode declaration uses named parameters and returns a boolean value.
The `.IsNamedParams` method checks whether the shortcode declaration uses named arguments and returns a boolean value.

For example, you could create an `image` shortcode that can take either a `src` named parameter or the first positional parameter, depending on the preference of the content's author. Let's assume the `image` shortcode is called as follows:
For example, you could create an `image` shortcode that can take either a `src` named argument or the first positional argument, depending on the preference of the content's author. Let's assume the `image` shortcode is called as follows:

```go-html-template
{{</* image src="images/my-image.jpg" */>}}
Expand All @@ -141,25 +139,23 @@ You could then include the following as part of your shortcode templating:

```go-html-template
{{ if .IsNamedParams }}
<img src="{{ .Get "src" }}" alt="">
<img src="{{ .Get "src" }}" alt="">
{{ else }}
<img src="{{ .Get 0 }}" alt="">
<img src="{{ .Get 0 }}" alt="">
{{ end }}
```

See the [example Vimeo shortcode][vimeoexample] below for `.IsNamedParams` in action.

{{% note %}}
While you can create shortcode templates that accept both positional and named parameters, you *cannot* declare shortcodes in content with a mix of parameter types. Therefore, a shortcode declared like `{{</* image src="images/my-image.jpg" "This is my alt text" */>}}` will return an error.
While you can create shortcode templates that accept both positional and named arguments, you *cannot* declare shortcodes in content with a mix of argument types. Therefore, a shortcode declared like `{{</* image src="images/my-image.jpg" "This is my alt text" */>}}` will return an error.
{{% /note %}}

You can also use the variable `.Page` to access all the normal [page variables][pagevars].

Shortcodes can also be nested. In a nested shortcode, you can access the parent shortcode context with the [`.Parent`] shortcode method. This can be very useful for inheritance of common shortcode parameters from the root.
Shortcodes can also be nested. In a nested shortcode, you can access the parent shortcode context with the [`.Parent`] shortcode method. This can be very useful for inheritance from the root.

### Checking for existence

You can check if a specific shortcode is used on a page by calling `.HasShortcode` in that page template, providing the name of the shortcode. This is sometimes useful when you want to include specific scripts or styles in the header that are only used by that shortcode.
You can check if a specific shortcode is used on a page by calling `.HasShortcode` in that page template, providing the name of the shortcode. This is useful when you want to include specific scripts or styles in the header that are only used by that shortcode.

## Custom shortcode examples

Expand All @@ -179,7 +175,7 @@ Let's assume you would like to keep mentions of your copyright year current in y

### Single positional example: `youtube`

Embedded videos are a common addition to Markdown content that can quickly become unsightly. The following is the code used by [Hugo's built-in YouTube shortcode][youtubeshortcode]:
Embedded videos are a common addition to Markdown content. The following is the code used by [Hugo's built-in YouTube shortcode][youtubeshortcode]:

```go-html-template
{{</* youtube 09jf3ow9jfw */>}}
Expand Down Expand Up @@ -307,7 +303,7 @@ The rendered output of the HTML example code block will be as follows:

### Nested shortcode: image gallery

Hugo's [`.Parent`] shortcode method provides access to the parent shortcode context when the shortcode in question is called within the context of a *parent* shortcode. This provides an inheritance model for common shortcode parameters.
Hugo's [`.Parent`] shortcode method provides access to the parent shortcode context when the shortcode in question is called within the context of a parent shortcode. This provides an inheritance model.

The following example is contrived but demonstrates the concept. Assume you have a `gallery` shortcode that expects one named `class` parameter:

Expand All @@ -317,7 +313,7 @@ The following example is contrived but demonstrates the concept. Assume you have
</div>
{{< /code >}}

You also have an `img` shortcode with a single named `src` parameter that you want to call inside of `gallery` and other shortcodes, so that the parent defines the context of each `img`:
You also have an `img` shortcode with a single named `src` argument that you want to call inside of `gallery` and other shortcodes, so that the parent defines the context of each `img`:

{{< code file=layouts/shortcodes/img.html >}}
{{- $src := .Get "src" -}}
Expand Down Expand Up @@ -387,7 +383,7 @@ And once enabled, you can do this in your content files:

The above will print the current date and time.

Note that an inline shortcode's inner content is parsed and executed as a Go text template with the same context as a regular shortcode template.
Note that an inline shortcode's inner content is parsed and executed as a Go text template with the same context as a regular shortcode template.

This means that the current page can be accessed via `.Page.Title` etc. This also means that there are no concept of "nested inline shortcodes".

Expand All @@ -404,7 +400,6 @@ The same inline shortcode can be reused later in the same content file, with dif
[built-in shortcode]: /content-management/shortcodes/
[figure]: /content-management/shortcodes/#figure
[lookup order]: /templates/lookup-order/
[pagevars]: /methods/page/
[source organization]: /getting-started/directory-structure/
[vimeoexample]: #single-flexible-example-vimeo
[youtubeshortcode]: /content-management/shortcodes/#youtube
Loading

0 comments on commit 14f9acb

Please sign in to comment.