Add support for page-specific extra scripts

The new front matter variable `page_scripts` allows to specify
javascript ressources to be loaded in sync or async mode.
This allows javascript code to be loaded, that is only required for a
small set of pages (e.g. showing a map or a slider animation).
This commit is contained in:
Lars Kruse 2020-06-15 04:41:55 +02:00
parent 9171519154
commit 08df330971
3 changed files with 24 additions and 1 deletions

View File

@ -146,6 +146,23 @@ If you add a key of `show_reading_time` true to either the Config Params, a page
Some scripts need to be added within the page head. To add your own scripts to the page head, simply insert them into the `head-additions.html` partial located in the `layouts/partials` folder. Some scripts need to be added within the page head. To add your own scripts to the page head, simply insert them into the `head-additions.html` partial located in the `layouts/partials` folder.
### Adding Scripts to Specific Pages
Some pages may require extra scripts (e.g. for showing a map or a slider animation).
These can be specified by setting the `page_scripts` value in the front matter.
Its keys `sync` and `async` may contain lists of script locations.
```
title: foo
page_scripts:
sync:
- /js/foo.js
- /js/bar.js
async:
- /js/baz.js
```
### Logo ### Logo
You can replace the title of your site in the top left corner of each page with your own logo. To do that put your own logo into the `static` directory of your website, and add the `site_logo` parameter to the site params in your config file. For example: You can replace the title of your site in the top left corner of each page with your own logo. To do that put your own logo into the `static` directory of your website, and add the `site_logo` parameter to the site params in your config file. For example:

View File

@ -52,6 +52,6 @@
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</main> </main>
{{ block "footer" . }}{{ partialCached "site-footer.html" . }}{{ end }} {{ block "footer" . }}{{ partialCached "site-footer.html" . }}{{ end }}
{{ block "scripts" . }}{{ partialCached "site-scripts.html" . }}{{ end }} {{ block "scripts" . }}{{ partialCached "site-scripts.html" . (default "" .Params.page_scripts) }}{{ end }}
</body> </body>
</html> </html>

View File

@ -2,3 +2,9 @@
{{ with $script.js }} {{ with $script.js }}
<script src="{{ relURL (printf "%s%s" "dist/" .) }}"></script> <script src="{{ relURL (printf "%s%s" "dist/" .) }}"></script>
{{ end }} {{ end }}
{{ range .Params.page_scripts.sync }}
<script src="{{ relURL (.) }}"></script>
{{ end }}
{{ range .Params.page_scripts.async }}
<script async src="{{ relURL (.) }}"></script>
{{ end }}