Can someone explain preload block purpose?

I am looking at block “preload” on line #1 here:

and then it is used in main index.html file here:

and I just understand what author is trying to accomplish.

Can someone explain the importance of loading into .Scratch of key “paginator”.

I also don’t understand the importance of empty {{with .Content}} block

{{ block “preload” . }}
{{ with .Content }}{{ end }}
{{ end }}

It is repeated in index. one more time.

I based my code on this project and I am about to get rid of all of the code I don’t understand :slight_smile:

Thank you

Hi,

You can read about pagination here, and base layouts here.

My guess for the empty with block is that it is being used as a placeholder in the base template, to be overridden in the index layout. But that is just my guess. My suggestion would be to ask the author directly, as it is their code.

1 Like

I removed this code and saw no difference in produced output on pages other than /index.html.

I rewrote the /index.html file, so it does not really matter.

I fully understand concept of base template and used pagination as well without the “preload”.

I use meta preload to speed up the photo pages. The home page gives the browser the hint to preload some CSS and scripts. Must update my reply - network dropped

this is baseof.html

<head>
{{ partial "meta" . }}
{{if (or (eq .Type "photo") .IsHome )}}{{ partial "meta-photo" . }}{{end}}
</head>
<body id="top" class="athelas" >
<div class="flex-l">
    {{ partial "header" . }}
    <div id="main" class="db pl2 pl4-ns pb4 w-100-l h-100">
    {{ block "main" . }}{{ end }}
    {{ partial "footer" . }}
    </div>
</div>
</body>
</html>

The used CSS is tachions.io

this is my layout/partials/photo-meta.html

{{ if .IsHome }}
   <link rel=preload as=script href=https://code.jquery.com/jquery-3.3.1.min.js />
   <link rel=preload as=style  href=https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css />
   <link rel=preload as=script href=https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js />
{{else}}
   <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
   <link rel=stylesheet href=https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css />
   <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
{{end}}

Hi, I made the template you are referencing. I used a preload block to force loading the shortcodes that will appear on a page before anything else. This way, shortcodes are able to add CSS and JS files to a .Scratch variable, and I can use this variable to create links to these files in the HTML head. I used the “with” function to load the shortcodes without actually rendering them.

The main reason why I wanted this behaviour is to be able to use the uniq function to avoid duplicating CSS when the same shortcode is included several time in a single page.

If you do not plan to include CSS and JS files with shortcodes, it is totally okay to remove this code! :slightly_smiling_face:

With the meta-preload the browser loads the page and after it he can load the suggestions. This is no brake in the index page. After following a link to a page using this scripts ot css files, the browser has this information in cache. Depending on the network speeds this can speed up the following ~ (parts of) a second.
My preloaded files have a size of 300k, you can calculate it with your network speed.

1 Like