Hugoplate

https://github.com/zeon-studio/hugoplate
Admin
Hugoplate is a free starter template built with Hugo and Tailwind CSS v4.0, providing everything you...
Tokens:6,784
Snippets:40
Trust Score:6.5
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Project Setup Command

Source: https://github.com/zeon-studio/hugoplate/blob/main/readme.md

Automates the setup of a new Hugo theme folder, cloning the Hugoplate theme, and moving the exampleSite folder for immediate Hugo server startup.

```bash
npm run project-setup
```

--------------------------------

### Install Dependencies Command

Source: https://github.com/zeon-studio/hugoplate/blob/main/readme.md

Installs all project dependencies required for Hugoplate using npm.

```bash
npm install
```

--------------------------------

### Development Server Command

Source: https://github.com/zeon-studio/hugoplate/blob/main/readme.md

Starts the development server for Hugoplate, allowing for live preview and development of the Hugo site.

```bash
npm run dev
```

--------------------------------

### Hugo Template: Rendering Summary and Read More

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/components/blog-card.html

This snippet displays the plain text summary of a page and a 'read more' link, which navigates the user to the full content of the page.

```gohtml
{{ .Summary | plainify }}

[{{ T "read_more" }}]({{ .RelPermalink }})
```

--------------------------------

### JavaScript Syntax Highlighting

Source: https://github.com/zeon-studio/hugoplate/blob/main/exampleSite/content/english/pages/elements.md

Demonstrates JavaScript syntax highlighting with an alert function. This snippet is useful for showcasing code examples in documentation.

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```

--------------------------------

### Hugo Templating: Navigation and Copyright

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/essentials/footer.html

This snippet demonstrates how to render a footer navigation menu and social media links using Hugo's templating language. It iterates over site menus and data files, applying URL transformations and markdown conversion for display. It requires a Hugo project with configured menus and social data.

```go-html-template
[{{ partial "logo" }}]({{ site.Home.RelPermalink }})

{{ range site.Menus.footer }}*   [{{ .Name }}]({{ if findRE `^#` .URL }}
                      {{ if not $.IsHome }}
                        {{ site.Home.RelPermalink }}
                      {{ end }}{{ .URL }}
                    {{ else }}
                      {{ .URL | relLangURL }}
                    {{ end }})
{{ end }}

{{ range site.Data.social.main }}*   []({{ .link | safeURL }})
{{ end }}

{{ site.Params.copyright | markdownify }}
```

--------------------------------

### Hugo Template: Displaying Title and Links

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/components/blog-card.html

This snippet shows how to display a page title as a link to the page itself. It also demonstrates how to list author and category links if they are provided in the page's parameters.

```gohtml
#### [{{ .Title }}]({{ .RelPermalink }})

{{ $categories:= .Params.categories }} {{ if $categories }}

*   [{{ .Params.author }}]({{ `authors/` | relLangURL }}{{ .Params.Author | urlize }}/)
*   {{ range $i,$p:= $categories }} [{{ . | humanize }}{{ if ne $i (sub (len $categories) 1) }} {{ "," }} {{ end }}]({{ `categories/` | relLangURL }}{{ . | urlize | lower }}/) {{ end }}

