mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-02-12 06:43:30 +00:00
parent
8b70bdf31a
commit
66bc366c47
5 changed files with 26 additions and 9 deletions
|
@ -2,7 +2,7 @@
|
|||
categories = ["explanation", "howto"]
|
||||
description = "Add further code to your site"
|
||||
options = ["relearn.dependencies"]
|
||||
title = "Extending Scripts"
|
||||
title = "Adding Scripts"
|
||||
weight = 2
|
||||
+++
|
||||
|
||||
|
@ -10,10 +10,20 @@ A common question is how to add extra CSS styles or JavaScript to your site. Thi
|
|||
|
||||
## Adding JavaScript or Stylesheets to All Pages
|
||||
|
||||
To add JavaScript files or CSS stylesheets to every page, you can include them in `layouts/partials/custom-header.html` or `layouts/partials/custom-footer.html`.
|
||||
### Simple Solution
|
||||
|
||||
Previous documentation of Hugo recommended adding `css/custom.css` and/or `js/custom.js` to your `static` or `assets` directory. This is supported by the theme.
|
||||
|
||||
To gain more flexibility, see the [next section](#flexible-solution) below.
|
||||
|
||||
### Flexible Solution
|
||||
|
||||
To add CSS stylesheets, JavaScript files or any other addition to the `<head>` of every page, you can include them in `layouts/partials/custom-header.html` or `layouts/partials/custom-footer.html`.
|
||||
|
||||
However, this can make your site larger than necessary if these files are only needed on a few pages. The next section explains how to add dependencies only when needed.
|
||||
|
||||
This way of customization will discard the mechanism for the [simple solution](#simple-solution) above. You will have to add code for inclusion of `css/custom.css` and/or `js/custom.js` yourself if you still need this.
|
||||
|
||||
## Custom Shortcodes with Dependencies
|
||||
|
||||
Some shortcodes need extra JavaScript and CSS files. The theme only loads these when the shortcode is used. You can use this for your own shortcodes too.
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
categories = ["explanation", "howto"]
|
||||
description = "Add further code to your site"
|
||||
options = ["relearn.dependencies"]
|
||||
title = "Extending Scripts"
|
||||
title = "Adding Scripts"
|
||||
weight = 2
|
||||
+++
|
||||
{{< piratify >}}
|
|
@ -18,4 +18,8 @@ weight = -4
|
|||
|
||||
You can see this in action on the above linked page, accessible by clicking the {{% button style="transparent" icon="file-code" %}}{{% /button %}} topbar button.
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} If you haven't overridden `layouts/partials/custom-header.html` and `css/custom.css` and/or `js/custom.js` is present in your project, the theme now adds them to your pages.
|
||||
|
||||
This was done to be compatible with adding custom scripts in an older version of the Hugo documentation.
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Table headers are sticky now.
|
||||
|
|
|
@ -1,5 +1,8 @@
|
|||
<!-- Partial intended to be overwritten to add custom headers, like CSS or any other info
|
||||
<style>
|
||||
/* Custom css */
|
||||
</style>
|
||||
-->
|
||||
<!-- compat way of adding custom scripts in old Hugo documentation -->
|
||||
{{- $assetBusting := partialCached "assetbusting.gotmpl" . }}
|
||||
{{- if or (fileExists "static/css/custom.css") (fileExists "assets/css/custom.css") }}
|
||||
<link href="{{"css/custom.css" | relURL}}{{ $assetBusting }}" rel="stylesheet">
|
||||
{{- end }}
|
||||
{{- if or (fileExists "static/js/custom.js") (fileExists "assets/js/custom.js") }}
|
||||
<script src="{{"js/custom.js" | relURL}}{{ $assetBusting }}" defer></script>
|
||||
{{- end }}
|
|
@ -1 +1 @@
|
|||
7.3.2+c0f6af2b423bb063ce6339883fb1e6e31b8df866
|
||||
7.3.2+8b70bdf31acd361aacf17a0e775504551af67b83
|
Loading…
Add table
Reference in a new issue