nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

theme: optimize loading of js and css #303

Browse source
This commit is contained in:
Sören Weber 2022-07-08 00:10:17 +02:00
parent a74ec4d6f8
commit 34f316d59e
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
7 changed files with 70 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
exampleSite/content/basics/migration/_index.en.md
View file

@ -16,6 +16,12 @@ This document shows you what's new in the latest release. For a detailed list of
## 5.0.0
- **Breaking**: The theme changed how JavaScript and CSS dependencies are loaded to provide a better performance. In case you've added own JavaScript code that depends on the themes jQuery implementation, you have to put it into a separate `*.js` file (if not already) and add the `defer` keyword to the `script` element. Eg.
````html
<script defer src="myscript.js"></script>
````
- **Change**: The way [archetypes]({{% relref "cont/archetypes" %}}) are used to generate output has changed. The new systems allows you, to redefine existing archetypes or even generate your own ones.
Your existing markdown files will still work like before and therefore you don't need to change anything after the upgrade. Nevertheless, it is recommended to adapt your existing markdown files to the new way as follows:

2
exampleSite/layouts/partials/menu-footer.html
View file

@ -18,4 +18,4 @@
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn" data-icon="octicon-star" data-show-count="true" aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
<p>Built with <a href="https://github.com/McShelby/hugo-theme-relearn"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
<script async defer src="{{"js/buttons.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script async src="{{"js/buttons.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>

22
layouts/partials/footer.html
View file

@ -4,9 +4,9 @@
{{- partial "custom-comments.html" . }}
</div><!-- #body -->
{{- partial "menu.html" . }}
<script src="{{"js/clipboard.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/perfect-scrollbar.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/featherlight.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/clipboard.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/perfect-scrollbar.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/featherlight.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
{{- $wantsMathJax := or (and (eq (.Scratch.Get "relearnOutputFormat") "HTML") (.Page.Store.Get "htmlHasMathJax")) (and (eq (.Scratch.Get "relearnOutputFormat") "PRINT") (.Page.Store.Get "printHasMathJax")) }}
{{- if $wantsMathJax }}
{{- if isset .Params "mathjaxinitialize" }}
@ -50,13 +50,13 @@
{{- end }}
{{- $wantsMermaid := or (and (eq (.Scratch.Get "relearnOutputFormat") "HTML") (.Page.Store.Get "htmlHasMermaid")) (and (eq (.Scratch.Get "relearnOutputFormat") "PRINT") (.Page.Store.Get "printHasMermaid")) }}
{{- if $wantsMermaid }}
<script src="{{"js/jquery.svg.pan.zoom.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/jquery.svg.pan.zoom.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
{{- if isset .Params "custommermaidurl" }}
<script src="{{ .Params.customMermaidURL }}"></script>
<script src="{{ .Params.customMermaidURL }}" defer></script>
{{- else if isset .Site.Params "custommermaidurl" }}
<script src="{{ .Site.Params.customMermaidURL }}"></script>
<script src="{{ .Site.Params.customMermaidURL }}" defer></script>
{{- else }}
<script src="{{"js/mermaid.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/mermaid.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
{{- end }}
{{- if isset .Params "mermaidinitialize" }}
{{- $.Scratch.Set "mermaidInitialize" .Params.mermaidInitialize }}
@ -81,11 +81,11 @@
{{- $wantsSwagger := or (and (eq (.Scratch.Get "relearnOutputFormat") "HTML") (.Page.Store.Get "htmlHasSwagger")) (and (eq (.Scratch.Get "relearnOutputFormat") "PRINT") (.Page.Store.Get "printHasSwagger")) }}
{{- if $wantsSwagger }}
{{- if isset .Params "customswaggerurl" }}
<script src="{{ .Params.customSwaggerURL }}"></script>
<script src="{{ .Params.customSwaggerURL }}" defer></script>
{{- else if isset .Site.Params "customswaggerurl" }}
<script src="{{ .Site.Params.customSwaggerURL }}"></script>
<script src="{{ .Site.Params.customSwaggerURL }}" defer></script>
{{- else }}
<script src="{{ "js/rapidoc-min.js" | relURL }}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{ "js/rapidoc-min.js" | relURL }}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
{{- end }}
{{- if isset .Params "swaggerinitialize" }}
{{- $.Scratch.Set "swaggerInitialize" .Params.swaggerInitialize }}
@ -104,7 +104,7 @@
useSwagger( JSON.parse({{ $.Scratch.Get "swaggerInitialize" }}) );
</script>
{{- end }}
<script src="{{"js/theme.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/theme.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}" defer></script>
{{- partial "custom-footer.html" . }}
</body>
</html>

