-
Notifications
You must be signed in to change notification settings - Fork 66
External CSS and JS
Utkarsh Verma edited this page Jan 11, 2019
·
8 revisions
You can freely and fully customize Dream Plus by using your own CSS and JS files externally. It's quite easy and convenient.
To use this feature, do the following:
- Place your external CSS or JS within the
static/css
orstatic/js
directory of your Hugo site folder respectively. If you're too lazy to do that, skip this step and simply load them from the internet.
They shouldn't necessarily be in the
js
orcss
folders since their paths will be specified in the next step. Ignore this if loading CSS/JS from the internet.
- Specify where your external files are through the
customCSS
orcustomJS
config variables(inconfig.toml
) infeatures
table underparams
. The paths should be absolutely defined. For example:
[params.features]
#Loading off of `static` folder
customCSS = ["/css/dracula.css"]
customJS = ["/js/twemoji.min.js"]
#Loading from the internet
customCSS = ["https://......."]
customJS = ["https://........"]
Loading CSS/JS from GitHub as a raw file fails in some cases, to fix this use RawGit for hosting the file with proper content-type headers.
That's it. After doing this, your externally provided files will be loaded before the </BODY>
tag.
On a side note, the JS files will be loaded after jQuery
and Semantic UI
so their functions can be used in your external JS file.