Some Information and Tips for Developers

Here are some key things to note when dealing with the code of the website.

Handling Links

Similar to what has been mentioned on another Wiki page, all internal links should be properly handled:

<img src="{{ absURL "<your-image-filename>.jpg" }}">

CSS Files

They should be put in assets/ folder.

Import a CSS file by:

{{ with resources.Get "<your-css-filename>.css" | postCSS | minify }}
    <link rel="stylesheet" href="{{ .Permalink }}">
{{ end }}

HTML <---> CSS

Sometimes you need to dynamically set a CSS property in HTML. This is how it can be done:

In HTML,

<header class="masthead" style="--bg: url('{{ absURL "masthead.png" }}');">
    ...
</header>

In CSS,

header.masthead {
    --bg: '';

    background: ..., var(--bg);
    ...
}

postCSS

As you can see from the above, postCSS processes the CSS files before they are integrated into the HTML.

Currently, two plugins are configured in postcss.config.js:

• autoprefixer adds vendor prefixes to ensure the CSS styles are compatible with a wide range of browsers.
• purgecss helps keep CSS files lean and efficient by removing unused styles.

I use a valid Bootsrap class, but it has no effect.

minify removes unused CSS classes to optimise file size. If a Bootstrap class isn't used on any page of the website, it gets removed during minification.

If this happens to you, rerun your development server (e.g. npm run serve). The minifed file will be regenerated with the latest used classes, and everything should work fine then.

Mounting

If you would like to use an npm package, install it by running:

npm install thePackageName --save-dev

Then, in config.toml, mount the related folder(s) in node_modules/ to static/ folder. To apply the changes, you may need to restart the Hugo server.

An example of mounting Bootstrap:

[[module.mounts]]
source = "node_modules/bootstrap/dist"
target = "static/bootstrap"