Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can another file be Included in a Hugo/Markdown page?

Tags:

markdown

hugo

Recently the re-development of a web site was given to me. The re-worked site is to be done in Markdown and run through the Hugo static site generator.

Is there a way to include other files in a Markdown web page processed through Hugo? If so, how? Unless I've missed something, this isn't addressed in the Hugo docs.

With HTML and some servers (Apache, at least) you can do something like:

<html>
<body>
Some content
<!--#include virtual="name_of_first_file_to_include" -->
More content
<!--#include virtual="name_of_second_file_to_include" -->
Still more content
</body>
<html>

I've tried creating a template page which puts stuff like "Some content" and "More content" into the template and then the included stuff in my .md file which gets "included" via {{ .Content }} in the template. However, 1) That seems like the wrong way to use a template. 2) I've not figured out a way to bring in more files if I need them.

like image 714
GreenMatt Avatar asked Sep 16 '16 20:09

GreenMatt


People also ask

Can Markdown include other files?

You can now attach files, including images, to markdown files while you're editing them in the web. This works just like file attachments in issues and pull requests and supports the same file types.

Can I use HTML in Hugo?

Both HTML and Markdown are supported content formats. You can put any file type into your /content directories, but Hugo uses the markup front matter value if set or the file extension (see Markup identifiers in the table below) to determine if the markup needs to be processed, e.g.: Markdown converted to HTML.

How do I use markdown with Hugo?

Hugo has excellent Markdown support out of the box. By default, Hugo uses the Goldmark Markdown processor which is fully CommonMark-compliant. See the configuration instructions to learn more about the extensions you can configure. You can change Hugo’s Goldmark settings in the config.toml file, as shown below.

What Markdown processor does Hugo use?

By default, Hugo uses the Goldmark Markdown processor which is fully CommonMark-compliant. See the configuration instructions to learn more about the extensions you can configure. You can change Hugo’s Goldmark settings in the config.toml file, as shown below. Hugo provides support for the following Markdown elements.

Which content formats are supported by Hugo?

Both HTML and Markdown are supported content formats. You can put any file type into your /content directories, but Hugo uses the markup front matter value if set or the file extension (see Markup identifiers in the table below) to determine if the markup needs to be processed, e.g.:

What can you do with Hugo shortcodes?

If you write in Markdown and find yourself frequently embedding your content with raw HTML, Hugo provides built-in shortcodes functionality. This is one of the most powerful features in Hugo and allows you to create your own Markdown extensions very quickly.


2 Answers

For content files there are two options:

  1. Shortcodes. Powerful and documented.
  2. Use mmark as the markdown rendering engine with its include feature. Rename the content files to "*.mmark". See https://github.com/miekg/mmark

I am the maintainer of Hugo.

like image 171
bep Avatar answered Oct 09 '22 11:10

bep


I have a custom shortcode for rendering my static demo files as code via markdown, it's simple:

layouts/shortcodes/code.html

{{ $file := .Get "file" | readFile }}
{{ $lang := .Get "language" }}
{{ (print "```" $lang "\n" $file "\n```") | markdownify }}

content/post/some-post.md

 {{% code file="/static/some-script.js" language="js" %}}
like image 15
oodavid Avatar answered Oct 09 '22 11:10

oodavid