ask/ezhil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #26 from vividvilla/feat-custom-css-js

Browse Source 
feat: load custom CSS and JS
This commit is contained in:
Vivek R 2019-10-23 00:38:39 +05:30 committed by GitHub
commit a7eca2baeb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
README.md
View File

@ -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"

3
exampleSite/config.toml
View File

@ -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"

19
layouts/partials/header.html
View File

@ -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>