hugo-geekblog/exampleSite/content/posts/advanced/includes.md
Robert Kaussow 2f01b4b903
refactor: move profile size from img to degicated avatar shortcode (#525)
BREAKING CHANGE: The `size=profile` option was removed from the `img` shortcode. To create avatar images the new `avatar` shortcode can be used.
2024-04-07 21:46:31 +02:00

3.0 KiB

title date authors tags
Includes 2021-05-23T20:00:00+01:00
john-doe
Documentation
Shortcodes

Include shortcode can include files of different types. By specifying a language, the included file will have syntax highlighting.

{{< toc >}}

Usage

{{</* include file="relative/path/from/hugo/root" language="go" */>}}

Attributes

{{< propertylist name=shortcode-includes sort=name order=asc >}}

Examples

Markdown files (default)

If no other options are specified, files will be rendered as Markdown using the RenderString function.

{{< hint type=important >}} Location of markdown files
If you include markdown files that should not get a menu entry, place them outside the content folder or exclude them otherwise. {{< /hint >}}

{{</* include file="/static/_includes/example.md.part" */>}}

{{< include file="/static/_includes/example.md.part" >}}

Language files

This method can be used to include source code files and keep them automatically up to date.

{{</* include file="config.yaml" language="yaml" options="linenos=table,hl_lines=5-6,linenostart=100" */>}}

Result:

{{< include file="config/_default/config.yaml" language="yaml" options="linenos=table,hl_lines=5-6,linenostart=100" >}}

Special include types

HTML

HTML content will be filtered by the safeHTML filter and added to the rendered page output.

{{</* include file="/static/_includes/example.html.part" type="html" */>}}

{{< include file="/static/_includes/example.html.part" type="html" >}}

Pages

In some situations, it can be helpful to include Markdown files that also contain shortcodes. While the default method works fine to render plain Markdown, shortcodes are not parsed. The only way to get this to work is to use Hugo pages. There are several ways to structure these include pages, so whatever you do, keep in mind that Hugo needs to be able to render and serve these files as regular pages! How it works:

  1. First you need to create a directory within your content directory. For this example site _includes is used.
  2. Place your Markdown files within the _includes folder e.g. /_includes/include-page.md. Make sure to name it *.md.
  3. Include the page using {{</* include file="/_includes/include-page.md" type="page" */>}}.

Resulting structure should look like this:

_includes/
 ├── include-page.md
 └── _index.md

{{< include file="/_includes/include-page.md" type="page" >}}