🏷 Page Features
Wowchemy empowers you create a wide variety of different content types. Content can include widget pages, blog posts, publications, online courses, podcasts, videos, Markdown slides, notebooks, documentation, projects, events/talks, and much more.
Table of Contents
You may also be interested to learn about the diverse range of page elements, such as image galleries, math, or diagrams, that can be added to any page.
Introduction
The following common metadata can be added to the front matter of most types of page in Wowchemy.
Core metadata:
- title: the title of your page
- summary: a one-sentence summary of the content on your page. The summary can be shown on the homepage and can also benefit your search engine ranking.
- date: the RFC 3339 date that the page was published. A future date will schedule the page to be published in the future. If you use the
hugo new ...
commands described on this page, the date will be filled automatically when you create a page. Also see lastmod and publishDate. - authors: display the authors of the page and link to their user profiles if they exist. To link to a user profile, create a user based on the admin template and reference their username (the name of a user in your
authors
folder) in theauthors
field, e.g.authors: ["admin"]
. - tags: tagging your content helps users to discover similar content on your site. Tags can improve search relevancy and are displayed after the page content and also in the Tag Cloud widget. E.g.
tags: ["Electronics", "Diodes"]
.
Popular metadata:
- subtitle: an optional subtitle that will be displayed under the title
- featured: by setting
featured: true
, a page can be displayed in the Featured widget. This is useful for sticky, announcement blog posts or selected publications etc. - categories: categorizing your content helps users to discover similar content on your site. Categories can improve search relevancy and display at the top of a page alongside a page’s metadata. E.g.
categories: ["Art"]
. - lastmod: the RFC 3339 date that the page was last modified.
- By default, there’s no need to specify
lastmod
as the page modification date is automatically updated from Git according to theHUGO_ENABLEGITINFO
option innetlify.toml
(or the equivalentenableGitInfo
option inconfig.yaml
) - To hide the automatic last modified date, change
HUGO_ENABLEGITINFO
to"false"
innetlify.toml
- By default, there’s no need to specify
- publishDate: the RFC 3339 date that the page was published. You only need to specify this option if you wish to set date in the future but publish the page now, as is the case for publishing a journal article that is to appear in a journal etc.
- draft: by setting
draft: true
, only you will see your page when you preview your site locally on your computer - private: hide page in search results
A complete list of standard options can be found on the corresponding Hugo docs page.
Featured image
To display a featured image in content pages, simply drag an image named featured.*
(e.g. featured.jpg
) into your page’s folder.
NAME.md
to NAME/index.md
, creating the folder NAME
. There is a tool to help automate this process. Page bundles require Academic v3+ and Hugo v0.50+.Want to caption the image or set a focal point to influence how the image is cropped? The parameters below can be added to the bottom of your page front matter to customize the appearance of the image. The caption supports Markdown and can be used to write an image caption or credit. The focal point ensures that automatic resizes of the image keep the subject in view.
# Featured image
# To use, place an image named `featured.jpg/png` in your page's folder.
# Placement options: 1 = Full column width, 2 = Out-set, 3 = Screen-width
# Focal point options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
# Set `preview_only` to `true` to just use the image for thumbnails.
image:
placement: 1
caption: "Photo by [Geo](https://github.com/gcushen/)"
focal_point: "Center"
preview_only: false
alt_text: An optional description of the image for screen readers.
Page resources (attachments and links)
Buttons can be generated in the page header to link to associated resources.
The example below shows how to create a Twitter link for a project and how to create a link to a post that was originally published on Medium:
links:
- icon_pack: fab
icon: twitter
name: Follow
url: 'https://twitter.com/Twitter'
- icon_pack: fab
icon: medium
name: Originally published on Medium
url: 'https://medium.com'
The only required option is url
, giving you the option to show a text button, an icon button, or a combination of both. Learn more about icons.
links
was known as url_custom
.To generate a PDF button, add a PDF file with the same name as your page’s own folder to your page’s folder and a PDF link will be automatically generated. For example, if your page is located at publication/photons/index.md
, place a PDF at publication/photons/photons.pdf
. This can be useful for talks and publications.
There are also several special built-in buttons that can be setup using url_...
options in the front matter of some content types.
Page features
The following parameters can be added to the front matter of a page (such as a blog post) to control its features:
reading_time: false # Show estimated reading time?
share: false # Show social sharing links?
profile: false # Show author profile?
commentable: false # Allow visitors to comment? Supported by the Page, Post, and Docs content types.
editable: true # Allow visitors to edit the page? Supported by the Page, Post, and Docs content types.
LaTeX math
To enable LaTeX math rendering for a page, you should include math: true
in the page’s front matter, as demonstrated in the included example site. Otherwise, to enable math on the homepage or for all pages, you must globally set math = true
in config/_default/params.yaml
. See the math guide for further details.
Code highlighting
To disable source code highlighting for all pages, set highlight = false
in config/_default/params.yaml
. You can then enable source code highlighting only on pages that need it by setting highlight: true
in that page’s front matter. See the code highlighting guide for further details.
Header image
To display a full width header image, the header parameters below can be inserted towards the end of a page’s front matter. It is assumed that the image is located in your assets/media/
media library, so the full path in the example below will be assets/media/header.png
. The caption
parameter supports Markdown and can be used to write an image caption or credit. This option can be particularly useful for adding to an archive page’s _index.md
(e.g. to display at YOUR_URL/post/
for the blog post archive).
header:
image: "header.png"
caption: "Image credit: [**Geo**](https://github.com/gcushen/)"
Removing content
To remove content permanently, simply delete the relevant page file/folder within your content/
folder.
To temporarily unpublish content, set draft: true
at the top of a page’s front matter.
Private pages
Want to try to share a page with only a few specific people?
Add the following to the page front matter before publishing it, to prevent it appearing in any page collections:
_build:
render: always
list: never
Password protect pages
By nature, static pages are viewable by anyone who visits their URLs.
Some content delivery networks, such as Netlify, offer a service allowing you to restrict access.