mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 15:57:57 +00:00
105 lines
3.7 KiB
Markdown
105 lines
3.7 KiB
Markdown
---
|
|
date: 2016-04-09T16:50:16+02:00
|
|
title: Configuration
|
|
weight: 20
|
|
---
|
|
|
|
## Site configuration
|
|
|
|
On top of [Hugo global configuration](https://gohugo.io/overview/configuration/), **Hugo-theme-learn** lets you define the following parameters :
|
|
|
|
```toml
|
|
[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](https://gohugo.io/templates/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](https://gohugo.io/themes/customizing/). 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:
|
|
|
|
```html
|
|
<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
|
|
|
|
```html
|
|
<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.
|
|
|
|
```css
|
|
/* 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>;
|
|
}
|
|
```
|