Copy to Clipboard Toevoegen aan Codeblokken in Hugo

Veel websites hebben plug-ins voor Copy to Clipboard Buttons, maar na het raadplegen van veel documenten. De pagina-indeling vond ik niet zo mooi en het is erg moeilijk om aan te passen. Ik controleerde een aantal buitenlandse websites en deel uiteindelijk de code die ik vond. De code heb ik hier en daar aangepast.

Zie hieronder een voorbeeld hoe het eruit komt te zien:

Kopieer naar Klembordknoppen Toevoegen aan Codeblokken in Hugo

Een Copy to Clipboard toevoegen

Een codeblok zonder syntaxisaccentuering heeft dezelfde structuur, maar niets eromheen <div class=highlight>. Om rekening te houden met beide gevallen, heb ik ervoor gekozen om een onderliggend element <pre> onder het <code> element te zetten.

copy-to-clipboard.css :

.highlight {
    position: relative;
}

.highlight pre {
    padding-right: 75px;
    background-color:#312828 !important;
}

.highlight-copy-btn {
    position: absolute;
    bottom: 1px;
    right: 3px;
    border: 0;
    border-radius: 2px;
    padding: 1px;
    font-size: 0.8em;
    line-height: 1.8;
    color: rgb(17, 13, 13);
    background-color: rgb(22, 21, 21);
    min-width: 55px;
    text-align: center;
}

.highlight-copy-btn:hover {
    background-color: rgb(33, 32, 32);
}

Interactie met het klembord

Nu de knop beschikbaar is, is de volgende stap het gebruik van JavaScript om de code naar het klembord te kopiëren.

Code: copy-to-clipboard.js

(function() {
    'use strict';
  
    if(!document.queryCommandSupported('copy')) {
      return;
    }
  
    function flashCopyMessage(el, msg) {
      el.textContent = msg;
      setTimeout(function() {
        el.textContent = "Copy Text Block";
      }, 1000);
    }
  
    function selectText(node) {
      var selection = window.getSelection();
      var range = document.createRange();
      range.selectNodeContents(node);
      selection.removeAllRanges();
      selection.addRange(range);
      return selection;
    }
  
    function addCopyButton(containerEl) {
      var copyBtn = document.createElement("button");
      copyBtn.className = "highlight-copy-btn";
      copyBtn.textContent = "Copy Text Block";
  
      var codeEl = containerEl.firstElementChild;
      copyBtn.addEventListener('click', function() {
        try {
          var selection = selectText(codeEl);
          document.execCommand('copy');
          selection.removeAllRanges();
  
          flashCopyMessage(copyBtn, 'Copied!')
        } catch(e) {
          console && console.log(e);
          flashCopyMessage(copyBtn, 'Failed :\'(')
        }
      });
  
      containerEl.appendChild(copyBtn);
    }
  
    // Add copy button to code blocks
    var highlightBlocks = document.getElementsByClassName('highlight');
    Array.prototype.forEach.call(highlightBlocks, addCopyButton);
  })();

Thema bewerken

Zet copy-to-clipboard.css en in de en directory copy-to-clipboard.js respectievelijk static/css static/js

Verwijs vervolgens naar deze twee bestanden op de pagina

Wijzig config.toml en voeg aangepaste css toe

custom_css = ["/css/copy-to-clipboard.css"]

Daarna Run Hugo

hugo server

Het uiteindelijke resultaat is als volgt:

Kopieer text block

Share on:

Cyber

Atom Text Editor stopt officieel later dit jaar

Mijn Digitale Tuin

Kopieerbeveiliging tegen kopiëren van artikelen en rechtsklikscripts