## Advanced, optional front-matter You already know how to *create posts and pages* and *what front-matter means*. But did you also know that front-matter is a **seriously powerful way to control contents and appearance** of each page? Meet the advanced, optional front-matter you can add to the top of each post or page. {% include media-image.html file="advanced-front-matter.jpg" title="Advanced front-matter" caption="This is the front-matter of the page you're currently viewing" %} Below you'll see a *detailed description of each of these options*, what they do and how you can use them in order to control many aspects of the page easily — I'll skip `layout`, `title` and `type` though. - **navigation:** Can be either `true` or `false` and controls wether the post or page appears in the navigation or not. This just works if `type` is either set to `post` or `page`. - **date:** It's a good practice to set the date within each file as well even though it's not required. The order of all posts and pages added to the navigation depends on their date too. - **excerpt:** A **quick summary** which shows up on top of each page as well as on the homepage listing. - **categories:** Add one or more `categories` for each page or post — they're part of the excerpt and influence the way Jekyll builds the sites hierarchy. - **gradient:** Specify a number between 1 and 5 to define the **color of the gradient** applied to the header of the post or page. - **image:** Add an image to the `images` folder and add its file name here so it shows up on top of the page. The **perfect size would be 1200 x 700px** but everything should work just fine considering that it will be scaled accordingly anyway. - **details:** Can be either `true` or `false` and specifies wether the header image selected for this page will show up in the homepage listing as well. - **author:** Feel free to add the name of the posts or pages author. - **bio:** A short description or bio can be appended too. The remaining front-matter should be self-explanatory in my opinion and you're able to *attach various social media profile links* to the authors profile. Please keep in mind though that **links usually include colons and these are reserved by YAML**. That said, make sure that you wrap links (and literally anything else which might include colons) into quotes so they don't break it.

Front-matter matters, literally

By now you should be already familiar with the concept of front-matter to control content and layout. Aside from basic options, there are a few more I'd like to introduce you to — even though they're just optional.

Published May 5, 2014 in guides
Scroll

Advanced, optional front-matter

You already know how to create posts and pages and what front-matter means. But did you also know that front-matter is a seriously powerful way to control contents and appearance of each page?

Meet the advanced, optional front-matter you can add to the top of each post or page.

Advanced front-matter

Advanced front-matter

This is the front-matter of the page you're currently viewing

Below you’ll see a detailed description of each of these options, what they do and how you can use them in order to control many aspects of the page easily — I’ll skip layout, title and type though.

  • navigation: Can be either true or false and controls wether the post or page appears in the navigation or not. This just works if type is either set to post or page.
  • date: It’s a good practice to set the date within each file as well even though it’s not required. The order of all posts and pages added to the navigation depends on their date too.
  • excerpt: A quick summary which shows up on top of each page as well as on the homepage listing.
  • categories: Add one or more categories for each page or post — they’re part of the excerpt and influence the way Jekyll builds the sites hierarchy.
  • gradient: Specify a number between 1 and 5 to define the color of the gradient applied to the header of the post or page.
  • image: Add an image to the images folder and add its file name here so it shows up on top of the page. The perfect size would be 1200 x 700px but everything should work just fine considering that it will be scaled accordingly anyway.
  • details: Can be either true or false and specifies wether the header image selected for this page will show up in the homepage listing as well.
  • author: Feel free to add the name of the posts or pages author.
  • bio: A short description or bio can be appended too.

The remaining front-matter should be self-explanatory in my opinion and you’re able to attach various social media profile links to the authors profile.

Please keep in mind though that links usually include colons and these are reserved by YAML. That said, make sure that you wrap links (and literally anything else which might include colons) into quotes so they don’t break it.

Now that you should be familiar with **YAML and basic front-matters**, it should be easy to adjust the sites global settings. In order to do so, please open up the `_config.yml` file in your favorite code or text editor. Similar to front-matter of posts and pages, the area between both triple-dashes includes various options to configure the site. {% include media-image.html file="config-example.jpg" title="Default Settings" caption="This is how the default config file looks like — not too complex though" %} Some of them, such as `title`, `name`, `description`, `url` or `copyright` should be self-explaining, so let's have a look at the others below. - **baseurl:** The `baseurl` can remain empty by default and is just required if you're going to **host your site in a subfolder** of your webspace such as `/blog` for example. In this case, you would have to add `/blog` as value of this option to make sure paths will be correct. - **paginate:** Defines the amount of posts displayed per page on the homepage. - **paginate_path:** This option defines the folder structure for paginated index pages. It's slightly more advanced and you can just **leave it as it is** — for more details, please feel free to have a look at [this page](http://jekyllrb.com/docs/pagination/) on the Jekyll website. - **twitter:** Please feel free to add your **Twitter username** without the *@* here or leave it empty. The username will be used for [Twitter Cards](https://dev.twitter.com/cards) supported by the theme. - **disqus:** Sign up for a free account on [Disqus](http://disqus.com) and **add your unique shortname** to this option in order to enable comments for each post. - **analytics:** Add your [Google Analytics](https://www.google.de/analytics/) **Tracking ID** here to enable statistics and tracking of each post and page.

Configuration

Wether you'd like to change the sites title, description and contact email address or just like to enable the comment system or Google Analytics — all of it can be done in one single place.

Published May 6, 2014 in guides