feat: load custom CSS and JS

README.md

@@ -21,6 +21,7 @@ Clean and minimal personal blog and portfolio theme for Hugo.
 * Twitter cards and opengraph tags support
 * Disqus comments
 * Hugo RSS feeds
+* Custom CSS/JS
 
 ## Installation
 
@@ -59,18 +60,34 @@ paginate = 10
 [params]
     # Blog subtitle which appears below blog title. Supports markdown.
     subtitle = "Clean and minimal personal [blog theme for Hugo](https://github.com/vividvilla/ezhil)"
+
     # Content types which are included in home page recent posts list.
     mainSections = ["posts"]
+
     # Content types which are excludes Disqus comments.
     disableDisqusTypes = ["page"]
+
     # If social media links are enabled then enable this to fetch icons from CDN instead of hosted on your site.
     featherIconsCDN = true
+
     # Specify favicon (icons/i.png maps to static/icons/i.png). No favicon if not defined.
     favicon = "icons/myicon.png"
+
     # Switch to dark mode or auto detect mode from OS (Optional).
     # "dark" will set mode to dark and "auto" will switch to dark mode if OS is in dark mode.
     mode = "dark" # "dark" or "auto"
 
+    # Custom CSS added to default styles. Files added to `static` folder is copied as it is to
+    # root by Hugo. For example if you have custom CSS file under `static/css/custom.css` then
+    # you can specify custom css path as `css/custom.css`.
+    customCSS = "css/custom.css"
+    # Custom CSS added to dark mode style.
+    customDarkCSS = "css/custom-dark.css"
+
+    # Custom list of Javascript files to load. Just like custom CSS you can place js files under
+    # `static/js` folder and specify path here as `js/script-name.js`.
+    customJS = ["js/abc.js", "js/xyz.js"]
+
 # Main menu which appears below site header.
 [[menu.main]]
 name = "Home"

exampleSite/config.toml

@@ -18,6 +18,9 @@ disqusShortname = "ezhil-demo"
 	disableDisqusTypes = ["page"]
 	featherIconsCDN = true
 	mode = "auto" # "dark" or "auto"
+	# customCSS = "css/custom.css"  # Custom CSS applied to default styles.
+	# customDarkCSS = "css/custom-dark.css"  # Custom styles applied to dark mode css.
+	# customJS = ["js/custom.js", "js/custom1.js"]  # Custom JS scripts.
 
 [[menu.main]]
 name = "Home"

layouts/partials/header.html

@@ -24,14 +24,25 @@
 
 	<link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/normalize.css" />
 	<link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/main.css" />
-	{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") }}
-	<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
+	{{- if isset .Site.Params "customcss" }}
+	<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customCSS }}" />
 	{{ end }}
+	{{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}}
+	<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/dark.css" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
+	{{- if isset .Site.Params "customdarkcss" }}
+	<link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}{{ .Site.Params.customDarkCSS }}" {{ if eq .Site.Params.mode "auto" }}media="(prefers-color-scheme: dark)"{{ end }} />
+	{{- end }}
+	{{- end }}
 
-	{{- if and (isset .Site.Params "social") (isset .Site.Params "feathericonscdn") (eq .Site.Params.featherIconsCDN true) -}}
+	{{ if and (isset .Site.Params "social") (isset .Site.Params "feathericonscdn") (eq .Site.Params.featherIconsCDN true) -}}
 	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 	{{- else if (isset .Site.Params "social") -}}
 	<script src="{{ .Site.BaseURL }}js/feather.min.js"></script>
-	{{- end -}}
+	{{ end }}
 	<script src="{{ .Site.BaseURL }}js/main.js"></script>
+	{{- if isset .Site.Params "customjs" -}}
+	{{- range .Site.Params.customJS }}
+	<script src="{{ $.Site.BaseURL }}{{ . }}"></script>
+	{{- end }}
+	{{- end }}
 </head>