Hugo Hextra website (2)

    This post covers the basic configuration and advanced comments system. It explains how to customize the favicon, update the navigation logo and site title, and integrate the giscus comments system.

• Add logo copyright to footer.

Favicon

ICONS8

Perhaps because humans are finite beings, I have always been drawn to the infinity symbol. In the pursuit of approaching perfection, I find a kind of ultimate beauty. Therefore, I chose the infinity symbol from ICONS8 and use it as my blog’s favicon.

    “To Infinity and Beyond!"

— Buzz Lightyear, Toy Story series (Pixar Wiki)

SVG → PNG (override)

To customize the favicon for my site, an SVG is not necessarily required.

    Scalable Vector Graphics (SVG) is an XML-based vector graphics format for defining two-dimensional graphics, having support for interactivity and animation. SVG images are defined in a vector graphics format and stored in XML text files. SVG images can thus be scaled in size without loss of quality, and SVG files can be searched, indexed, scripted, and compressed.

— SVG (Wikipedia)

A PNG works perfectly well, as long as I override the existing files in the Hextra theme.

1. assets/js/core/favicon.js
2. layouts/_partials/favicons.html

Navigation

Logo

Similar to the above favicon, a set of high resolution PNG is sufficient.

• layouts/_partials/navbar-title.html

{{- $logoPath := .Site.Params.navbar.logo.path | default "images/logo.svg" -}}
{{- $logoLink := .Site.Params.navbar.logo.link | default .Site.Home.RelPermalink -}}
{{- $logoWidth := .Site.Params.navbar.logo.width | default "20" -}}
{{- $logoHeight := .Site.Params.navbar.logo.height | default "20" -}}
{{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}}

<a class="hx:flex hx:items-center hx:hover:opacity-75 hx:ltr:mr-auto hx:rtl:ml-auto" href="{{ $logoLink }}">
  {{- $displayTitle := (.Site.Params.navbar.displayTitle | default true) }}
  {{- if (.Site.Params.navbar.displayLogo | default true) }}
    <img class="hx:mr-2 hx:block hx:dark:hidden" src="{{ $logoPath | relURL }}" alt="{{ cond $displayTitle `Logo` .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
    <img class="hx:mr-2 hx:hidden hx:dark:block" src="{{ $logoDarkPath | relURL }}" alt="{{ cond $displayTitle `Dark Logo` .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
  {{- end }}
  {{- if $displayTitle }}
    <span class="hx:mr-2 hx:font-extrabold hx:inline hx:select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
  {{- end }}
</a>

Title

To modify the default logo and title, edit hugo.yaml and add the path to my logo file under static directory.

params:
  navbar:
    displayTitle: true
    displayLogo: true
    logo:
      path: logos/infinity_logo.png
      dark: logos/infinity_logo_dark.png
      width: 36
      height: 36

Advanced

giscus

    A comments system powered by GitHub Discussions. Let visitors leave comments and reactions on your website via GitHub! Heavily inspired by utterances.

— giscus (GitHub)

① Install the giscus app

Go to here and install. Then, make sure access to the specific repository is granted.

② Enable the Discussions feature

Go to the repository page (GitHub), click the Settings tab, and scroll down to the Features section. This repository is where the discussions will be linked to.

③ Apply the <script> tag to hugo.yaml

After completing the minimum setup, link the repository and configure the four options. (Ref. giscus) My settings are listed below.

params:
  comments:
    enable: true
    type: giscus
    giscus:
      repo: [...]
      repoId: [...]
      category: [...]
      categoryId: [...]
      mapping: pathname
      strict: 1
      reactionsEnabled: 1
      emitMetadata: 0
      inputPosition: bottom
      theme: transparent_dark
      lang: en

Minor issue (override)

To apply the “transparent_dark” theme, I changed the condition that returns giscusTheme from giscusTheme === 'light' || giscusTheme === 'dark' to simply giscusTheme.

• layouts/_partials/components/giscus.html

function getGiscusTheme() {
  const giscusTheme = '{{ .theme }}';
  if (giscusTheme === 'light' || giscusTheme === 'dark') {
    return giscusTheme;
  }

  const hugoTheme = localStorage.getItem("color-theme");
  if (hugoTheme === 'light' || hugoTheme === 'dark') {
    return hugoTheme;
  }

  if (hugoTheme === 'system') {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }

  const defaultTheme = '{{ site.Params.theme.default }}';
  if (defaultTheme === 'light' || defaultTheme === 'dark') {
    return defaultTheme;
  }

  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}