support custom css and js files

README.md

@@ -18,7 +18,7 @@ An accessibility-friendly Hugo theme, ported from the [original Cupper](https://
 - [Syntax highlighting](#syntax-highlighting)
 - [Disable toc for a blog post](#disable-toc-for-a-blog-post)
 - [Localization](#localization)
-- [Custom css](#custom-css)
+- [Custom CSS and JS](#custom-css-and-js)
 - [Getting help](#getting-help)
 - [Credits](#credits)
 
@@ -92,11 +92,13 @@ The strings in the templates of this theme can be localized. Make a copy of `<TH
 
 [Here is a tutorial that goes more in depth about this.](https://regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
 
-## Custom css
+## Custom CSS and JS
 
-Instead of copying the theme's css file to your own installation and modifying this large file, you can provide a list of css files that will be loaded after the theme's one. This enables you to override individual style while getting theme updates when they come.
+You can provide an optional list of custom CSS files, which must be placed inside the `static` dir. These will load after the theme CSS loads. So, `static/css/custom_01.css` translates to `css/custom_01.css`.
 
-Please see the params section of the example site `config.yaml` for more details.
+You can provide an optional list of custom JS files, which must be placed inside the `static` dir. These will load after the theme JS loads. So, `static/js/custom_01.js` translates to `js/custom_01.js`.
+
+See the [example site config file](https://github.com/zwbetz-gh/cupper-hugo-theme/blob/master/exampleSite/config.yaml) for sample usage.
 
 ## Getting help
 

exampleSite/config.yaml

@@ -27,14 +27,12 @@ params:
   darkThemeAsDefault: false
   hideHeaderLinks: false
   search: true
-  # A list of custom css files can be provided, which must be placed inside
-  # 'static/'.
-  # This is useful to override just specific css classes, instead of copying
-  # the entire theme's css file to your own site.
-  # Usage:
-  # customCss:
-  #   - css/foo.css # relative path starting from static/
-  #- css/bar.css
+  customCss:
+    - css/custom_01.css
+    - css/custom_02.css
+  customJs:
+    - js/custom_01.js
+    - js/custom_02.js
 
 menu:
   nav:

exampleSite/static/css/custom_01.css

@@ -0,0 +1,3 @@
+.your-custom-class-01 {
+  display: block;
+}

exampleSite/static/css/custom_02.css

@@ -0,0 +1,3 @@
+.your-custom-class-02 {
+  display: block;
+}

exampleSite/static/js/custom_01.js

@@ -0,0 +1,3 @@
+const yourCustomFunction01 = (message) => {
+  console.log(message);
+};

exampleSite/static/js/custom_02.js

@@ -0,0 +1,3 @@
+const yourCustomFunction02 = (message) => {
+  console.log(message);
+};

layouts/partials/head.html

@@ -26,9 +26,9 @@
   {{ $styles := $templateStyles | resources.ExecuteAsTemplate "css/styles.css" . }}
   <link rel="stylesheet" type="text/css" href="{{ $styles.Permalink }}">
 
-  {{ range .Site.Params.customCss -}}
+  {{ range .Site.Params.customCss }}
     <link rel="stylesheet" href="{{ . | absURL }}">
-  {{- end }}
+  {{ end }}
 
   <style id="inverter" media="none">
     .intro-and-nav, .main-and-footer { filter: invert(100%) }

layouts/partials/script.html

@@ -10,3 +10,7 @@
 {{ $searchCss := resources.Get "css/search.css" | fingerprint }}
 <link rel="stylesheet" href="{{ $searchCss.RelPermalink }}"></link>
 {{ end }}
+
+{{ range .Site.Params.customJs }}
+  <script src="{{ . | absURL }}"></script>
+{{ end }}