TechOverflow Logo
TechOverflow

Hugo shortcode 将 KiCad 原理图复制到剪贴板

English Deutsch 简体中文

以下是如何在 Hugo 文章中包含 KiCad 原理图部分的示例。

如何在你的 Hugo 实例中实现此功能

  1. 为你的主题实现自定义 JS，参见如何在你的 Hugo 主题中包含自定义 JS

  2. 将以下自定义 JS 添加到你的主题中，这将启用 复制到剪贴板 按钮：

在 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. 将以下 shortcode 添加到你的 Hugo 实例：

在 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. 启用自定义 CSS，参见Hugo 主题代码以包含自定义 CSS 文件

  2. 将以下自定义 CSS 添加到你的主题：

在 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. 在你的文章中，像这样使用 shortcode：
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 >}}

你可以为每个 kicad-schematic 选择唯一 ID {{< kicad_schematic id="strap-pin-high-led" ... >}}。你也可以省略 ID，在这种情况下将生成随机 ID。

你需要从 KiCad 将原理图导出为 SVG 文件并将其放在目录中。为了让你更方便，查看我们的脚本Hugo 脚本以轻松向你的博客添加图片。

此脚本在此发布于 CC0 1.0 Universal。你可以用于任何目的，没有任何限制。不提供任何保证。如果可能，我希望你链接回 https://techoverflow.net，但这不是必需的。享受吧！

Check out similar posts by category: Hugo