Front Matter Guide

Front Matter Guide Front Matter Guide

|

Table of Contents

General Front Matters for A Post

A Jekyll post should contain the front matters as the following example:

---
layout: post
permalink: /blog/my-first-post/
slug: index.html
title: My first blog post
date: 2020-01-31 07:30 +0000
last_modified_at: 2024-01-16 12:01 +0800
category: [category1, category2]
tags: [tag1, tag2, tag3]
excerpt: This is the first blog post for my Jekyll site.
---
Attribute Description
layout The Jekyll layout file to use.
Options: page, post, archive, category-list and tag-list.
Note: page-right-sidebar and post-left-sidebar are deprecated.
title The title of the page or post.
date The date here overrides the date from the name of the post file.
Note: A date is specified in the format YYYY-MM-DD HH:MM:SS +/-TTTT; hours, minutes, seconds, and timezone offset are optional.
last_modified_at (Optional) The date when the post was the last modified.
Note: A date is specified in the format YYYY-MM-DD HH:MM:SS +/-TTTT; hours, minutes, seconds, and timezone offset are optional.
permalink (Optional) The custom URL for the page or post, if you need your processed blog post URLs to be something other than the site-wide style. Default: /year/month/day/title.html.
slug (Optional) The custom name for the page or post file, if you need your processed blog post file names to be something other than the original name. Default: The original file name.
Note: If the permalink option is set to a string that ends with /, you need to set the slug option to " " or index.html to avoid generating an invalid URL for the site preview feature of Front Matter CMS.
category (Optional) One or multiple categories that the post belongs to.
tags (Optional) One or multiple tags that the post associates with.
excerpt (Optional) The short text to show on the card of the list/grid of posts, and use as the meta description of the page or post.

💡 See: Front Matter | Jekyllrb

You can assign an image (with 730×431 pixels in size) as the featured image of a post in the front matter like this:

image:
  path: /assets/images/picture.png
Property Description
path (Required) Absolute or relative path of a JPG, PNG, or SVG file.
hide (Optional) Set to true to not embed the image on the page.
class (Optional) Additional class names for the <amp-img> component, e.g. shadow-none to remove the box shallow.
width (Optional) Specify the image width (in px). Default: 730 (px).
height (Optional) Specify the image height (in px). Default: 411 (px).
fit (Optional) The horizontal alignment of the thumbnail in cards and post grid. Options: left / right.

Note: The front matter image also inherits the properties from Jekyll Feed and Jekyll SEO Tag.

Hide Featured Image on A Post

If you do not want to render the featured image on a post, append a hide option to the image variable, e.g.:

image:
   path: /assets/images/cover-image.png
   hide: true

If you want to remove the shadow of the featured image on a post, append the following class to the image variable, e.g.

image:
   path: /assets/images/cover-image.png
   class: shadow-none

If the image is not at 16:9 aspect ratio, you need to define its width and height under the image variable, e.g.:

image:
   path: /assets/images/cover-image.png
   width: 640
   height: 480

Show Thumbnail Image in Sidebar Widgets

  1. Make a copy of each featured image file in the same folder.
  2. Rename the copies to have a filename like <filename>.thumb.<ext>, e.g. cover-image.thumb.png.
  3. Rescale it to a height of 150px.

By default, the thumbnail of featured images is cropped at the center inside the cards of the list/grid of Featured Posts. A new variable for the thumbnail positioning was added to the theme on 2020-10-07. You can now change the image position to the left or right by appending a fit option to the image variable, e.g.:

image:
   path: /assets/images/cover-image.png
   fit: left

You can pin a post to the list/grid of Featured Posts in the theme by the following front matter:

featured: true

Add Custom CSS to HTML <head> Section

In the front matter, you can add your custom CSS styles to the end of the <style amp-custom> tag inside the HTML header.

css:
  badge: true  # include Bootstrap 4 Badges styles
  syntax: true # include CSS styles for syntax highlighter
  custom: >-
    # Write custom CSS to here

For example, you can format the table elements with a zebra-striped design by the following:

