+Example HTML include +
+Example page include
Example Shortcode
Shortcode used in an include page.
| Head 1 | Head 2 | Head 3 |
|---|---|---|
| 1 | 2 | 3 |
By default, the admonition is rendered with a plain text label. To enable font icons the document attribute :icons: font need to be set.
| Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. +Ornateness bland it ex enc, est yeti am bongo detract re. |
| Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. +Ornateness bland it ex enc, est yeti am bongo detract re. |
| Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. +Ornateness bland it ex enc, est yeti am bongo detract re. |
| Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. +Ornateness bland it ex enc, est yeti am bongo detract re. |
| Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. +Ornateness bland it ex enc, est yeti am bongo detract re. |
There are certain statements you may want to draw attention to by taking them out of the content’s flow and labeling them with a priority. These are called admonitions.
-[NOTE|TIP|IMPORTANT|CAUTION|WARNING]
+Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture.
+Ornateness bland it ex enc, est yeti am bongo detract re.Note | Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. +Ornateness bland it ex enc, est yeti am bongo detract re. |
Tip | Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. +Ornateness bland it ex enc, est yeti am bongo detract re. |
Important | Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. +Ornateness bland it ex enc, est yeti am bongo detract re. |
Caution | Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. +Ornateness bland it ex enc, est yeti am bongo detract re. |
Warning | Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. +Ornateness bland it ex enc, est yeti am bongo detract re. Romanesque acclimates investiture. |
Icons can be added by setting a unicode glyph or a character reference to the tip-caption attribute:
:tip-caption: 💡
+
+[TIP]
+It's possible to use Unicode glyphs as admonition icons.:tip-caption: pass:[🔥]
+
+[TIP]
+It's possible to use Unicode glyphs as admonition icons.💡 | It’s possible to use Unicode glyphs as admonition icons. |
🔥 | It’s possible to use Unicode glyphs as admonition icons. |
There are several ways to add code blocks. Most of them work out of the box, only the Hugo shortcode <highlight> needs to be configured to work properly. The theme also provides some additional features like a copy button and an option to set the maximum length of code blocks. Both of these functions and the dependent formatting rely on the .highlight CSS class. You must ensure that you always assign a language to your code blocks if you want to use these functions. If you do not want to apply syntax highlighting, you can also specify plain or text as the language.
To display an inline shortcode use single quotes:
`some code`
+Example: some code with a link
Code blocks can be uses without language specification:
```plain
+some code
+```
+Example:
some code
+… or if you need language specific syntax highlighting:
```shell
+# some code
+echo "Hello world"
+```
+Example:
# some code
+echo "Hello World"
+Hugo has a build-in shortcode for syntax highlighting. To work properly with this theme, you have to set following options in your site configuration:
pygmentsUseClasses=true
+pygmentsCodeFences=true
+pygmentsUseClasses: true
+pygmentsCodeFences: true
+You can use it like every other shortcode:
{{< highlight Shell "linenos=table" >}}
+# some code
+echo "Hello World"
+{{< /highlight >}}
+Example:
| |
The Gist shortcode is a built-in Hugo shortcode to load GitHub gists. For details usage information please check the Hugo documentation.
{{< gist spf13 7896402 >}}
+Example:
Say hello to the dark mode of the Geekdoc theme!
The dark mode can be used in two different ways. If you have JavaScript disabled in your browser, the dark mode automatically detects the preferred system settings via the prefers-color-scheme parameter. Depending on the value, the theme will automatically switch between dark and light mode if this feature is supported by your operating system and browser.
The second mode requires JavaScript and is controlled by a dark mode switch in the upper right corner. You can switch between three modes: Auto, Dark and Light. Auto mode works the same as the first method mentioned above and automatically detects the system setting. Dark and Light modes allow you to force one of them for your Geekdoc page only, regardless of the system setting. This works even if your browser or operating system does not support the system setting. The current selection is stored locally via the Web Storage API.
To avoid very bright spots often caused by images while using the dark mode we have added an optional auto-dim feature that can be enabled with the site parameter geekdocDarkModeDim (see Configuration). As this may have an impact on the quality of the images it is disabled by default.
The only supported source for custom icons are SVG sprites. Some icon frameworks provides ready to use sprites e.g. FontAwesome. If the framework don’t provide sprites, you can create your own from raw SVG icons. There are a lot of tools available to create sprites, please choose one that fits your need. One solution could be svgsprit.es.
Regardless of which tool (or existing sprite) you choose, there are a few requirements that must be met:
svg-sprite or hidden to the root element of your sprite or add a small piece of inline CSS e.g. style="display: none;".assets/sprites right beside your content folder.The result of a valid minimal SVG sprite file could look like this:
<svg class="svg-sprite" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <symbol viewBox="-2.29 -2.29 28.57 28.57" id="arrow_back" xmlns="http://www.w3.org/2000/svg">
+ <path d="M24 10.526v2.947H5.755l8.351 8.421-2.105 2.105-12-12 12-12 2.105 2.105-8.351 8.421H24z"/>
+ </symbol>
+</svg>
+Example:
FontAwesome provides three pre-build sprites included in the regular Web download pack, sprites/brands.svg, sprites/regular.svg and sprites/solid.svg. Choose your sprite to use and copy it to your projects root directory into assets/sprites, right beside your content folder:
my_projcet/
+├── assets
+│ └── sprites
+│ └── regular.svg
+├── config.yaml
+├── content
+│ ├── _index.md
+│ ├── ...
+That’s it! The theme will auto-load all available SVG sprites provided in the assets folder. To use the icons e.g. in the bundle menu, you need to lookup the id of the icon. An example would be thumbs-up . There is also a shortcode available.
The theme bundles just a small set of hand crafted icons.
Hugo supports the creation of websites with multiple languages. In this post we will explain how to get configure Multilingual Mode with this theme.
You need to set a default language and configure at least two different languages used by your site to your configuration file at config.toml:
defaultContentLanguage = "en"
+
+[languages.en]
+languageName = "English"
+contentDir = "content/en"
+weight = 10
+
+[languages.de]
+languageName = "German"
+contentDir = "content/de"
+weight = 20
+To customize translation strings used by the theme you can create a file i18n/<languagecode>.toml for every language you want to use e.g. i18n/en.toml. You can lookup all used strings in the default translation file.
For the Bundle Menu as well as for the Extra Header Menu you can translate the name within the data file of the menu:
---
+more:
+ # If `name` is a text, this text will be used as name for each language.
+ - name: News
+ ref: "/#"
+ icon: "gdoc_notification"
+ # To translate the name you can add a sub-item per language. Important: If you miss a language key
+ # that is configured in the languages list of your `config.toml` the name will be empty for this language!
+ - name:
+ en: Releases
+ de: Veröffentlichung
+ ref: "https://github.com/thegeeklab/hugo-geekdoc/releases"
+ external: true
+ icon: "gdoc_download"
+To translate your content you need to create a directory content/<languagecode>/ for each language you want to use e.g. content/en/. This language directories will hold the translated pages for the particular language.
If you have configured at least two different languages, the language switcher will be enabled in the UI automatically. The switcher is as part of the header menu and displayed on all pages.
On pages for which a translation is available it will be displayed in the selection list and links to the translated page.
Pages without a translation will be displayed in the selection list as well but are marked with an asterisk and link to the start page of the respective language.
If you want to customize the theme’s color scheme to give it your individual touch, you are only a few lines of CSS away. Generally, you need to override the default settings. The easiest way to do this is to create a file named static/custom.css right at the root of your site.
All the necessary CSS customization properties are listed below. If you want to customize elements that don’t use these properties, you can always look up the class name and override it directly. For inspiration, you can also take a look at https://www.color-hex.com. In this simple example, we’ll use the Beach color palette.
Custom CSS:
| |
The Theme is shipped with a set of default Favicons in various formats generated by the Favicon Generator. All files can be found in the static/favicon folder of the release tarball. To make the replacement of the default Favicons as simple as possible, the theme loads only a very small subset of the Favicon formats.
<link rel="icon" type="image/svg+xml" href="{{ "favicon/favicon.svg" | relURL }}">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon/favicon-32x32.png" | relURL }}">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon/favicon-16x16.png" | relURL }}">
+The minimal steps to load a custom Favicon is to overwrite the three default Favicon files. Therefor place these files into your projects root folder:
static/favicon/favicon.svgstatic/favicon/favicon-32x32.pngstatic/favicon/favicon-16x16.pngIf you want to add more Favicon formats you have to overwrite the default partial that is used to load the files. In the next step you have to place the required files in the static folder of your project as well.
Example:
<!-- layouts/partials/head/favicons.html -->
+<link rel="icon" type="image/svg+xml" href="{{ "favicon/favicon.svg" | relURL }}">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ "favicon/apple-touch-icon.png" | relURL }}">
+<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon/favicon-32x32.png" | relURL }}">
+<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon/favicon-16x16.png" | relURL }}">
+<link rel="manifest" href="{{ "favicon/site.webmanifest" | relURL }}">
+<link rel="mask-icon" href="{{ "favicon/safari-pinned-tab.svg" | relURL }}" color="#efefef">
+<meta name="msapplication-TileColor" content="#efefef">
+<meta name="theme-color" content="#efefef">
+Happy customizing!
+
+
Geekdoc is a simple Hugo theme for documentations. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of got alternatives out there. You can find a demo and the full documentation at https://geekdocs.de.
The avatar shortcode is another custom image shortcode.
Define a resource in the page front matter.
---
+resources:
+ - name: avatar
+ src: "images/avatar.jpg"
+ title: "Avatar"
+---
+
+{{< avatar name="avatar" >}}
+origin|tiny|small|medium|large.
Simple shortcode to include icons from SVG sprites outside of menus.
{{< icon "thumbs-up" >}}
+| Output | Code |
|---|---|
{{< icon "thumbs-up" >}} | |
{{< icon "thumbs-down" >}} | |
{{< icon "laugh" >}} | |
{{< icon "lemon" >}} | |
{{< icon "moon" >}} |
If you need more flexibility for your embedded images, you could use the img shortcode. It is using Hugo’s
+page resources and supports lazy loading of your images.
Define your resources in the page front matter, custom parameter params.credits is optional.
---
+resources:
+ - name: forest-1
+ src: "forest-1.jpg"
+ title: Forest (1)
+ params:
+ credits: "[Jay Mantri](https://unsplash.com/@jaymantri) on [Unsplash](https://unsplash.com/s/photos/forest)"
+---
+
+{{< img name="forest-1" size="large" lazy=false >}}
+origin|tiny|small|medium|large.
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates +investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts +feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious +copious quo ad. Stet probates in duo.
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates +investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts +feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious +copious quo ad. Stet probates in duo.
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates +investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts +feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious +copious quo ad. Stet probates in duo.
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates +investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts +feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious +copious quo ad. Stet probates in duo.
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates +investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts +feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious +copious quo ad. Stet probates in duo.
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates +investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts +feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious +copious quo ad. Stet probates in duo.
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates +investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts +feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious +copious quo ad. Stet probates in duo.
KaTeX shortcode let you render math typesetting in markdown document.
{{< katex [display] [class="text-center"] >}}
+f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
+{{< /katex >}}
+KaTeX can be used inline, for example
+\(\pi(x)\) or used with the display parameter as above.
A progress bar shows how far a process has progressed.
{{< progress title=Eating value=65 icon=gdoc_heart >}}
+The property list shortcode creates a custom HTML description list that can be used to display properties or variables and general dependent information. The shortcode requires a data file in data/properties/, e.g. data/properties/demo.yaml.
{{< propertylist name=demo (sort=name) (order=[asc|desc]) >}}
+The supported attributes can be taken from the following example:
| |
regular|large.A bool property with a complex multiline description and embedded Markdown:
More description how to use this property.
Tabs let you organize content by context, for example installation instructions for each supported platform.
{{< tabs "uniqueid" >}}
+justify-between" itemprop="breadcrumb">Tabs let you organize content by context, for example installation instructions for each supported platform.
{{< tabs "uniqueid" >}}
{{< tab "macOS" >}} # macOS Content {{< /tab >}}
{{< tab "Linux" >}} # Linux Content {{< /tab >}}
{{< tab "Windows" >}} # Windows Content {{< /tab >}}
{{< /tabs >}}
This is tab macOS content.
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates +
This is tab macOS content.
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.
This is tab Linux content.
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates -investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad +
This is tab Linux content.
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates +investiture. Ornateness bland it ex enc, est yeti am bongo detract re. Pro ad prompts feud gait, quid exercise emeritus bis e. In pro quints consequent, denim fastidious copious quo ad. Stet probates in duo.
This is tab Windows content.
Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclimates +