blob: d74f1dba5984bb9356fbf874937f0166d435cf97 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
# Terrassa - Hugo Theme
Terrassa is a simple, fast and responsive theme for Hugo with a strong focus on accessibility made from scratch.
## Theme features
- Coherent responsive design.
- Consistent design throughout the entire site.
- Classic navigation menu in large screen sizes.
- Hamburger navigation menu in small screen sizes.
- Great focus on accessibility.
- Customizable call to action on the home page.
- Contact form.
- Ready for blogging.
And much more.
## Installation
To install Terrassa run the followings command inside your Hugo site:
```bash
$ cd themes
$ git clone https://github.com/danielkvist/hugo-terrassa-theme.git terrassa
```
Or
```bash
$ cd themes
$ git submodule add https://github.com/danielkvist/hugo-terrassa-theme.git terrassa
```
> You can also download the last release [here](https://github.com/danielkvist/hugo-terrassa-theme/releases).
Back to your Hugo site directory open the *config.toml* file and add the following line:
```toml
theme = "terrassa"
```
And that's it.
## Archetypes
Terrassa includes three base archetypes:
* *default*: for content such as blogs posts.
* *section*: for the sections on your Home page.
* *page*: for pages like the About page.
So be careful. Creating a new site with Hugo also creates a default archetype that replaces the one provided by Terrassa.
### Home and Single pages
To create your home page run the following command inside your Hugo site:
```bash
$ hugo new _index.md -k page
```
Or to create another page:
```bash
$ hugo new example.md -k page
```
You'll get something like this:
```markdown
---
title: ""
description: ""
images: []
draft: true
menu: main
weight: 0
---
```
Some properties are used as follows:
* *title*: is the name that will be displayed in the menu. In the rest of the single pages the main title of the content.
* *description*: in the case of the home page the description is not shown. In the rest of the single pages it is shown as a subtitle.
* *images*: in the case of the home page the first image is used as the background image for the hero and to share on social networks (with [Twitter Cards](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards.html) and [Facebook Graph](https://developers.facebook.com/docs/graph-api/)). In every other page or post is used only for share on social networks.
* *weight*: sets the order of the items in the menu.
## Home page Sections
To create a new section in your Home page follow the next steps:
```bash
$ hugo new sections/example.md -k section
```
You'll come across something like this:
```markdown
---
title: "Example"
description: ""
draft: true
weight: 0
---
```
The *title* is used as the title of your new section and the content is the body. At this moment the *description* is not used for anything.
The *weight* defines the order in case of having more than one section.
### Blog or List pages
To create a Blog or a page with a similar structure follow these steps:
```bash
$ hugo new posts/_index.md -k page
```
> In this case it is only necessary to set, if wanted, the *title* and the *weight* in the *_index.md*.
To add a new posts run the following command:
```bash
$ hugo new posts/bad-example.md
```
Inside this file you'll find something like this:
```markdown
---
title: "Bad example"
description: ""
date: 2018-12-27T21:09:45+01:00
publishDate: 2018-12-27T21:09:45+01:00
author: "John Doe"
images: []
draft: true
tags: []
---
```
The *title* and *description* are used as the main title and subtitle respectively.
> You can find more information about each parameter in the [official documentation](https://gohugo.io/content-management/front-matter/).
Then, the corresponding section will show a list of cards with the *title*, the *date*, a *summary of the content* (truncated to 480 words) and a list of *tags* if any.
### Contact
For the contact page follow these instructions:
```bash
$ hugo new contact/_index.md -k page
```
The *title* and *description* will be used as the main title and subtitle respectively with a contact form. The rest of the options are defined in the [config.toml](https://github.com/danielkvist/hugo-terrassa-theme/blob/master/exampleSite/config.toml).
## Config
For the configuration check the [config.toml](https://github.com/danielkvist/hugo-terrassa-theme/blob/master/exampleSite/config.toml) of the *exampleSite* and the [official documentation](https://gohugo.io/getting-started/configuration/) to see all the options.
## Font Awesome
Terrassa uses the [Font Awesome](https://fontawesome.com/) icons through a CDN. Something that for the moment affects the performance.
|
