diff options
author | Vivek R <vividvilla@gmail.com> | 2019-10-22 22:04:47 +0300 |
---|---|---|
committer | Vivek R <vividvilla@gmail.com> | 2019-10-22 22:04:47 +0300 |
commit | 1df516090c21652b7c1ef705c6cf59e56bb15ba5 (patch) | |
tree | 27e9aa0b2aede04b5052e47813f882bf9ff50c87 | |
parent | fd80089ceba1e703b60a34fd4b0255181b2d1739 (diff) |
feat: load custom CSS and JSfeat-custom-css-js
-rw-r--r-- | README.md | 17 | ||||
-rw-r--r-- | exampleSite/config.toml | 3 | ||||
-rw-r--r-- | layouts/partials/header.html | 19 |
3 files changed, 35 insertions, 4 deletions
@@ -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 @@ <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> |