Hugo Book Themeに「数式表示」「コードブロックコピー時のトースト通知表示」「カラーテーマ変更ボタン」「目次表示切り替えボタン」を追加するパーシャルレイアウト。

body.html

{{ define "katex-stylesheet" }}
{{ if .Params.katex }}
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
  integrity="sha384-ZPe7yZ91iWxYumsBEOn7ieg8q/o+qh/hQpSaPow8T6BwALcXSCS6C6fSRPIAnTQs"
  crossorigin="anonymous"
/>
<link 
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/copy-tex.css" 
  rel="stylesheet" 
  type="text/css"
/>
{{ end }}
{{ end }}

{{ define "katex-javascript" }}
{{ if .Params.katex }}
<script
  defer
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
  integrity="sha384-ljao5I1l+8KYFXG7LNEA7DyaFvuvSCmedUf6Y6JI7LJqiu8q5dEivP2nDdFH31V4"
  crossorigin="anonymous"
></script>
<script
  defer
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"
  integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR"
  crossorigin="anonymous"
></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
      renderMathInElement(document.body, {
        strict:false,
        delimiters: [
          {left: "$$", right:"$$", display: true},  
          {left: "\\(", right:"\\)", display: false},
          {left: "\\begin{equation}", right: "\\end{equation}", display: true},
          {left: "\\begin{align}", right: "\\end{align}", display: true},
          {left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
          {left: "\\begin{gather}", right: "\\end{gather}", display: true},  
          {left: "\\begin{CD}", right: "\\end{CD}", display: true},
          {left: "$", right: "$", display: false}
        ],
        ignoredTags: ["script","noscript","style","textarea","pre","code","option"]});
      });
</script>
<script 
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/copy-tex.min.js" 
  integrity="sha384-Ep9Es0VCjVn9dFeaN2uQxgGcGmG+pfZ4eBaHxUpxXDORrrVACZVOpywyzvFRGbmv" 
  crossorigin="anonymous"
></script>
{{ end }}
{{ end }}

{{ define "display-toast" }}
{{ if .Params.displayToast }}
<script>
  (()=>{function changeColor(toast, message) {
    const theme = getComputedStyle(document.documentElement).getPropertyValue('--body-background');
    if (theme === 'white') {
      message.style.color = 'rgba(0, 0, 0, 0.75)';
      toast.style.border = "0.15em solid rgba(0, 0, 0, 0.75)";
      
    } else {
      message.style.color = 'rgba(255, 255, 255, 0.75)';
      toast.style.border = "0.15em solid rgba(255, 255, 255, 0.75)";
    }
    return toast,message;
  }
  function addToast() {
    let toast = document.createElement('div');
    toast.className = 'toast';
    document.body.append(toast);
    let message = document.createElement('p');
    message.textContent = "Copied to clipboard!";
    toast, message = changeColor(toast, message);
    toast.appendChild(message);
    return toast;
  }
  const highlights = document.querySelectorAll("div.highlight");
  highlights.forEach(div => {
    div.addEventListener("click", ()=>{
      const toast = addToast();
      toast.classList.add("fadeIn");
      setTimeout(function() {
        toast.classList.add("fadeOut");
        setTimeout(function() {
          toast.remove();
        }, 500);
      }, 1500);
    });
  });})();
</script>
{{ end }}
{{ end }}
{{ define "display-toast-stylesheet" }}
{{ if .Params.displayToast }}
<style>
  .fadeIn{
      animation-name:fadeInAnime;
      animation-duration:0.5s;
      animation-fill-mode:forwards;
      opacity:0;
  }
  
  @keyframes fadeInAnime{
      from {
          opacity: 0;
          transform: translateY(100px);
      }
  
      to {
          opacity: 1;
          transform: translateY(0);
      }
  }
  .fadeOut{
      animation-name:fadeOutAnime;
      animation-duration:0.8s;
      animation-fill-mode:forwards;
      opacity:0;
  }
  
  @keyframes fadeOutAnime{
      from {
          opacity: 1;
          transform: translateY(0px);
      }
  
      to {
          opacity: 0;
          transform: translateY(100px);
      }
  }
  .toast {
      display: flex;
      height: 3em;
      width: 15em;
      border-radius: 0.4em;
      z-index: 999;
      position: fixed;
      bottom: 1em;
      right: 5em;
  }
  .toast > p {
      margin: 0.8em auto 1em;
      font-family: Monaco, Consolas, 'Courier New', Courier, monospace;
      font-size: 1em;
      font-weight: bold;
      margin-left: auto;
      margin-right: auto;
  }