css:
  custom: >-
    table { font-size: .95rem; margin-bottom: 1.5rem; }
    tr:nth-child(odd) { backgroud-color: #e3edf3; }
    th, td { padding: .5em; }

💡 Learn more:

amp:
  iframe: true   # layout level
  script: true   # layout level
  gist: true     # page level
  youtube: true  # page level

💡 Related: How to include YouTube Video and Playlist embeds

Add Custom Codes to HTML <head> Section

In the front matter, you can add your codes to the HTML header using the variable custom_header.

custom_head: >-
  # Custom meta tags and AMP script components in page level

For example, you can specify additional meta tags and AMP components as the followings:

custom_head: >-
  <!-- Instructs web crawlers to not index the page and to not crawl any of the links on the page -->
  <meta name="robots" content="noindex, nofollow">

  <!-- Includes the AMP JS library for <amp-accordion> component -->
  <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

  <!-- Includes the AMP JS library for <amp-audio> component -->
  <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

💡 Learn more: Robots meta tag, data-nosnippet, and X-Robots-Tag specifications

Override Default Sidebar Setting v2.0

Options: left, right, and none

For example, you can set a left sidebar on a post by the following:

sidebar: left

Options for Resources Widget

Display GitHub Metadata for Project Repo

When you use this theme for the website of a Github project repository, it is available to show buttons that link to the repository and a release file in the sidebar.

Follow our Config Guide to set up your _config.yml file.

If a release exists in the repository, an additional button that links to the webpage of the latest release will be shown in the widget.

Note: Authentication is required to get your repository data to show the release button. Please follow the docs of jekyll /github-metadata to set up your personal access token.

v1.2 (Deprecated)

Add the following front matter to every page that you want to show the Resources Widget.

download: true

You can replace the second button and point it to a downloadable file by configuring it like this:

download:
  url: //.../filename.zip
v2.0

You can globally configure the widget by using the attribute resources_widget in the _config.yml file. It is not necessary to add download: true to the front matter of individual pages for enabling the widget.

Any file download buttons will display separately, and the button that links to the webpage of the latest release will no longer be overridden.

Display Download Buttons

v1.2 (Deprecated)

A Download button shows on a page when you declare the URL of a download file in the front matter like this:

download:
  url: //.../filename.zip

This button will substitute the button for linking to the latest release if GitHub metadata is also presented in the widget.

v2.0

The new version has been redesigned to support creating a list of buttons for multiple files on-page. You need to itemize the name and url of each file in the front matter, for example:

download:
  files:
    - url: ../training-01/labsheet.pdf
      name: Lab Sheet
    - url: ../training-01/lab-files.zip
      name: Lab Files

On-Page SEO

Attribute Description
canonical_url (Optional) The custom Canonical URL for the page or post.
author (Optional) The lookup key for author information to be propagated to JSON-LD structured data. See Jekyll SEO Tag.
description (Optional) A brief summary of a web page to be shown in search engine results.
Note: This will takes priority over existing front matter attribute excerpt.
locale (Optional) The custom locale to override the site-level locale information for the page or post.
image (Optional) Note: This is inherited by the attribute for setting the featured image for the page or post.

💡 Learn more from the basic usage and advanced usage in the Jekyll SEO Tag documentation.

Set URL Redirects

Attribute Description
redirect_from (Optional) One or multiple relative URLs that will redirect to the page or post, e.g. /post/2019/10/31/index.html
redirect_to (Optional) The destination URL of the redirection, e.g. http://www.github.com

💡 Learn more about the usage from the Jekyll Redirect From documentation.

Exclude from Sitemap

If you would like to exclude specific pages/posts from the sitemap set the sitemap flag to false in the front matter for the page or post.

  sitemap: false

💡 Learn more from the Jekyll Sitemap Generator Plugin documentation.

See Also 📚

« Responsive Web Design
Post-Processing »
Loading Disqus Comments...
Please enable JavaScript to view the comments powered by Disqus.

Sidebar

Featured Posts

Using Front Matter CMS

Google Analytics 4 for AMP Features

Config Guide

Post-Processing

Front Matter Guide

Responsive Web Design

Recent Posts

Using Front Matter CMS

Using AMP YouTube Components

Google Analytics 4 for AMP Features

Footer Configuration

Useful Links

Ads

Loading ...
No ad for you