feat: load custom CSS and JSpull/2/head
@@ -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" |
@@ -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" |
@@ -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> |