TechOverflow Logo
TechOverflow

Shortcode Hugo pour copier les schémas KiCad dans le presse-papiers

English Deutsch 简体中文 Español Українська Čeština Português Русский Français

Ce qui suit est un exemple de comment inclure une partie d’un schéma KiCad dans un post Hugo.

Comment implémenter cela dans votre instance Hugo

  1. Implémentez du JS personnalisé pour votre thème, voir Comment inclure du JS personnalisé dans votre thème Hugo

  2. Ajoutez le JS personnalisé suivant à votre thème, ce qui activera le bouton Copier dans le presse-papiers :

Dans 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. Ajoutez le shortcode suivant à votre instance Hugo :

Dans 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. Activez les CSS personnalisés, voir Code de thème Hugo pour inclure des fichiers CSS personnalisés

  2. Ajoutez les CSS personnalisés suivants à votre thème :

Dans 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. Dans vos posts, utilisez le shortcode comme ceci :
example.md
{{< kicad_schematic image="/images/2024/9/Ethernet PHY Strap pin high with LED.svg" >}}
COLLEZ LA PARTIE DU SCHÉMA QUE VOUS AVEZ COPIÉE DEPUIS KICAD ICI
{{< /kicad_schematic >}}

Vous pouvez choisir un ID unique pour chaque schéma kicad {{< kicad_schematic id="strap-pin-high-led" ... >}}. Vous pouvez aussi omettre l’ID, auquel cas un ID aléatoire sera généré

Vous devez exporter le schéma comme un fichier SVG depuis KiCad et le placer dans le répertoire. Pour vous faciliter cela, consultez notre script Script Hugo pour ajouter facilement des images à votre blog

Ce script est par la présente publié sous CC0 1.0 Universal. Vous pouvez l’utiliser pour n’importe quel but sans aucune restriction. Aucune garantie n’est fournie. Si possible, j’apprécierais un lien retour vers https://techoverflow.net mais ce n’est pas requis. Profitez-en !

Consultez les articles similaires par catégorie : Hugo