</style>
{{ end }}
{{ end }}
{{ block "display-toast" . }}{{ end }}

{{ define "toggle-theme" }}
{{ if .Params.toggleTheme }}
<script>
  (()=> {const dark_theme = {
    '--gray-100': 'rgba(255, 255, 255, 0.1)',
    '--gray-200': 'rgba(255, 255, 255, 0.2)',
    '--gray-500': 'rgba(255, 255, 255, 0.5)',
    '--color-visited-link': '#62a8fc',
    '--color-link': '#62a8fc',
    '--body-font-color': '#e9ecef',
    '--body-background': '#343a40',
    }
  const light_theme = {
    '--gray-100': '#f8f9fa',
    '--gray-200': '#e9ecef',
    '--gray-500': '#adb5bd',
    '--color-visited-link': '#0055bb',
    '--color-link': '#0055bb',
    '--body-font-color': '#black',
    '--body-background': 'white',
  }

  const themeButton = document.createElement('div');
  themeButton.className = 'theme-button';
  themeButton.innerHTML= '<i class="fa-solid fa-circle-half-stroke"></i>';
  themeButton.addEventListener("click", ()=>{
    const theme = getComputedStyle(document.documentElement).getPropertyValue('--body-background');
    if (theme === 'white') {
      Object.entries(dark_theme).forEach(([key, value]) => {
        document.documentElement.style.setProperty(key, value);
      });
    } else {
      Object.entries(light_theme).forEach(([key, value]) => {
        document.documentElement.style.setProperty(key, value);
      });
    }
  });
  const menu = document.querySelector('.book-menu');
  const menuTitle = menu.querySelector('span');
  menuTitle.parentNode.removeAttribute('href');
  menuTitle.parentNode.style.justifyContent = "space-between";
  menuTitle.setAttribute('href','/');
  menuTitle.parentNode.appendChild(themeButton);})();
</script>
{{ end }}
{{ end }}

{{ define "toggle-theme-stylesheet" }}
{{ if .Params.toggleTheme }}
<script 
  src="https://kit.fontawesome.com/<FONTAWESOME_KIT_ID>.js" 
  crossorigin="anonymous"
></script>
{{ end }}
{{ end }}
{{ block "toggle-theme" . }}{{ end }}

{{ define "toggle-toc" }}
{{ if .Params.toggleToc }}
<script>
  (()=>{const tocButton = document.createElement('div');
  tocButton.className = 'toc-button';
  tocButton.innerHTML= '<i class="fa-solid fa-list-ul"></i>';
  tocButton.addEventListener("click", ()=>{
    const toc = document.querySelector('.book-toc');
    if (toc.style.display === 'none') {
      toc.style.display = 'block';
    } else {
      toc.style.display = 'none';
    }
  });
  const menu = document.querySelector('.book-menu');
  const menuTitle = menu.querySelector('span');
  menuTitle.parentNode.appendChild(tocButton);})();
</script>
{{ end }}
{{ end }}

{{ define "toggle-toc-stylesheet" }}
{{ if .Params.toggleToc }}
<script 
  src="https://kit.fontawesome.com/<FONTAWESOME_KIT_ID>.js" 
  crossorigin="anonymous"
></script>
{{ end }}
{{ end }}
{{ block "toggle-toc" . }}{{ end }}

head.html

{{ block "katex-stylesheet" . }}{{ end }}
{{ block "display-toast-stylesheet" . }}{{ end }}
{{ block "toggle-theme-stylesheet" . }}{{ end }}
{{ block "toggle-toc-stylesheet" . }}{{ end }}