diff --git a/README.md b/README.md
index 621639a..7df135c 100644
--- a/README.md
+++ b/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"
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index e5476bc..70ae86b 100644
--- a/exampleSite/config.toml
+++ b/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"
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 16a7c5f..3fa8a71 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -24,14 +24,25 @@
- {{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") }}
-
+ {{- if isset .Site.Params "customcss" }}
+
{{ end }}
+ {{- if or (eq .Site.Params.mode "auto") (eq .Site.Params.mode "dark") -}}
+
+ {{- if isset .Site.Params "customdarkcss" }}
+
+ {{- 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) -}}
{{- else if (isset .Site.Params "social") -}}
- {{- end -}}
+ {{ end }}
+ {{- if isset .Site.Params "customjs" -}}
+ {{- range .Site.Params.customJS }}
+
+ {{- end }}
+ {{- end }}