`. You can place them freely within your string and they will be replaced with the content they refer to.

You may also use this feature to translate the theme into different languages. In this case you should also set the lang key to your config file, e.g.

# file: `_config.yml`
lang: cc-ll

where cc is the 2-letter country code and ll specifies a 2-letter location code, e.g.: de-at.

You may also change the strings used for formatting dates and times (look out for the date_formats key), but be aware that the values you provide need to be valid Ruby format directives.

If you have pages for contact data, privacy policy, cookie policy, etc. you can add links to them in the footer by listing them under the legal key in your config file as follows:

# file: `_config.yml`
legal:
  - title: Impress
    url:  /impress/
  - title: Cookies Policy
    url:  /cookies-policy/

When using Hydejack’s offline feature, the pages listed here will be downloaded and cached when loading the page for the first time.

Enabling math blocks

Hydejack supports math blocks with either KaTeX or MathJax.

The MathJax implementation comes with a client-side runtime and works on GitHub Pages. It is the more heavy-weight of the two and doesn’t work without JavaScript enabled. Due to the size of the complete MathJax package, it only works partially with offline support enabled.

The KaTeX implementation pre-renders the KaTeX output during site building. It’s more lightweight because it does not ship a client-side runtime and therefore works without JavaScript. In my opinion, it is the more elegant solution, but it requires a JavaScript runtime on the machine that builds the site, i.e. it does not work on GitHub Pages.

You can switch between the two implementations by changing the kramdown.math_engine key to either katex or mathjax in your config file.

# file: `_config.yml`
kramdown:
  math_engine:         katex
  math_engine_opts:    {}

The KaTeX implementation also requires the kramdown-math-katex gem in your Gemfile. If you intend to use MathJax instead, this step is not required.

# file: `Gemfile`
gem "kramdown-math-katex"

There are a couple of things to know about this gem:

  • It is not supported on GitHub Pages. You have to build the site on your machine before uploading to GitHub, or use a more permissive cloud building tool such as Netlify.
  • You need some kind of JavaScript runtime on your machine. Usually installing NodeJS will suffice. Alternatively, adding gem "duktape" will also do. For more, see https://github.com/kramdown/math-katex#documentation

Before you add math content, remember to run bundle install and restart Jekyll.

Adding custom Favicons and App Icons

Changing the Favicon

By default, Hydejack will use the Favicon from /assets/icons/favicon.ico and Apple Touch Icon from /assets/icons/icon-192x192.png. You can either override these files, or override the path in the config file via favicon and app_touch_icon keys:

# file: "_config.yml"
favicon: /favicon.ico
apple_touch_icon: /assets/img/logo.png

Changing the App Icons

By default, Hydejack includes its own favicon, as well as app icons in 8 different resolutions.

Name Resolution
icon-512x512.png 512x512
icon-384x384.png 384x384
icon-192x192.png 192x192
icon-152x152.png 152x152
icon-144x144.png 144x144
icon-128x128.png 128x128
icon-96x96.png 96x96
icon-72x72.png 72x72

To change the default icons you have to replce all of them. To make this manageable, I recommend using the following tools:

First, use the Maskable.app Editor to confine your logo/picture to the “minimum safe area”. More on maskable app icons, see this article on web.dev. Make sure the base image is at least 512x512 pixels in size.

Then use the Web App Manifest Generator to automatically resize the icons. Upload the icon downloaded from Maskable.app and then click “Generate .zip”. In the zip, ignore the manifest.json and look for the icons folder. Copy it into the assets folder of your site.

To change the favicon, place your own favicon.ico (32x32, PNG) into assets/icons.

Adding a cookies banner*

# file: `_config.yml`
hydejack:
  cookies_banner: true

Enabling this setting will show a notice at the top of the page to new visitors. You can change the wording of the notice in _data/strings.yml with the cookies_banner.text and cookies_banner.okay keys:

# file: `_data/strings.yml`
cookies_banner:
  text: This site uses cookies. [Markdown allowed](/cookies-policy/)!
  okay: Okay

Enabling newsletter boxes*

If want to use a different mailing provider you can build your own form, and insert it into _includes/my-newsletter.html. The file includes an example form for MailChimp, where you need to fill in site.mailchimp.action and site.mailchimp.hidden_input (you can get these from MailChimp).

To build a completely new from, you can use the same CSS classes as Bootstrap. Note that only form, grid and utility classes are available. Check out Forms by Example for more examples.

Enabling Dark Mode

Dark mode can be enabled in config.yml under the hydejack key and has three settings and two adjustments:

# file: `_config.yml`
hydejack:
  dark_mode:
    dynamic: true
    icon:    true
    always:  false

Setting dynamic will enable dark mode based on the client’s device setting, as expressed by the prefer-color-scheme CSS media query.

Setting icon will show a switch to alternate between the light and dark mode at the top of the page.

Finally, setting always will cause dark mode to become the default theme at all times (combine with dynamic: false).

Older versions of Hydejack allowed enabling dark mode based on local time. These settings continue to work, but are no longer recommended.

Continue with Basics