Figuring out the goal

So these past couple of days I have been thinking what to add to my website, and how to pimp it up. One thing my opponent has on his website (free promo np np), is a quote page, so naturally, that was my next task.

Layout

One of the main attributes of a page is its layout, most of the pages in hugo can be put into either list or single category. However quotes section in my mind would be a mix of both- it is a single page, however it contains a list of quotes (which aren’t single pages as opposed to the posts section). Layouts in hugo are usually brought with a theme, however you can easily override all of the theme elements including layouts, partials, css etc.
Quick read specifically for paperMod users. To create a new layout I simply added an html layout file called “quotes” (quotes in quotes pun intended), and wrote some html/go code in it, mostly copied and pasted from the other layout files. This is a really well written guide to better understand sections and layouts. Another ok guide for basic understanding of layouts and lastly I encourage using the documentation of hugo regarding how to build layouts using templating.

Archetypes

A fancy word for .md templates in this case. Simple explanation: hugo new folder_in_content\file.md, this snippet creates a file.md file into some folder in content by using a md template file in your archetype folder which probably looks something like this:

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

If you were to delete the date: {{ .Date }} part of the file and run the command hugo new folder_in_content\file2.md it would generate another page but it would not contain the date. Now on how to create more templates read here. Lastly I would like to touch upon how it chooses which archetype to use: Let’s say you run the command hugo new quotes/very-funny-quote.md

Template selection

It will create a very-funny-quote.md file in the /content/quotes dir by using the first archetype it finds out of these:

  1. archetypes/quotes.md
  2. archetypes/default.md
  3. themes/some-theme/archetypes/quotes.md
  4. themes/some-theme/archetypes/default.md

To clarify it first looks for a .md file named the same as the content dir name you are trying to create a post in (from your personal archetype directory), then it looks for the default .md file (from your personal archetype directory) and lastly it does the same searching sequence but through your themes archetype directory.

Re-read this small guide here for better understanding.

CSS editing

Now that you have the layout of the new page (probably not its hard) and have created your custom, brand new .md template it is time to do some styling to your section. Hugo asks you to keep your css files in the assets directory, or it just takes them from the themes/assets directory, so in order to change some css details or add new ones you have to create an overwritting or simply new css file in your assets directory, now this depends on the theme your using but for paperMod users follow this link to find out how to add custom css. You may also find some error fixes or useful informartion in this forum discussion.

CSS variables

Also random fact of information, CSS has variables, so if you find some css code in your theme like color: var(–some-cool-name), it is simply using a –some-cool-name variable which is defined in some cool-variables.css file.

Definetly not important

If you were to try and change <hr> tags colors, you have to change it with border-color attrbute and not the color attribute. No post traumatic emotions here, simply giving out a random tip of information