From 66bc366c4727a958f3873f409550daa36932c03f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Sun, 2 Feb 2025 14:00:21 +0100 Subject: [PATCH] theme: add compat way of including scripts #1009 Open --- .../customization/extending/_index.en.md | 14 ++++++++++++-- .../customization/extending/_index.pir.md | 2 +- docs/content/introduction/releasenotes/7/4.en.md | 4 ++++ layouts/partials/custom-header.html | 13 ++++++++----- layouts/partials/version.txt | 2 +- 5 files changed, 26 insertions(+), 9 deletions(-) diff --git a/docs/content/configuration/customization/extending/_index.en.md b/docs/content/configuration/customization/extending/_index.en.md index 33d17486b4..bf79897c42 100644 --- a/docs/content/configuration/customization/extending/_index.en.md +++ b/docs/content/configuration/customization/extending/_index.en.md @@ -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 `` 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. diff --git a/docs/content/configuration/customization/extending/_index.pir.md b/docs/content/configuration/customization/extending/_index.pir.md index 87bbd42f1c..238be98b0c 100644 --- a/docs/content/configuration/customization/extending/_index.pir.md +++ b/docs/content/configuration/customization/extending/_index.pir.md @@ -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 >}} \ No newline at end of file diff --git a/docs/content/introduction/releasenotes/7/4.en.md b/docs/content/introduction/releasenotes/7/4.en.md index 1fd8270054..888ab1bdad 100644 --- a/docs/content/introduction/releasenotes/7/4.en.md +++ b/docs/content/introduction/releasenotes/7/4.en.md @@ -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. diff --git a/layouts/partials/custom-header.html b/layouts/partials/custom-header.html index 2802632019..9408010828 100644 --- a/layouts/partials/custom-header.html +++ b/layouts/partials/custom-header.html @@ -1,5 +1,8 @@ - \ No newline at end of file + +{{- $assetBusting := partialCached "assetbusting.gotmpl" . }} +{{- if or (fileExists "static/css/custom.css") (fileExists "assets/css/custom.css") }} + +{{- end }} +{{- if or (fileExists "static/js/custom.js") (fileExists "assets/js/custom.js") }} + +{{- end }} \ No newline at end of file diff --git a/layouts/partials/version.txt b/layouts/partials/version.txt index 399183b26b..d9b271de97 100644 --- a/layouts/partials/version.txt +++ b/layouts/partials/version.txt @@ -1 +1 @@ -7.3.2+c0f6af2b423bb063ce6339883fb1e6e31b8df866 \ No newline at end of file +7.3.2+8b70bdf31acd361aacf17a0e775504551af67b83 \ No newline at end of file