How to add a custom css and js file with the new theme (hugo modules)

[saul-sl]

Hi,
At the beginning of the year I created a blog using toha theme. Back then, I placed the theme files in a theme folder (ref) and some custom css and js files inside the static/css and static/js folders (ref-1 and ref-2). Basically, they require to add the files on the mentioned location and edit the config.yaml file,

custom_css : css/style.css
custom_js : js/custom.js

However, with the new version of toha theme (currently trying commit: 2c32a26d220702b31dd52631bbfa8e9ab961ac19), if I include those lines I get an error like the following

render: failed to render pages: render of "page" failed: �[1;36m"/home/saul/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/hugo-toha/toha/[email protected]/layouts/_default/baseof.html:47:7"�[0m: execute of template failed at <partial "scripts.html" .>: error calling partial: �[1;36m"/home/saul/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/hugo-toha/toha/[email protected]/layouts/partials/scripts.html:1:3"�[0m: execute of template failed at <partial "helpers/script-bundle.html">: �[1;36m"/home/saul/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/hugo-toha/toha/[email protected]/layouts/partials/helpers/script-bundle.html:1:16"�[0m: execute of template failed at <partial "helpers/get-esbuild-options.html">: �[1;36m"/home/saul/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/hugo-toha/toha/[email protected]/layouts/partials/helpers/get-esbuild-options.html:161:36"�[0m: execute of template failed at <.services>: can’t evaluate field services in type string

So, how can I include a custom css/js files with this new version, thanks

P.S. On a related matter, I noticed that with the new version there is no layout folder anymore. Where do custom shortcodes should be placed?

[cosmin-aron]

I had the same issue with custom CSS since migrating to V4. Unfortunately this has not been documented yet, but you can take a look at the toha repo to see how it works. Essentially you need to create an override.scss file in your assets folder like this:

├── assets
    ├── styles
        ├── override.scss

Hope this solves at least part of your problem. For me the old custom CSS did not produce any errors but had no effect either (because it was in the static folder). So I think in your case the custom js causes the errors.

[hossainemruz]

Thank you @cosmin-aron. I will write a doc for it soon. I am tracking the progress in this issue: #846

[hossainemruz]

Added CSS customization guide here:
https://toha-guides.netlify.app/posts/customizing/customize-css/

[juan11iguel]

Hi! I wonder how can one customize/add more layouts with the new approach?

This (I assume outdated) guide suggested modifying the files from the layouts folder from the theme, but that's not possible anymore.

I wonder if the following approach would be reasonable. From the docs it is stated:

5. Add the theme as a module

Now, add the following module section in your config.yaml file. This will add the theme as a module and also mount the static files from the theme.

# Use Hugo modules to add theme
module:
  imports:
  - path: github.com/hugo-toha/toha/v4
  mounts:
  - source: static/files
    target: static/files
  - source: ./node_modules/flag-icon-css/flags
    target: static/flags
  - source: ./node_modules/@fontsource/mulish/files
    target: static/files
  - source: ./node_modules/katex/dist/fonts
    target: static/fonts 

Shoud we fork the hugo-toha repo, modify it (layouts, assets/styles) and in the modules imports replace the original repo by the fork?

Congratulations on the project!

[hossainemruz]

You don't have to modify the theme layouts. Instead, copy the respective file into similar directory of your repo. Modify it. Hugo will first search for the file in your repo. If does not exist, then it will look for the file in the theme.

https://toha-guides.netlify.app/posts/customizing/customize-layout/