hugo-theme-relearn/exampleSite/content/basics/configuration.md

date	title	weight
2016-04-09T16:50:16+02:00	Configuration	20

Site configuration

On top of Hugo global configuration, Hugo-theme-learn lets you define the following parameters :

[params]
  # Prefix URL to edit current page. Useful to give opportunity to people to create merge request for your doc.
  # See the config.toml file from this documentation site to have an example.
  editURL = ""
  # Author of the site, will be used in meta information
  author = ""
  # Description of the site, will be used in meta information
  description = ""
  # Shows a checkmark for visited pages on the menu. Default to false
  showVisitedLinks = false
  # Automatically generates prev and next arrows
  autoNav = false
  # Activate search. Don't forget to generate the JSON index file (go check get started page)
  search = false

{{% notice tip %}} Assets are based on the baseurl of the site. So, don't forget to configure yours in the config.toml file. Absolutely needed for Github pages like http://userid.github.io/project. {{% /notice %}}

Style customization

Hugo-theme-learn has been built to be as configurable as possible by defining multiple partials

In themes/hugo-theme-learn/layouts/partials/, you will find all the partials defined for this theme. If you need to overwrite something, don't change the code directly. Instead follow this page. You'd create a new partial in the layouts/partials folder of your local project. This partial will have the priority.

This theme defines the following partials :

• header: the header of the content page (contains the breadcrumbs)
• style: CSS imports, in case you want to override the style
• footer: the footer of the content page (contains the arrows)
• script: Javacript includes, in case you want to add Javascript on top of provided ones
• favicon: the favicon
• logo: the logo, on top left hand corner.
• meta: HTML meta tags, if you want to change default behavior
• toc: table of contents

Change the logo

Create a new file in layouts/partials/ named logo.html. Then write any HTML you want. You could use an img HTML tag and reference an image created under the static folder, or you could paste a SVG definition !

{{% notice note %}} The size of the logo will adapt automatically {{% /notice %}}

Change the favicon

If your favicon is a png, just drop off your image in your local static/images/ folder and names it favicon.png

If you need to change this default behavior, create a new file in layouts/partials/ named favicon.html. Then write something like this:

<link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon" />

Change default colors

To change default colors, you will have to add a new css file. In order to do that :

1. Create a css file in your local static/css/ folder
2. Create a partial HTML in your local layouts/partials/ named style.html and add the following line

<link href="/css/yourfile.css" rel="stylesheet">

Then, create CSS in the new file, overwriting default behavior. Don't panic, we give you, just below, colors that are commonly changed.

/* background behind the logo*/
#header {
    background: <color>;
    border-color: <color>;
}

/* Background color of the menu */
#sidebar {
  background-color: <color>;
}

/* Background color of the menu, when clicked */
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
  background-color: <color>;
}

/* Color of all links, including arrows to get to previous and next pages */
a {
    color: <color>;
}
a:hover {
   color: <color>;
}