Skip to content

Commit

Permalink
updated docs on the examplesite homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
ololiuhqui committed Aug 27, 2024
1 parent b84d9a9 commit 7299d59
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 41 deletions.
56 changes: 36 additions & 20 deletions config/_default/languages/.en.toml
Original file line number Diff line number Diff line change
Expand Up @@ -36,43 +36,59 @@ Look at what this theme is capable to do on the features page, and see a beautif
[params.homepage.description]
enabled = true
secondTitle = "How to use this theme"
paragraph = """#### Install 📥
- Install hugo extended, follow [the official installation guide](https://gohugo.io/installation/).
paragraph = """#### Quick start: how to install 📥
- Create a new site: `hugo new site <sitename>`
1. Install hugo extended, follow [the official installation guide](https://gohugo.io/installation/). For using this theme you **DO NOT NEED** to execute `hugo new site`, as you will be cloning an example site in step 2.
- Clone the theme repo as a submodule into your new site:`git init && git submodule add --depth=1 https://github.com/ololiuhqui/magnolia-free-hugo-theme themes/Magnolia`
2. Clone the exampleSite and the theme from the repo:`git init && git clone -b exampleSite --recurse-submodules https://github.com/ololiuhqui/magnolia-free-hugo-theme *YourSiteName*` (change *YourSiteName* in the command with the name you wanna give to your site).
- Copy the content from "examplesite" to your site, from the root of your new website folder: `cp -rv themes/Magnolia/exampleSite/* ./`
3. Delete your default `config.toml` from the root folder of your site; the new configurations will be found in `config/_default`. The main configuration file is `config/_default/config.toml`, but most variables are overwritten or defined by the individual language configuration files (eg. `config/_default/languages/.en.toml`)
- Delete your default `config.toml` from the root folder of your site; the new configurations will be found in `config/_default`. The main configuration file is `config/_default/config.toml`, but most variables are overwritten or defined by the individual language configuration files (eg. `config/_default/languages/.en.toml`).
4. Move to your site directory and see the website preview with `hugo serve -D`
- See the website preview with `hugo serve -D`
#### How to update ♻
- From the root directory of your website run: `git submodule update --remote --merge`.
#### How to customize 🎨
#### Customize 🎨
- Use your preferred color palette by modifying the Bootstrap variables in `assets/scss/custom-variables.scss`.
- Change the config files adding your own elements to the pages. You can change the page names there as well.
- Change the config files in `/config/_default` and `/config/_default/languages` adding your own elements to the pages. You can change the page names there as well.
- Change the pages names, slugs and metadescriptions in `content/<language>/<page>.html`. The `_index.html` in the root of every content language folder is the homepage, refer to [Content organization](https://gohugo.io/content-management/organization/).
- Change the pages names, slugs and metadescriptions in `content/*language*/*page*.html`. The `_index.html` in the root of every content language folder is the homepage, refer to [Content organization | Hugo](https://gohugo.io/content-management/organization/).
- Change the images of the website from the `static` or `content` folders (some pages use [Page bundles](https://gohugo.io/content-management/page-bundles/)), please notice that the name of the images should be the same of the ones currently present in the exampleSite
- Change the images of the website from the `static` or `content` folders (some pages use [Page bundles](https://gohugo.io/content-management/page-bundles/)), please notice that the name and the format of the images should be the same of the ones currently present in the exampleSite (that you cloned in step 2 of "how to install" guide).
#### Add new languages 🚩
- Head to `config/_default/languages`.
- Duplicate one of the language files, change the language tag, name of the file (en, it, fr etc): this should be compliant with [RFC 5646](https://gohugo.io/content-management/multilingual/). Use the [RFC 5646 Language Tags List](https://gist.github.com/msikma/8912e62ed866778ff8cd) for a quicker setup.
- Translate the variables values inside the `.toml` file accordingly to the language.
- In the `/content` directory, duplicate one of the language folders and change the name accordingly to your new language as in step 2.
- For each of the `.html` file in `/content`, you can change `title` and `slug` freely. `translationKey` should remain untouched.
- I strongly suggest you to update the SEO in the frontmatter as well in your new language.
1. Head to `config/_default/languages`.
2. Duplicate one of the language files, change the language tag, name of the file (en, it, fr etc): this should be compliant with [RFC 5646](https://gohugo.io/content-management/multilingual/). Use the [RFC 5646 Language Tags List](https://gist.github.com/msikma/8912e62ed866778ff8cd) for a quicker setup.
3. Translate the variables values inside the `.toml` file accordingly to the language.
4. In the `/content` directory, duplicate one of the language folders and change the name accordingly to your new language as in step 2.
5. For each of the `.html` file in `/content`, you can change `title` and `slug` freely. `translationKey` should remain untouched.
#### Custom 404 page
6. I strongly suggest you to update the SEO in the frontmatter as well in your new language.
#### Custom 404 page ❓
To add the custom 404 page and make it work on github pages or other hostings, you will have to add it manually when building the site executing `hugo`. This is because github pages looks for a 404 template in the root directory of the project, you can therefore only have one single 404 page for all the languages. To create a symlink to the english 404 version, which will then be used as default 404 once hosting, after running `hugo` run `ln -s public/en/404/index.html public/404.html`.
**Please refer to [themepage]()/[github](https://github.com/ololiuhqui/magnolia-free-hugo-theme) for more details #TODO.**
"""
#### Remunerate my time and energy 💫
![Liberapay receiving](https://img.shields.io/liberapay/receives/ololiuhqui)
![GitHub Sponsors](https://img.shields.io/github/sponsors/ololiuhqui)
Designing this theme and making it available for you took a lot of time and effort.
The MIT license means that you are completely free to do whatevere you want with this theme, even [make money from it!](https://opensource.org/license/MIT)
If you wish you can support me in several ways, [see them on Github](https://github.com/ololiuhqui/magnolia-free-hugo-theme?tab=readme-ov-file#remunerate-my-time-and-energy-)
"""
paragraph2= "" #You can use markdown to define your first paragraph look, but in case this isn't enough, here there's a secoind paragraph


Expand Down
58 changes: 37 additions & 21 deletions config/_default/languages/.it.toml
Original file line number Diff line number Diff line change
Expand Up @@ -36,42 +36,58 @@ Guardate cosa è in grado di fare questo tema nella pagina delle caratteristiche
[params.homepage.description]
enabled = true
secondTitle = "Come usare questo tema"
paragraph = """ #### Installare 📥
- Installare hugo extended, seguendo [la guida ufficiale all'installazione](https://gohugo.io/installation/).
paragraph = """ #### Avvio rapido: come si installa 📥
- Creare un nuovo sito: `hugo new site <nome sito>`.
1. Installate hugo extended, seguendo [la guida ufficiale all'installazione](https://gohugo.io/installation/). Per l'utilizzo di questo tema non è necessario eseguire `hugo new site`, in quanto si clonerà un sito di esempio nel passaggio 2.
- Clonare il repo del tema come sottomodulo nel nuovo sito:`git init && git submodule add --depth=1 https://github.com/ololiuhqui/magnolia-free-hugo-theme themes/Magnolia`
2. Clonate il sito di esempio e il tema dal repo: `git init && git clone -b exampleSite --recurse-submodules https://github.com/ololiuhqui/magnolia-free-hugo-theme *YourSiteName*` (cambiate *YourSiteName* nel comando con il nome che volete dare al vostro sito).
- Copiare il contenuto di "exampleSite" nel proprio sito, dalla cartella principale del nuovo sito: `cp -rv themes/Magnolia/exampleSite/* ./`
3. Cancellare il file `config.toml` predefinito dalla cartella principale del sito; le nuove configurazioni si troveranno in `config/_default`. Il file di configurazione principale è `config/_default/config.toml`, ma la maggior parte delle variabili sono sovrascritte o definite dai file di configurazione delle singole lingue (per esempio, `config/_default/languages/.en.toml`).
- Elimina il tuo `config.toml` di default dalla cartella root del tuo sito, le nuove configurazioni si troveranno in `config/_default`. Il file di configurazione principale è `config/_default/config.toml`, ma alcune variabili vengono definite o sovrascritte dai file di configurazioni delle singole lingue (es. `config/_default/languages/.en.toml`).
4. Spostarsi nella directory del sito e vedere l'anteprima del sito con `hugo serve -D`.
- Vedere l'anteprima del sito con `hugo serve -D`.
#### Come aggiornare ♻
#### Personalizzare 🎨
- Utilizza i tuoi colori preferiti modificando le variabili di Bootstrap in `assets/scss/custom-variables.scss`.
- Dalla directory principale del vostro sito web eseguite: `git submodule update --remote --merge`.
- Modifica i file di configurazione aggiungendo i tuoi elementi alle pagine. È possibile modificare anche i nomi delle pagine del menù.
#### Come personalizzare 🎨
- Modifica i nomi, gli slug e le metadescrizioni delle pagine in `content/<language>/<page>.html`. Il file `_index.html` nella radice di ogni cartella della lingua dei contenuti è la homepage, fare riferimento a [Organizzazione dei contenuti] (https://gohugo.io/content-management/organization/).
- Utilizzare la tavolozza di colori preferita modificando le variabili di Bootstrap in `assets/scss/custom-variables.scss`.
- Cambia le immagini del sito web dalle cartelle `static` o `content` (alcune pagine (come la homepage e "office") usano [Page bundles](https://gohugo.io/content-management/page-bundles/)), si noti che il nome ed il formato (.webp) delle immagini deve essere lo stesso di quelle attualmente presenti nel sito di esempio.
- Modificare i file di configurazione in `/config/_default` e `/config/_default/languages` aggiungendo i propri elementi alle pagine. È possibile cambiare anche i nomi delle pagine.
- Modificare i nomi delle pagine, gli slug e le metadescrizioni in `content/*language*/*page*.html`. Il file `_index.html` nella radice di ogni cartella della lingua dei contenuti è la homepage, si veda [Organizzazione dei contenuti | Hugo](https://gohugo.io/content-management/organization/).
- Cambiare le immagini del sito web dalle cartelle `static` o `content` (alcune pagine usano [Page bundles](https://gohugo.io/content-management/page-bundles/)); si noti che il nome e il formato delle immagini devono essere gli stessi di quelli attualmente presenti nel sito di esempio (che è stato clonato nel passo 2 della guida "come installare").
#### Aggiungere nuove lingue 🚩
- Andare a `config/_default/languages`.
- Duplicare uno dei file di lingua, cambiare il tag della lingua e il nome del file (en, it, fr ecc.): questo dovrebbe essere conforme a [RFC 5646](https://gohugo.io/content-management/multilingual/). Utilizzare [RFC 5646 Language Tags List](https://gist.github.com/msikma/8912e62ed866778ff8cd) per una configurazione dei nomi dei file più rapida.
- Tradurre i valori delle variabili all'interno del file `.toml` in base alla lingua.
- Nella cartella `/content`, duplicare una delle cartelle delle lingue e cambiarne il nome in base alla nuova lingua, il nome deve essere conforme come al punto 2.
- Per ogni file `.html` in `/content`, è possibile modificare liberamente `title` (titolo della pagina) e `slug` (come apparirà il link della pagina). La `translationKey` deve rimanere intatta.
- Suggerisco vivamente di aggiornare anche il SEO nel frontmatter delle pagine in `/content` nella nuova lingua, in modo tale da avere dei metadata tradotti.
1. Andare a `config/_default/languages`.
2. Duplicare uno dei file di lingua, cambiare il tag della lingua e il nome del file (en, it, fr ecc.): questo dovrebbe essere conforme a [RFC 5646](https://gohugo.io/content-management/multilingual/). Per una configurazione più rapida, utilizzare [RFC 5646 Language Tags List](https://gist.github.com/msikma/8912e62ed866778ff8cd).
3. Tradurre i valori delle variabili all'interno del file `.toml` in base alla lingua.
4. Nella cartella `/content`, duplicare una delle cartelle delle lingue e modificarne il nome in base alla nuova lingua, come indicato al punto 2.
5. Per ogni file `.html` in `/content`, è possibile modificare liberamente `title` e `slug`. La `translationKey` deve rimanere intatta.
6. Si consiglia vivamente di aggiornare anche il SEO nel frontmatter nella nuova lingua.
#### Pagina 404 personalizzata ❓
Per aggiungere la pagina 404 personalizzata e farla funzionare su pagine github o altri host, dovrete aggiungerla manualmente durante la costruzione del sito eseguendo `hugo`. Questo perché github pages cerca un modello 404 nella cartella principale del progetto, quindi è possibile avere una sola pagina 404 per tutte le lingue. Per creare un link simbolico alla versione 404 inglese, che sarà poi usata come 404 predefinita una volta ospitata, dopo aver eseguito `hugo` eseguire `ln -s public/en/404/index.html public/404.html`.
#### Remunera il mio tempo e le mie energie 💫
![Ricezione Liberapay](https://img.shields.io/liberapay/receives/ololiuhqui)
![Sponsor GitHub](https://img.shields.io/github/sponsors/ololiuhqui)
#### Pagina 404 personalizzata
Progettare questo tema e renderlo disponibile per voi ha richiesto molto tempo e impegno.
Per aggiungere la pagina 404 personalizzata e farla funzionare su github pages, è necessario aggiungere manualmente il file nel root della cartella `/public` durante la costruzione del sito dopo aver eseguito `hugo`. Questo perché github pages cerca un modello 404 nella cartella principale del progetto, quindi è possibile avere una sola pagina 404 per tutte le lingue. Per creare un link simbolico alla versione 404 inglese, che sarà poi usata come 404 predefinita una volta che il sito sarà in hosting, dopo aver eseguito `hugo` eseguire `ln -s public/en/404/index.html public/404.html`.
La licenza MIT significa che siete completamente liberi di fare tutto ciò che volete con questo tema, anche [guadagnarci sopra!](https://opensource.org/license/MIT)
**Fare riferimento a [themepage]()/[github](https://github.com/ololiuhqui/magnolia-free-hugo-theme) per maggiori dettagli. #TODO.**
Se lo desiderate, potete sostenermi in diversi modi, [vedeteli su Github](https://github.com/ololiuhqui/magnolia-free-hugo-theme?tab=readme-ov-file#remunerate-my-time-and-energy-)
"""
paragraph2= "" #You can use markdown to define your first paragraph look, but in case this isn't enough, here there's a secoind paragraph

Expand Down

0 comments on commit 7299d59

Please sign in to comment.