{{ end }}
```

--------------------------------

### Python Syntax Highlighting

Source: https://github.com/zeon-studio/hugoplate/blob/main/exampleSite/content/english/pages/elements.md

Illustrates Python syntax highlighting for a simple string assignment and print statement. This is typically used for displaying Python code examples.

```python
s = "Python syntax highlighting"
print s
```

--------------------------------

### Hugo Template: Displaying Images Conditionally

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/components/blog-card.html

This snippet demonstrates how to conditionally display an image in a Hugo template. It checks if the 'image' parameter is set and then uses the 'image' partial to render it with specified attributes.

```gohtml
{{ $image:= .Params.image }} {{ if $image }} {{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "mb-6 w-full rounded") }} {{ end }}
```

--------------------------------

### Build Hugoplate Project Locally

Source: https://github.com/zeon-studio/hugoplate/blob/main/readme.md

Builds the Hugoplate project for local development. This command generates the necessary files for testing your site locally.

```bash
npm run build
```

--------------------------------

### Update Hugoplate Theme

Source: https://github.com/zeon-studio/hugoplate/blob/main/readme.md

Updates the Hugoplate theme to its latest version. This command requires the `project-setup` script to have been run previously.

```bash
npm run update-theme
```

--------------------------------

### Update Hugoplate Modules

Source: https://github.com/zeon-studio/hugoplate/blob/main/readme.md

Updates all modules integrated into the Hugoplate template, ensuring all components are at their latest versions.

```bash
npm run update-modules
```

--------------------------------

### Render Blog Post Content and Metadata (Go Template)

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/blog/single.html

This Go template snippet defines the main layout for a blog post. It handles displaying the featured image, title, author information, categories, publication date, table of contents, post content, tags, and social sharing links. It also includes logic for displaying related posts.

```go-template
{{ define "main" }}

{{ $image:= .Params.image }} {{ if $image }}

{{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "w-full rounded") }}

{{ end }}

{{ .Title }}
============

