Multilanguage support with example included and language selector in … #127

fmaida · 2023-09-24T14:58:04Z

Is this PR adding a new feature?

This PR implements multi language support to the theme.

At the moment only English and Italian are supported, but if you want to add new languages simply copy i18n/en-gb.yaml, and save it with the language code of the new language you want to add (for example: "fr" or "fr-fr" for French).

Then, in the config.toml or in the hugo.toml toml file in the root folder, copy and paste the entire Languages.en node and change every recurrence of "language.en" with Language.<your_language_code>. For example, to add a French translation, change it to Language.fr or Language.fr-fr.

Finally, in the content folder, create a new sub-folder with the same name of your language code (it's not mandatory, but IMHO it's makes your life easier to remember what each folder contains). So, for example if you're adding French to your website, create a folder named fr or fr-fr.

For example, this is taken out straight from the example config.toml file inside exampleSite folder:

[Languages.it]
  languageName = "Italian"
  languageCode = "it"
  contentDir = "content/it"
  weight = 2
  [Languages.it.menu]
  [[Languages.it.menu.main]]
    # The page reference (pageRef) is useful for menu highlighting
    # When pageRef is set, setting `url` is optional; it will be used as a fallback if the page is not found.
    pageRef="/"
    name = 'Inizio'
    url = '/'
    weight = 10
  [[Languages.it.menu.main]]
    pageRef="articoli"
    name = 'Articoli'
    url = '/articoli/'
    weight = 20
  [[Languages.it.menu.main]]
    pageRef="about"
    name = 'Chi Sono'
    url = '/about/'
    weight = 30

[Languages.it.params]
  sitename = "Awesome hugo blog"
  defaultColor = "dark" # set color mode: dark, light, auto
  # Setting it to 'auto' applies the color scheme based on the visitor's device color preference.If you don't specify anything, ignore this parameter, or leave it blank,
  # the default value is set to 'auto'.
  # You can take a look at layouts/index.html for more information.
  description = "Un tema Hugo veloce e minimalista con supporto per la modalità chiara e scura, per la gestione di un sito o di un blog personale"
  mainSections = ['articoli']
  toc = true # set to false to disable table of contents 'globally'
  goToTop = true # set to false to disable 'go to top' button
  additionalScripts = ['js/custom.js', 'js/custom-2.js']
  # Will try to load 'assets/js/custom.js' and 'assets/js/custom-2.js'.
  # Your custom scripts will be concatinated to one file `custom.js`.
  # When building for production it will be minified.
  # The file `custom.js` is loaded on each page (before body tag ends).
  dateFormat = "2 January 2006" # default date format used on various pages
  # See https://gohugo.io/functions/format/#hugo-date-and-time-templating-reference for available date formats.
  rssFeedDescription = "summary" # available options: 1) summary 2) full
  # summary - includes a short summary of the blog post in the RSS feed. Generated using Hugo .Summary .
  # full - includes full blog post in the RSS feed. Generated using Hugo .Content .
  # By default (or if nothing is specified), summary is used.

[Languages.it.params.author]
  avatar = "avatar.jpg" # put the file in assets folder; also ensure that image has same height and width
  # Note: image is not rendered if the resource(avatar image) is not found. No error is displayed.
  intro = "Awesome hugo blog"
  name = "Sidharth R"
  description = "Un tema Hugo veloce e minimalista con supporto per la modalità chiara e scura, per la gestione di un sito o di un blog personale."

# Allow to override webmanifest options
[Languages.it.params.webmanifest]
  name = "sitename" # will use "params.sitename" or "title" by default
  short_name = "sitename" # same as name
  start_url = "/" # will use homepage url by default
  theme_color = "#434648" # default is "#434648" (base color of text). Also will override html `<meta name="theme-color" />`
  background_color = "#fff" # by default depend on "params.defaultColor" for "light" or "auto" will be set to "#fff" for dark will be "#131418" (color of dark mode background)
  display = "standalone"

Is this PR related to any issue or discussion?

Please see discussion #118

PR Checklist

I have verified that the code works as described/as intended.
This change adds a social icon which has a permissive license to use it.
This change does not include any external library/resources.
This change does not include any unrelated scripts (e.g. bash and python scripts).
I have enabled maintainer edits for this PR.

…header

netlify · 2023-09-24T14:58:09Z

✅ Deploy Preview for hugo-blog-awesome ready!

Name	Link
🔨 Latest commit	`c943593`
🔍 Latest deploy log	https://app.netlify.com/sites/hugo-blog-awesome/deploys/65106a6e147ec500082d4cc9
😎 Deploy Preview	https://deploy-preview-127--hugo-blog-awesome.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.