template customization 3

Third theme customization of a new Hugo site following initial setting.

It is an advancement of previous customizations, e.g. template customization 2 and template customization 1 .

1. Modify layouts/_default/baseof.html by adding following lines at the end in the <header> .. </header> block.

   {{ if .HasShortcode "blank/scatter" }}
     {{ partial "script/inner.html" . }}
     {{ partial "script/chartjs.html" . }}
   {{ end }}
   

2. Create layouts/partials/script/chart.js with following content.

3. Create layouts/partials/script/inner.js with following content.

4. Create layouts/shortcodes/scatter.html with following content.

   {{ $w := default "80" (.Get 0) }}
   {{ $h := default "300" (.Get 1) }}
   {{ $r := ( .Inner | chomp) }}
   {{ $seed := "foo" }}
   {{ $id := delimit (shuffle (split (md5 $seed) "" )) "" }}
   
   
       
   
   
   
   
   
   
   
   

Partials named inner.html and chartjs.html is included explicitly in baseof.html, which is template for a-post.md. Shortcodes named scatter (in scatter.html) is called inside a-post.md, where it requires inner.html and chartjs.html.

flowchart LR
  P1 & P2 --> B -.-> P
  S --> P
  P1 & P2 -.-> S
  B(["baseof.html"])
  P(["a-post.md"])
  S(["scatter.html"])
  P1(["inner.html"])
  P2(["chartjs.html"])

In above figure explicit inclusion uses solid line arrow (→) while implicit inclussion uses dashed line arrow (⇢).