diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..e69de29 diff --git a/data/icons.yaml b/data/icons.yaml index 1eecbe4..8bbc493 100644 --- a/data/icons.yaml +++ b/data/icons.yaml @@ -259,3 +259,12 @@ x: zoom-in: zoom-out: + +# Socials +instagram: +facebook: +discord: +twitter: +mastodon: +youtube: +x-twitter: diff --git a/exampleSite/content/docs/_index.md b/exampleSite/content/docs/_index.md index 169b9d6..9483640 100644 --- a/exampleSite/content/docs/_index.md +++ b/exampleSite/content/docs/_index.md @@ -9,8 +9,8 @@ Welcome to the Hextra documentation! **Hextra** is a modern, responsive and powerful [Hugo](https://gohugo.io/) theme built with [Tailwind CSS](https://tailwindcss.com/). It is inspired by Next.js theme [Nextra](https://github.com/shuding/nextra). -It is designed for building websites for documentation, blogs, books and landing pages. -It is easy to use out of the box, and batteries are included to make your site fast and beautiful. +It is designed for building beautiful websites for documentation, blogs, books and landing pages. +It is easy to use out of the box, and batteries are included to make your site versatile and powerful. ## Features @@ -19,14 +19,14 @@ It is easy to use out of the box, and batteries are included to make your site f - **Lightweight and Fast** - Hextra is solely dependent on Hugo, one of the world's fastest static site generator that comes with just a single binary file. - **Full-text Search** - Hextra offers built-in offline full-text search powered by [FlexSearch](https://github.com/nextapps-de/flexsearch). - **Battery included** - Hextra supports Markdown, syntax highlighting, LaTeX, diagrams, and comes with Shortcodes components as building blocks for your Markdown content. -- **Muliti-language** - Hextra supports multi-language sites out of the box. +- **Multi-language Support** - Multi-language sites made easy with Hugo's multilingual mode. - **SEO Friendly** - Out of the box support for SEO tags, Open Graph, and Twitter Cards. - **Customizable** - You can easily customize the theme to make the site look the way you want. ## Next -Explore the following sections to get started: +Explore the following section to get started: {{< cards >}} -{{< card link="/" title="Getting Started" icon="play" >}} + {{< card link="getting-started" title="Getting Started" icon="play" >}} {{< /cards >}} diff --git a/exampleSite/content/docs/advanced/customization.md b/exampleSite/content/docs/advanced/customization.md index ab2f614..aeeaeaa 100644 --- a/exampleSite/content/docs/advanced/customization.md +++ b/exampleSite/content/docs/advanced/customization.md @@ -2,3 +2,7 @@ title: Customizing Hextra linkTitle: Customization --- + +## Custom CSS + +To add custom CSS, we need to create a file `assets/css/custom.css` in our site. Hextra will automatically load this file. diff --git a/exampleSite/content/docs/advanced/multi-language.md b/exampleSite/content/docs/advanced/multi-language.md new file mode 100644 index 0000000..a207db7 --- /dev/null +++ b/exampleSite/content/docs/advanced/multi-language.md @@ -0,0 +1,70 @@ +--- +title: "Multi-language" +weight: 1 +--- + +Hextra supports creating site with multiple languages using Hugo's [multilingual mode](https://gohugo.io/content-management/multilingual/). + +## Enable Multi-language + +To make our site multi-language, we need to tell Hugo the supported languages. We need to add to the site configuration file: + +```yaml {filename="hugo.yaml"} +defaultContentLanguage: en +languages: + en: + languageName: English + weight: 1 + fr: + languageName: Français + weight: 2 + ja: + languageName: 日本語 + weight: 3 +``` + +## Manage Translations by Filename + +Hugo supports managing translations by filename. For example, if we have a file `content/docs/_index.md` in English, we can create a file `content/docs/_index.fr.md` for French translation. + +{{< filetree/container >}} + {{< filetree/folder name="content" >}} + {{< filetree/folder name="docs" state="open" >}} + {{< filetree/file name="_index.md" >}} + {{< filetree/file name="_index.fr.md" >}} + {{< filetree/file name="_index.ja.md" >}} + {{< /filetree/folder >}} + {{< /filetree/folder >}} +{{< /filetree/container >}} + +Note: Hugo also supports [Translation by content directory](https://gohugo.io/content-management/multilingual/#translation-by-content-directory). + +## Translate Menu Items + +To translate menu items in the navigation bar, we need to set the `identifier` field: + +```yaml {filename="hugo.yaml"} +menu: + main: + - identifier: documentation + name: Documentation + pageRef: /docs + weight: 1 + - identifier: blog + name: Blog + pageRef: /blog + weight: 2 +``` + +and translate them in the corresponding i18n file: + +```yaml {filename="i18n/fr.yaml"} +documentation: Documentation +blog: Blog +``` + +## Read More + +- [Hugo Multilingual Mode](https://gohugo.io/content-management/multilingual/) +- [Hugo Multilingual Part 1: Content translation](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/) +- [Hugo Multilingual Part 2: Strings localization](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/) diff --git a/exampleSite/content/docs/guide/configuration.md b/exampleSite/content/docs/guide/configuration.md index 326208e..46c0e75 100644 --- a/exampleSite/content/docs/guide/configuration.md +++ b/exampleSite/content/docs/guide/configuration.md @@ -29,7 +29,6 @@ menu: weight: 4 params: type: search - placeholder: Search Hextra docs... - name: GitHub weight: 5 url: "https://github.com/imfing/hextra" @@ -54,7 +53,6 @@ There are different types of menu items: - name: Search params: type: search - placeholder: Search Hextra docs... ``` 4. Icon ```yaml diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml index 23527ce..7c48893 100644 --- a/exampleSite/hugo.yaml +++ b/exampleSite/hugo.yaml @@ -42,20 +42,22 @@ enableInlineShortcodes: true menu: main: - - name: Documentation + - identifier: documentation + name: Documentation pageRef: /docs weight: 1 - - name: Blog + - identifier: blog + name: Blog pageRef: /blog weight: 2 - - name: About + - identifier: about + name: About pageRef: /about weight: 3 - name: Search weight: 4 params: type: search - placeholder: Search Hextra docs... - name: GitHub weight: 5 url: "https://github.com/imfing/hextra" diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index f061dcd..3e5d7e4 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -327,7 +327,6 @@ "mb-8", "md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]", "md:hidden", - "md:inline", "md:inline-block", "md:justify-start", "md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]", @@ -350,7 +349,6 @@ "min-w-full", "ml-1", "ml-4", - "ml-auto", "mr-1", "mr-2", "mt-1.5", diff --git a/i18n/ja.yaml b/i18n/ja.yaml index 91c46b4..d571d2e 100644 --- a/i18n/ja.yaml +++ b/i18n/ja.yaml @@ -1,2 +1,8 @@ +documentation: "ドキュメンテーション" +blog: "ブログ" +about: "このサイトについて" + +search_placeholder: "検索ドキュメント..." + article: on_this_page: "このページでは" diff --git a/layouts/partials/head-css.html b/layouts/partials/head-css.html index f5db357..2330066 100644 --- a/layouts/partials/head-css.html +++ b/layouts/partials/head-css.html @@ -7,4 +7,7 @@ {{ $styles = $styles | minify | fingerprint | resources.PostProcess }} + + {{ $custom := resources.Get "css/custom.css" }} + {{ $custom = $custom | minify | fingerprint }} {{ end }} diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index f3eb681..3174b3f 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -13,7 +13,7 @@ {{ .Site.Title }} {{- if .Site.Params.navbar.displayTitle -}} - + {{- .Site.Title -}} {{- end -}} @@ -25,26 +25,26 @@ {{- $external := strings.HasPrefix .URL "http" -}} {{/* Display icon menu item */}} {{- if .Params.icon -}} - + {{- partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") -}} - {{ .Name }} + {{ or (T .Identifier) .Name | safeHTML }} {{- else -}} {{- $active := or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .) -}} {{- $activeClass := cond $active "font-medium" "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200" -}} {{- end -}} {{- end -}} {{- end -}} - diff --git a/layouts/partials/search.html b/layouts/partials/search.html index e4f52cf..1989ec2 100644 --- a/layouts/partials/search.html +++ b/layouts/partials/search.html @@ -1,4 +1,4 @@ -{{- $placeholder := .params.placeholder | default "Search..." -}} +{{- $placeholder := (T "search_placeholder") | default "Search..." -}}