12
layouts/partials/search.html
View file

@ -20,12 +20,12 @@
<script>
var contentLangs=[{{ delimit $quotedcontentlangs ", " | safeJS }}];
</script>
<script src="{{"js/auto-complete.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/lunr.min.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/lunr.stemmer.support.min.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/lunr.multi.min.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/auto-complete.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/lunr.min.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/lunr.stemmer.support.min.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" defer></script>
<script src="{{"js/lunr.multi.min.js" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" defer></script>
{{- range $contentlangs }}
{{- $file := (printf "js/lunr.%s.min.js" .) }}
<script src="{{ $file | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{ $file | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" defer></script>
{{- end }}
<script src="{{ "js/search.js" | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{ "js/search.js" | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" defer></script>

12
layouts/partials/stylesheet.html
View file

@ -1,9 +1,11 @@
{{- $assetBusting := not .Site.Params.disableAssetsBusting }}
<link href="{{"css/nucleus.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/fontawesome-all.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/featherlight.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
<link href="{{"css/fontawesome-all.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;">
<link href="{{"css/featherlight.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;">
<link href="{{"css/auto-complete.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;">
<link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/auto-complete.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/nucleus.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
<link href="{{"css/fonts.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;">
<link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
{{- $themevariants := slice | append (.Site.Params.themeVariant | default "relearn-light" ) }}
{{- with index $themevariants 0 }}
@ -32,4 +34,4 @@
{{- end }}
variants.init( [ {{ delimit $quotedthemevariants ", " | safeJS }} ] );
</script>
<script src="{{"js/jquery.min.js"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/jquery.min.js"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" defer></script>

39
static/css/fonts.css Normal file
View file

@ -0,0 +1,39 @@
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 200;
src: url("../fonts/WorkSans-ExtraLight.woff") format("woff2"), url("../fonts/WorkSans-ExtraLight.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 300;
src: url("../fonts/WorkSans-Light.woff2") format("woff2"), url("../fonts/WorkSans-Light.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
src: url("../fonts/WorkSans-Regular.woff2") format("woff2"), url("../fonts/WorkSans-Regular.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 500;
src: url("../fonts/WorkSans-Medium.woff2") format("woff2"), url("../fonts/WorkSans-Medium.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 600;
src: url("../fonts/WorkSans-Bold.woff2") format("woff2"), url("../fonts/WorkSans-Bold.woff") format("woff");
font-display: swap;
}

40
static/css/theme.css
View file

@ -3,46 +3,6 @@
@import "tags.css";
@import "tabs.css";
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 200;
src: url("../fonts/WorkSans-ExtraLight.woff") format("woff2"), url("../fonts/WorkSans-ExtraLight.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 300;
src: url("../fonts/WorkSans-Light.woff2") format("woff2"), url("../fonts/WorkSans-Light.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 400;
src: url("../fonts/WorkSans-Regular.woff2") format("woff2"), url("../fonts/WorkSans-Regular.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 500;
src: url("../fonts/WorkSans-Medium.woff2") format("woff2"), url("../fonts/WorkSans-Medium.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 600;
src: url("../fonts/WorkSans-Bold.woff2") format("woff2"), url("../fonts/WorkSans-Bold.woff") format("woff");
font-display: swap;
}
html {
width: 100%;
height: 100%;