hugo-theme-zzo/layouts/_default/single.html

{{ define "main" }}

<main class="single__main {{ if or ($.Param "enableToc") ($.Param "toc") }}{{ if $.Param "hideToc" }}main{{ else if eq ($.Param "tocPosition") "outer" }}main{{ else }}main-main{{ end }}{{ else }}main{{ end }}">
  {{ if $.Param "enableBreadcrumb" }}
    {{ partial "body/breadcrumb" . }}
  {{ end }}
  {{ if $.Param "hideSingleContentsWhenJSDisabled" }}
  <noscript>
    <div class="single__nojs">
      {{ i18n "nojs-message" }}
    </div>
  </noscript>
  {{ end }}
  <div class="single {{ if $.Param "hideSingleContentsWhenJSDisabled" }}hide{{ end }}">
    <div class="single__nojs">{{ i18n "nojs-message" }}</div>
    <script>document.querySelector('.single').classList.remove('hide'); document.querySelector('.single__nojs').classList.add('hide');</script>
    <h2 class="single__title" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ .Title }}</h2>
    <h3 class="single__subtitle">{{ .Params.subtitle }}</h3>
    <div class="single__meta">
      {{ partial "body/infos" . }}
      {{ partial "body/tags" . }}
    </div>
    <article class="single__contents" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
      {{ partial "body/toc" . }}
      {{ .Content }}
    </article>
    
    {{ partial "script/clipboard-script" . }}
    {{ partial "script/codeblock-script" . }}
    {{ partial "body/share" . }}
    {{ partial "body/donation" . }}
    {{ partial "body/whoami" . }}
    {{ partial "body/related" . }}
    {{ partial "pagination/pagination-single" . }}
    {{ partial "comments/comments.html" . }}
    {{ partial "body/photoswipe" . }}

    <div class="hide">
      {{ partial "search/site-search" . }}
    </div>
  </div>
</main>

{{ if and (or ($.Param "enableToc") ($.Param "toc")) (ne ($.Param "tocPosition") "outer") }}
<aside class="single__side {{ if or ($.Param "enableToc") ($.Param "toc") }}main-side{{ end }}">
  {{ partial "sidebar/sidebar-single" . }}
</aside>
{{ end }}
<script>
  {{ $enableToc:= $.Param "enableToc" }}
  {{ $toc:= $.Param "toc" }}
  {{ $tocPosition:= $.Param "tocPosition" }}

  var enableToc = JSON.parse({{ $enableToc | jsonify }});
  var toc = JSON.parse({{ $toc | jsonify }});
  var tocPosition = JSON.parse({{ $tocPosition | jsonify }});
  
  var singleMainElem = document.querySelector('.single__main');
  var singleSideElem = document.querySelector('.single__side');

  enquire.register("screen and (max-width: 769px)", {
    match: function () {
      if ((enableToc || toc) && tocPosition !== "outer") {
        if (singleMainElem && singleSideElem) {
          singleMainElem.classList.remove('main-main');
          singleMainElem.classList.add('main');
          singleSideElem.classList.remove('main-side');
          singleSideElem.classList.add('hide');
        }
      } else if (tocPosition === "outer") {
        if (singleMainElem && !singleMainElem.classList.contains('main-main')) {
          singleMainElem.classList.remove('main-main');
          singleMainElem.classList.add('main');
        }
        if (singleSideElem && !singleSideElem.classList.contains('hide')) {
          singleSideElem.classList.add('hide');
        }
      }
    },
    unmatch: function () {
      if ((enableToc || toc) && tocPosition !== "outer") {
        singleMainElem.classList.remove('main');
        singleMainElem.classList.add('main-main');
        singleSideElem.classList.remove('hide');
        singleSideElem.classList.add('main-side');
      } else if (tocPosition === "outer") {
        if (singleMainElem && !singleMainElem.classList.contains('main-main')) {
          singleMainElem.classList.remove('main-main');
          singleMainElem.classList.add('main');
        }
        if (singleSideElem && !singleSideElem.classList.contains('hide')) {
          singleSideElem.classList.add('hide');
        }
      }

      var navCollapseBtn = document.querySelector('.navbar__burger');
      var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
      if (navCollapse) {
        navCollapse.setAttribute('data-open', false);
        navCollapse.style.maxHeight = 0;
        navCollapseBtn.classList.remove('is-active');
      }
      document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
      document.getElementsByClassName('mobile-search')[0].classList.add('hide');
    },
    setup: function () { },
    deferSetup: true,
    destroy: function () { },
  });
</script>
{{ partial "script/single-script" . }}
{{ end }}