*   [{{ .Params.author }}]({{ `authors/` | relLangURL }}{{ .Params.Author | urlize }}/
{{ $categories:= .Params.categories }} {{ if $categories }}*   {{ range $i,$p:= $categories }} [{{ . | humanize }}{{ if ne $i (sub (len $categories) 1) }} {{ "," }} {{ end }}]({{ `categories/` | relLangURL }}{{ . | urlize | lower }}/) {{ end }}
{{ end }}*   {{ time.Format ":date\_long" .PublishDate }}

{{ partial "toc.html" (dict "Class" "blog" "Collapsed" false "TableOfContents" .TableOfContents ) }} {{ .Content }}

{{ $tags:= .Params.tags }} {{ if $tags }}

##### {{ T "tags" }} :

{{ range $i,$p:= $tags }}*   [{{ . | humanize }}]({{ `tags/` | relLangURL }}{{ . | urlize | lower }}/)
{{ end }}

{{ end }}

##### {{ T "share" }} :

{{ partial "social-share" (dict "Context" . "Class" "share-icons" "Title" .Title "Whatsapp" false "Telegram" false "Linkedin" false "Pinterest" false "Tumblr" false "Vk" false "Reddit" false) }}

{{ if site.Config.Services.Disqus.Shortname }}

{{ template "\_internal/disqus.html" . }}

{{ end }}

{{ $related := .Site.RegularPages.Related . | first 10 }} {{ $related = $related | shuffle | first 3 }} {{ with $related }}

{{ T "related\_posts" }}
------------------------

{{ range . }}

{{ partial "components/blog-card" . }}

{{ end }}

{{ end }}

{{ end }}
```

--------------------------------

### Hugo Main Template Structure

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/index.html

The main template (`main`) in HugoPlate defines the overall page structure, leveraging partials for reusable components and Go templating for conditional logic and data access. It handles rendering banners, feature sections, and testimonials.

```go-template
{{ define "main" }} {{ with .Params.banner }} {{ .title | markdownify }} ========================== {{ .content | markdownify }} {{ with .button }} {{ if .enable }} [{{ .label }}]({{ .link | absURL }}) {{ end }} {{ end }} {{ partial "image" (dict "Src" .image "Alt" "Banner image" "Loading" "eager" "Class" "mx-auto lg:!max-w-[800px]" "DisplayXL" "800x" ) }} {{ end }} {{ range $i, $e:= .Params.features }} {{ partial "image" (dict "Src" .image "Alt" "feature image" "DisplayXL" "520x" "DisplayLG" "425x" "DisplayMD" "360x") }} {{ .title | markdownify }} -------------------------- {{ .content | markdownify }} {{ range .bulletpoints }}*   {{ . | markdownify }} {{ end }} {{ with .button }} {{ if .enable }} [{{ .label }}]({{ .link | absURL }}) {{ end }} {{ end }} {{ end }} {{ with site.GetPage "sections/testimonial" }} {{ if .Params.enable }} {{ .Title | markdownify }} -------------------------- {{ .Params.description | markdownify }} {{ range .Params.testimonials }} > {{ .content | markdownify }} {{ partial "image" (dict "Src" .avatar "Size" "50x50" "Class" "rounded-full" "Alt" .name) }} ### {{ .name }} {{ .designation | markdownify }} {{ end }} {{ end }} {{ end }} {{ end }}
```

--------------------------------

### Hugo Theme Switcher Component (Go Template)

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/essentials/header.html

This Go template code renders a theme switcher component for a Hugo site. It calls the 'theme-switcher' partial with specified CSS classes to manage its visual presentation.

```Go Template
{{ partial "components/theme-switcher" (dict "Class" "mr-5") }}
```

--------------------------------

### Hugo Navigation Menu Generation (Go Template)

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/essentials/header.html

This Go template code generates a navigation menu for a Hugo site. It iterates through the site's main menu, handling parent items and their children, and applies specific formatting for internal and external links. It also includes logic for highlighting the current page and conditionally displaying navigation buttons.

```Go Template
{{ $currentPage := . }} {{ range site.Menus.main }} {{ $menuURL := .URL | absLangURL }} {{ $pageURL:= $currentPage.Permalink | absLangURL }} {{ $active := eq $menuURL $pageURL }} {{ if .HasChildren }}*   {{ .Name }}
    {{ range .Children }} {{ $childURL := .URL | absLangURL }} {{ $active := eq $childURL $pageURL }}*   [{{ .Name }}]({{- if findRE `^#` .URL -}} {{- if not $.IsHome -}} {{- site.Home.RelPermalink -}} {{- end -}} {{- .URL -}} {{- else -}} {{- .URL | relLangURL -}} {{- end -}})
    {{ end }}
{{ else }}*   [{{ .Name }}]({{- if findRE `^#` .URL -}} {{- if not $.IsHome -}} {{- site.Home.RelPermalink -}} {{- end }}{{ .URL -}} {{- else -}} {{- .URL | relLangURL -}} {{- end -}})
{{ end }} {{ end }} {{ if site.Params.navigation_button.enable }}*   [{{ site.Params.navigation_button.label }}]({{ site.Params.navigation_button.link | relLangURL }})
{{ end }}
```

--------------------------------

### Hugo Plate: Load Site Verifications and SEO

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/essentials/head.html

Includes site verification tags and basic SEO partials. Site verifications are crucial for search engine ownership confirmation, while basic SEO ensures fundamental discoverability.

```gohtml
{{ partialCached "site-verifications.html" . }}
  {{ partial "basic-seo.html" . }}
```

--------------------------------

### Hugo Plate: Load Favicon and Manifest

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/essentials/head.html

Loads the favicon and manifest partials using `partialCached` for efficient rendering. These are essential for site identity and PWA compatibility.

```gohtml
{{ partialCached "favicon" . }}
  {{ partialCached "manifest" . }}
```

--------------------------------

### Hugo Language Switcher Component (Go Template)

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/essentials/header.html

This Go template code renders a language switcher component for a Hugo site. It calls the 'language-switcher' partial with specific context and CSS classes to control its appearance and behavior.

```Go Template
{{ partial "components/language-switcher" (dict "Context" . "Class" "mr-5 pl-2 py-1 dark:bg-darkmode-light rounded") }}
```

--------------------------------

### Hugo Template Logic and Partials

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/_default/baseof.html

This snippet shows how to include reusable components (partials) in Hugo templates. It uses conditional logic (if/else) to include different partials based on the production environment and demonstrates the use of `partialCached` for performance.

```gohtml
{{ partial "essentials/head.html" . }} {{ partialCached "essentials/style.html" . }} {{ if hugo.IsProduction }} {{ partialCached "preloader.html" . }} {{ partialCached "gtm-noscript.html" . }} {{ else }} {{ partial "preloader.html" . }} {{ partial "components/tw-size-indicator.html" . }} {{ end }} {{ partialCached "announcement.html" . }} {{ partial "essentials/header.html" . }} {{ partial "search-modal.html" (dict "Context" . ) }}

{{ block "main" . }}{{ end }}

{{ partial "essentials/footer.html" . }} {{ partialCached "essentials/script.html" . }}
```

--------------------------------

### Process and Concatenate CSS Assets (Hugo)

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/essentials/style.html

This Hugo template code iterates through site parameters to collect CSS files, distinguishing between regular and lazy-loaded assets. It integrates Tailwind CSS, concatenates them, and applies production optimizations.

```go-html-template
{{ $pf:= site.Data.theme.fonts.font_family.primary }}
{{ $sf:= site.Data.theme.fonts.font_family.secondary }}

{{ $styles := slice }}
{{ $stylesLazy := slice }}
{{ range site.Params.plugins.css }}
  {{ if findRE "^http" .link }}
  {{ else }}
    {{ if not .lazy }}
      {{ $styles = $styles | append (resources.Get .link) }}
    {{ else }}
      {{ $stylesLazy = $stylesLazy | append (resources.Get .link) }}
    {{ end }}
  {{ end }}
{{ end }}

{{ $mainCSS := resources.Get "css/main.css" }}
{{ $tailwindOpts := dict "inlineImports" true }}
{{ $tailwindCSS := $mainCSS | css.TailwindCSS $tailwindOpts }}

{{ $styles = $styles | append $tailwindCSS }}
{{ $styles = $styles | resources.Concat "css/style.css" }}
{{ $stylesLazy = $stylesLazy | resources.Concat "css/style-lazy.css" }}

{{ if hugo.IsProduction }}
  {{ $styles = $styles | fingerprint }}
  {{ $stylesLazy = $stylesLazy | minify | fingerprint }}
{{ end }}
```

--------------------------------

### Hugo Plate: Load Mermaid Assets

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/essentials/head.html

Loads assets required for Mermaid.js, a JavaScript-based diagramming and charting tool, enabling the rendering of diagrams within the site.

```gohtml
{{ partial "mermaid/assets/js" . }}
```

--------------------------------

### Remove Dark Mode from Hugoplate

Source: https://github.com/zeon-studio/hugoplate/blob/main/readme.md

Removes dark mode functionality from the Hugoplate project. This command is intended to be run before `project-setup`. If `project-setup` has already been executed, run `npm run theme-setup`, then this command, and finally `npm run project-setup` again.

```bash
npm run remove-darkmode
```

--------------------------------

### Hugo Navigation Button Display (Go Template)

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/essentials/header.html

This Go template code conditionally displays a navigation button based on the site's parameters. If the navigation button is enabled, it renders a link with the specified label and URL, using relative language URL formatting.

```Go Template
{{ if site.Params.navigation_button.enable }} [{{ site.Params.navigation_button.label }}]({{ site.Params.navigation_button.link | relLangURL }}) {{ end }}
```

--------------------------------

### HugoPlate Tabs Shortcode with Content

Source: https://github.com/zeon-studio/hugoplate/blob/main/exampleSite/content/english/pages/elements.md

Illustrates the HugoPlate tabs shortcode, which allows for creating tabbed interfaces. Each tab can contain distinct content, including markdown and other Hugo shortcodes.

```html
{{< tabs >}}
{{< tab "Tab 1" >}}

#### Hey There, I am a tab

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

{{< /tab >}}

{{< tab "Tab 2" >}}

#### I wanna talk about the assassination attempt

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

{{< /tab >}}

{{< tab "Tab 3" >}}

#### We know you’re dealing in stolen ore

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo

{{< /tab >}}
{{< /tabs >}}
```

--------------------------------

### C Syntax Highlighting with Line Numbers

Source: https://github.com/zeon-studio/hugoplate/blob/main/exampleSite/content/english/pages/elements.md

Shows C syntax highlighting with line numbers enabled, including a standard 'Hello, world!' program. This is useful for presenting C code in a readable format.

```c
#include <stdio.h>

int main(void)
{
    printf("hello, world\n");
    return 0;
}
```

--------------------------------

### Conditional Image Rendering in Hugo Templates

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/authors/single.html

This snippet demonstrates how to conditionally render an image in Hugo templates. It checks if an 'image' parameter is set and uses a partial for rendering, otherwise it falls back to displaying a Gravatar based on the email parameter. Dependencies include the 'partial' function and 'md5' function for Gravatar hash.

```go template
{{ define "main" }}

{{ $image:= .Params.image }} {{ if $image }} {{ partial "image" (dict "Src" $image "Context" .Page "Alt" .Title "Class" "mx-auto" "Size" "200x200") }} {{ else if .Params.Email }} ![{{ .Title }}](https://www.gravatar.com/avatar/{{ md5 .Params.email }}?s=128&pg&d=identicon) {{ end }}

{{ .Title }}
============

{{ .Content }}

{{ range .Params.social }}*   [{{ .title }}]({{ .link | safeURL }})
{{ end }}

{{ $filterByAuthor := where site.RegularPages "Params.author" "==" .Title }} {{ range $filterByAuthor }}

{{ partial "components/blog-card" . }}

{{ end }}

{{ end }}
```

--------------------------------

### Hugoplate Theme Switcher Conditional Rendering

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/components/theme-switcher.html

Conditionally renders the theme switcher JavaScript logic based on the site's parameters, specifically checking if `site.Params.theme_switcher` is enabled.

```go-template
{{ $class := .Class }}
{{ if site.Params.theme_switcher }}
```

--------------------------------

### HugoPlate Button Shortcode

Source: https://github.com/zeon-studio/hugoplate/blob/main/exampleSite/content/english/pages/elements.md

Demonstrates the usage of the HugoPlate button shortcode to create styled buttons with a specified label and link. It supports different styling options.

```html
{{< button label="Button" link="/" style="solid" >}}
```

--------------------------------

### Hugo Plate: Load Search Index

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/essentials/head.html

Includes the search index partial, likely used to generate a search index file for client-side or server-side search functionality.

```gohtml
{{ partial "search-index.html" . }}
```

--------------------------------

### Hugo Script Management and Processing

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/essentials/script.html

This Hugo template code manages JavaScript assets by concatenating, processing, and conditionally minifying/fingerprinting them. It separates regular scripts from lazy-loaded ones and integrates with Hugo's resource pipeline.

```go
{{ $scripts := slice }}
{{ $scriptsLazy := slice }}
{{ range site.Params.plugins.js }}
  {{ if findRE "^http" .link }}
  {{ else }}
    {{ if not .lazy }}
      {{ $scripts = $scripts | append (resources.Get .link) }}
    {{ else }}
      {{ $scriptsLazy = $scriptsLazy | append (resources.Get .link) }}
    {{ end }}
  {{ end }}
{{ end }}
{{ $scripts = $scripts | append (resources.Get "js/main.js") }}
{{ $scripts = $scripts | resources.Concat "js/script.js" }}
{{ $scriptsLazy = $scriptsLazy | resources.Concat "js/script-lazy.js" }}

{{ if hugo.IsProduction }}
  {{ $scripts = $scripts | minify | fingerprint }}
  {{ $scriptsLazy = $scriptsLazy | minify | fingerprint }}
{{ end }}

{{ "<!-- scripts -->" | safeHTML }}
{{ with $scripts }}
  <script src="{{ .RelPermalink }}"></script>
{{ end }}

{{ "<!-- scripts lazy -->" | safeHTML }}
{{ with $scriptsLazy }}
  <script src="{{ .RelPermalink }}" defer></script>
{{ end }}

{{ partialCached "pwa.html" . }}
{{ partialCached "cookie-consent.html" . }}
{{ partialCached "adsense-script.html" . }}
{{ partialCached "announcement-script.html" . }}
```

--------------------------------

### Hugoplate Theme Switcher JavaScript Logic

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/components/theme-switcher.html

Implements a theme switcher that toggles dark mode based on user interaction and persists the preference in local storage. It also respects the system's preferred color scheme if set to 'system'. The switcher is made visible only after the theme is applied.

```javascript
var darkMode = localStorage.getItem("theme") === "dark";
if (localStorage.getItem("theme") === null) {
  darkMode = {{if eq site.Params.theme_default "dark"}}true{{else}}false{{end}};
  {{ if eq site.Params.theme_default "system" }}
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
      darkMode = true;
    }
  {{ end }}
}
if (darkMode) {
  document.documentElement.classList.add("dark");
} else {
  document.documentElement.classList.remove("dark");
}

// Show theme switcher after applying theme
document.addEventListener("DOMContentLoaded", () => {
  var themeSwitch = document.querySelectorAll("[data-theme-switcher]");
  var themeSwitcherContainer = document.querySelector('.theme-switcher');
  [].forEach.call(themeSwitch, function (ts) {
    ts.checked = darkMode;
    ts.addEventListener("click", () => {
      document.documentElement.classList.toggle("dark");
      localStorage.setItem(
        "theme",
        document.documentElement.classList.contains("dark") ? "dark" : "light"
      );
    });
  });

  // Now make the switcher visible after the theme is applied
  themeSwitcherContainer.classList.remove("invisible");
});
```

--------------------------------

### Rendering Social Links in Hugo

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/authors/single.html

This Go template snippet iterates through a 'social' parameter in the page's front matter and renders each social link as a markdown list item. It uses the 'safeURL' function to ensure the links are rendered safely. This is useful for displaying contact or profile links.

```go template
{{ range .Params.social }}*   [{{ .title }}]({{ .link | safeURL }})
{{ end }}
```

--------------------------------

### Load Google Fonts Dynamically (JavaScript)

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/essentials/style.html

This snippet dynamically creates and appends a link element to the document's head to load Google Fonts. It supports primary and secondary font families specified in the site's data.

```javascript
(function () {
  const googleFont = document.createElement("link");
  googleFont.href = "https://fonts.googleapis.com/css2?family={{$pf | safeURL}}{{with $sf}}&family={{. | safeURL}}{{end}}&display=swap";
  googleFont.type = "text/css";
  googleFont.rel = "stylesheet";
  document.head.appendChild(googleFont);
})();
```

--------------------------------

### Filtering and Rendering Blog Posts by Author in Hugo

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/authors/single.html

This Go template code filters all regular site pages to find those authored by the current page's title. It then iterates over the filtered pages and renders each using a 'blog-card' partial. This is commonly used for displaying related posts or posts by a specific author.

```go template
{{ $filterByAuthor := where site.RegularPages "Params.author" "==" .Title }} {{ range $filterByAuthor }}

{{ partial "components/blog-card" . }}

{{ end }}
```

--------------------------------

### Hugo Pagination Links Generation

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/components/pagination.html

This Go template code generates navigation links for paginated content in Hugo. It calculates limits for displayed page numbers based on adjacent links and total pages, rendering previous, next, and numbered page links with conditional logic for ellipses.

```go-template
{{ $paginator := .Paginator }}
{{ $adjacent_links := 2 }}
{{ $max_links := (add (mul $adjacent_links 2) 1) }}
{{ $lower_limit := (add $adjacent_links 1) }}
{{ $upper_limit := (sub $paginator.TotalPages $adjacent_links) }}

{{ if gt $paginator.TotalPages 1 }}

{{ if $paginator.HasPrev }} [Previous]({{ $paginator.Prev.URL }}) {{ else }} Previous {{ end }}

{{ range $paginator.Pagers }}
  {{ $.Scratch.Set "page_number_flag" false }}
  {{ if gt $paginator.TotalPages $max_links }}
    {{ if le $paginator.PageNumber $lower_limit }}
      {{ if le .PageNumber $max_links }}
        {{ $.Scratch.Set "page_number_flag" true }}
      {{ end }}
    {{ else if ge $paginator.PageNumber $upper_limit }}
      {{ if gt .PageNumber (sub $paginator.TotalPages $max_links) }}
        {{ $.Scratch.Set "page_number_flag" true }}
      {{ end }}
    {{ else }}
      {{ if and ( ge .PageNumber (sub $paginator.PageNumber $adjacent_links) ) ( le .PageNumber (add $paginator.PageNumber $adjacent_links) ) }}
        {{ $.Scratch.Set "page_number_flag" true }}
      {{ end }}
    {{ end }}
  {{ else }}
    {{ $.Scratch.Set "page_number_flag" true }}
  {{ end }}

  {{ if eq ($.Scratch.Get "page_number_flag") true }}
    {{ if eq . $paginator }}
      {{ .PageNumber }}
    {{ else }}
      [{{ .PageNumber }}]({{ .URL }})
    {{ end }}
  {{ end }}
{{ end }}

{{ if $paginator.HasNext }} [Next]({{ $paginator.Next.URL }}) {{ else }} Next {{ end }}

{{ end }}
```

--------------------------------

### HugoPlate Notice Shortcode Variations

Source: https://github.com/zeon-studio/hugoplate/blob/main/exampleSite/content/english/pages/elements.md

Showcases the HugoPlate notice shortcode with various types like 'note', 'quote', 'tip', 'info', and 'warning'. Each type allows for custom text content within the notice block.

```html
{{< notice "note" >}}
This is a simple note.
{{< /notice >}}
```

```html
{{< notice "quote" >}}
This is a simple quote.
{{< /notice >}}
```

```html
{{< notice "tip" >}}
This is a simple tip.
{{< /notice >}}
```

```html
{{< notice "info" >}}
This is a simple info.
{{< /notice >}}
```

```html
{{< notice "warning" >}}
This is a simple warning.
{{< /notice >}}
```

--------------------------------

### Hugo Plate: Load Custom Script and Analytics

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/essentials/head.html

Loads custom scripts and conditionally loads Google Analytics based on configuration. This allows for site-specific JavaScript and integrated analytics tracking.

```gohtml
{{ partialCached "custom-script.html" . }}
  {{ if and site.Config.Services.GoogleAnalytics.ID (ne site.Config.Services.GoogleAnalytics.ID "G-MEASUREMENT_ID") }}
    {{ template "_internal/google_analytics.html" . }}
  {{ end }}
  {{ partialCached "gtm.html" . }}
```

--------------------------------

### Hugo Multilingual Language Switcher Logic

Source: https://github.com/zeon-studio/hugoplate/blob/main/layouts/partials/components/language-switcher.html

This snippet implements the core logic for a multilingual language switcher in Hugo. It handles page translations, fallbacks to the home page translations, and iterates through site languages to display available language options.

```gohtml
{{ if hugo.IsMultilingual }}
  {{ $class := .Class }}
  {{ $context := .Context }}
  {{ $pageLang := $context.Lang }}
  {{ $pageTranslations := newScratch }}

  {{/* First, fill all translations of the Home page (failsafe) */}}
  {{ range site.Home.AllTranslations }}
    {{ $pageTranslations.Set .Language.Lang .Permalink }}
  {{ end }}

  {{/* Second, if a translation exists for the current page for the target language, replace failsafe */}}
  {{ range $context.AllTranslations }}
    {{ $pageTranslations.Set .Language.Lang .Permalink }}
  {{ end }}

  {{ range site.Languages }}
    {{/* Fill the dropdown with all known languages */}}
    {{ $link := $pageTranslations.Get .Lang }}
    {{ if $link }}
      {{ .LanguageName }}
    {{ else }}
      {{/* if we can't safely redirect the user to the translated page or at least to translated home, discard the language from options */}}
    {{ end }}
  {{ end }}
{{ end }}
```

--------------------------------

### Mermaid Flowchart

Source: https://github.com/zeon-studio/hugoplate/blob/main/exampleSite/content/english/pages/elements.md

A Mermaid diagram showcasing a simple flowchart with text and decision nodes. This is used for visualizing processes and data flow.

```mermaid
flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]
```
Tokens:
Raw