TechOverflow Logo
TechOverflow

Hugo-Shortcode zum Kopieren von KiCad-Schaltplänen in die Zwischenablage

English 简体中文 Deutsch

Das Folgende ist ein Beispiel dafür, wie man einen Teil eines KiCad-Schaltplans in einen Hugo-Post einbindet.

Wie man dies in seiner Hugo-Instanz implementiert

  1. Implementieren Sie benutzerdefiniertes JS für Ihr Theme, siehe How to include custom JS in your Hugo theme

  2. Fügen Sie das folgende benutzerdefinierte JS zu Ihrem Theme hinzu, das die Schaltfläche In Zwischenablage kopieren aktiviert:

In hugo.yaml

shortcode.yaml
params:
  custom_js:
    - 'js/kicad.js'

In assets/js/kicad.js:

kicad.js
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.kicad-copy-button').forEach(function(button) {
        // Copy to clipboard button for kicad schematic
        button.addEventListener('click', function() {
            var dataId = this.getAttribute('data-id');
            /* Get the <script> tag with id=dataId */
            var script = document.getElementById(dataId);
            var text = script.innerText;
            /* Copy to clipboard */
            navigator.clipboard.writeText(text).then(function() {
                /* Change button text */
                const originalInnerHTML = button.innerHTML;
                button.innerHTML = '✔️ Copied to clipboard';
                setTimeout(() => {
                    button.innerHTML = originalInnerHTML;
                }, 2000);
            }, function() {
                console.error('Failed to copy to clipboard');
            });
        });
    });
});
  1. Fügen Sie den folgenden Shortcode zu Ihrer Hugo-Instanz hinzu:

In layouts/shortcodes/kicad_schematic.html:

kicad_schematic.html
{{ $seed := now.Unix }}
{{ $randomId := printf "%.10s" (sha256 $seed) }}
{{ $id := .Get "id" | default $randomId }}
<div class="kicad-schematic">
    <div class="toolbar" style="width: 100%">
        <button class="kicad-copy-button" data-id="{{ $id }}">
            📋 Click here to copy schematic to clipboard (paste in KiCad schematic editor)
        </button>
    </div>
    <div class="image-container">
        <image src="{{ .Get `image`}}"></image>
    </div>
    <script type="kicad" id="{{ $id }}">
        {{.Inner}}
    </script>
</div>

  1. Aktivieren Sie benutzerdefiniertes CSS, siehe Hugo theme code to include custom CSS files

  2. Fügen Sie das folgende benutzerdefinierte CSS zu Ihrem Theme hinzu:

In hugo.yaml:

hugo.yaml
params:
  custom_css:
    - 'css/kicad.css'

In assets/css/kicad.css:

css/kicad.css
.kicad-schematic {
    border: 1px solid #3034ec;
    border-radius: 1em;
    width: 100%;
    max-width: 600px;

    .toolbar {
        margin-top: -0.15em; /* Fix rounded corners not lining up */
        text-align: center;
        margin-bottom: 1em;
        width: 100%;

        button {
            background-color: #3034ec;
            color: white;
            cursor: pointer;
            width: 100%;
            border: 1px solid #3034ec;
            border-radius: 1em 1em 0em 0em;
            padding: 0.2em 0.4em;
        }

        button:hover {
            background-color: darkblue;
        }
    }

    .image-container {
        text-align: center;
        width: 100%;

        img {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    }
}
  1. In Ihren Posts verwenden Sie den Shortcode so:
example.md
{{< kicad_schematic image="/images/2024/9/Ethernet PHY Strap pin high with LED.svg" >}}
PASTE THE SCHEMATIC PART YOU COPIED FROM KICAD HERE
{{< /kicad_schematic >}}

Sie können eine eindeutige ID für jedes kicad-schematic wählen {{< kicad_schematic id="strap-pin-high-led" ... >}}. Sie können die ID auch weglassen, in diesem Fall wird eine zufällige ID generiert

Sie müssen den Schaltplan als SVG-Datei aus KiCad exportieren und im Verzeichnis ablegen. Um Ihnen das zu erleichtern, schauen Sie sich unser Skript Hugo script to easily add images to your blog an

Dieses Skript wird hiermit unter CC0 1.0 Universal veröffentlicht. Sie können es für jeden Zweck ohne Einschränkungen verwenden. Es wird keine Gewährleistung übernommen. Falls möglich, würde ich mich über einen Link zurück zu https://techoverflow.net freuen, aber er ist nicht erforderlich. Viel Spaß!

Check out similar posts by category: Hugo