---
title: Hugo博客迁移日志（4）
date: 2024-07-01
summary: 真·迁移日志（3）
description: 本文详细介绍了Hugo主题定制过程中的四个主要组件：公告、目录、简历和糖果雨特效。通过具体的代码示例和配置方法，文章指导读者如何实现这些组件的添加和功能扩展。包括了HTML模板的编辑、TOML配置文件的编写、CSS样式的调整以及JavaScript特效的实现。适合希望深入了解Hugo主题开发和自定义功能的读者。
categories: ["百草园"]
series: Hugo博客迁移日志
tags:
  - Hugo
  - 博客
  - Efímero
  - 折腾
slug: migrating-to-hugo-4
featuredImage: https://img.viento.cc/cover/migrating-to-hugo-4-cover.webp
draft: false
---

芜湖，各位老友们好啊，我是 Chlorine。接着上一回，继续为您说。

## 公告组件

下面的目标是为主题添加侧边栏组件。经过观察，这部分代码位于 `主题/layouts/partials/sidebar` 和 `主题/layouts/partials/sidebar.html` 中。不过使用循环来简化代码似乎有那么亿点点麻烦，所以还是先不管可扩展性，直接硬上吧。

在 `sidebar` 文件夹下添加一个 `announcement.html`：

```html
{{ $announcement := .Site.GetPage "announcement" }}
{{ with $announcement }}
<div class="markdown-body text-neutral-900 dark:text-neutral-100 text-center">
    {{ .Content | safeHTML }}
</div>
{{ end }}
```

在 `sidebar.html` 下添加：

```html
{{ if .Site.Params.Basic.announcement }}
<widget-layout id="announcement-widget" class="pb-4 card-base">
    <div
        class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2 before:content-[''] before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)] before:absolute before:left-[-16px] before:top-[5.5px]">
        公告
    </div>
    <div id="announcement-content" class="collapse-wrapper px-4 overflow-hidden">
        {{ partial "sidebar/announcement.html" . }}
    </div>
</widget-layout>
{{ end }}
```

这样直接编辑 `announcement.md` 就可以编辑公告了。当然，还需要配置 `.Site.Params.Basic.announcement` 参数。

## 目录组件

目录和公告大差不差：

```html
<div id="toc-container" class="
    toc text-neutral-900 dark:text-neutral-100 
    p-4 rounded-lg shadow-lg overflow-auto max-h-96 
    transition-all duration-300 ease-in-out hover:shadow-2xl
">
    <div id="toc-content" class="transition-all duration-500 ease-in-out">
        {{ .Page.TableOfContents }}
    </div>
</div>
```

就是这个样式不大好看，凑合用吧。

## 简历组件

这个相对麻烦。我不想在 HTML 里硬编码，于是想了半天后，决定使用 TOML 配置，大概就是：

```toml
[[params.social]]
    name = "Home"
    url = ""
    icon = "i-carbon-home"
    enable = true
[[params.social]]
    name = "Email"
    url = "mailto:your@email.com"
    icon = "i-carbon-email"
    enable = true
```

然后改一下 profile 的逻辑：

```html
<div class="card-base">
    <a aria-label="Go to About Page" href="{{ relURL "about/" }}" class="group block relative mx-auto mt-4 lg:mx-3 lg:mt-3 mb-3
       max-w-[240px] lg:max-w-none overflow-hidden rounded-xl active:scale-95">
        <div class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50
        w-full h-full z-50 flex items-center justify-center">
            <div
                class="transition opacity-0 group-hover:opacity-100 text-white text-5xl i-mdi-card-account-details-outline">
            </div>
        </div>
        <div class="mx-auto lg:w-full h-full lg:mt-0 overflow-hidden relative">
            <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50 pointer-events-none"></div>
            <img src="{{ relURL "/img/avatar.webp" }}" alt="Profile Image of the Author"
                class="w-full h-full object-center object-cover mx-auto lg:w-full h-full lg:mt-0" />
        </div>
    </a>
    <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{{ .Site.Params.Author.name }}</div>
    <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
    <div class="text-center text-neutral-400 mb-2.5 transition">{{ .Site.Params.Author.description }}</div>
    {{/* <div class="flex gap-2 mx-2 justify-center mb-4">
        <a aria-label="Home" href="" target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
            <div class="i-carbon-home text-xl"></div>
        </a>

    </div> */}}
    <div class="icons-container">
        {{ range .Site.Params.social }}
        {{ if .enable }}
        <a aria-label="{{ .name }}" href="{{ .url }}" target="_blank"
            class="btn-regular rounded-lg h-10 w-10 active:scale-90">
            <div class="{{ .icon }} text-xl"></div>
        </a>
        {{ end }}
        {{ end }}
    </div>

</div>
```

再写点美化的 CSS：

```css
.icon svg {
    height: 1em;
    width: 1em
}

.icons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.icons-container a {
    margin: 5px;
    /* 调整图标之间的间距 */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 移动端样式 */
@media (max-width: 600px) {
    .icons-container a {
        margin: 4px;
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 600px) {
    .card-base {
        flex-direction: column;
        padding: 0 1rem;
        gap: 0.5rem;
    }
}
```

就可以渲染社交图标了。

当初整这个的时候费了不少劲，主要的问题居然是我不知道图标不经过重新 UnoCSS 构建是不生效的（因此我安装了 UnoCSS 🤣）。以及，UnoCSS 不能检测没有在 HTML 中直接使用的图标，因此开了个 `utility.html` 来专门引入图标。

## 糖果雨特效

这个我在网上找了许多代码，最终在 Claude 等 AI 伙伴的帮助下写了出来。

新建一个 `candy.js`：

```js
// 糖果雨效果，一定要在 footer 中引入，否则由于页面未加载完成，无法获取到 body 元素

class Circle {
    constructor ({ origin, speed, color, angle, context }) {
        this.origin = origin
        this.position = { ...this.origin }
        this.color = color
        this.speed = speed
        this.angle = angle
        this.context = context
        this.renderCount = 0
    }

    draw() {
        this.context.fillStyle = this.color
        this.context.beginPath()
        this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
        this.context.fill()
    }

    move() {
        this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
        this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
        this.renderCount++
    }
}

class Boom {
    constructor ({ origin, context, circleCount = 10, area }) {
        this.origin = origin
        this.context = context
        this.circleCount = circleCount
        this.area = area
        this.stop = false
        this.circles = []
    }

    randomArray(range) {
        const length = range.length
        const randomIndex = Math.floor(length * Math.random())
        return range[randomIndex]
    }

    randomColor() {
        const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
        return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
    }

    randomRange(start, end) {
        return (end - start) * Math.random() + start
    }

    init() {
        for (let i = 0; i < this.circleCount; i++) {
            const circle = new Circle({
                context: this.context,
                origin: this.origin,
                color: this.randomColor(),
                angle: this.randomRange(Math.PI - 1, Math.PI + 1),
                speed: this.randomRange(1, 6)
            })
            this.circles.push(circle)
        }
    }

    move() {
        this.circles.forEach((circle, index) => {
            if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
                return this.circles.splice(index, 1)
            }
            circle.move()
        })
        if (this.circles.length == 0) {
            this.stop = true
        }
    }

    draw() {
        this.circles.forEach(circle => circle.draw())
    }
}

class CursorSpecialEffects {
    constructor () {
        this.computerCanvas = document.createElement('canvas')
        this.renderCanvas = document.createElement('canvas')

        this.computerContext = this.computerCanvas.getContext('2d')
        this.renderContext = this.renderCanvas.getContext('2d')

        this.globalWidth = window.innerWidth
        this.globalHeight = window.innerHeight

        this.booms = []
        this.running = false
    }

    handleMouseDown(e) {
        const boom = new Boom({
            origin: { x: e.clientX, y: e.clientY },
            context: this.computerContext,
            area: {
                width: this.globalWidth,
                height: this.globalHeight
            }
        })
        boom.init()
        this.booms.push(boom)
        this.running || this.run()
    }

    handlePageHide() {
        this.booms = []
        this.running = false
    }

    init() {
        const style = this.renderCanvas.style
        style.position = 'fixed'
        style.top = style.left = 0
        style.zIndex = '999999999999999999999999999999999999999999'
        style.pointerEvents = 'none'

        style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
        style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight

        document.body.append(this.renderCanvas)

        window.addEventListener('mousedown', this.handleMouseDown.bind(this))
        window.addEventListener('pagehide', this.handlePageHide.bind(this))
    }

    run() {
        this.running = true
        if (this.booms.length == 0) {
            return this.running = false
        }

        requestAnimationFrame(this.run.bind(this))

        this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
        this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)

        this.booms.forEach((boom, index) => {
            if (boom.stop) {
                return this.booms.splice(index, 1)
            }
            boom.move()
            boom.draw()
        })
        this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
    }
}

const cursorSpecialEffects = new CursorSpecialEffects()
cursorSpecialEffects.init()
```

再添加 CSS：

```css
.candy {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #f00;
    border-radius: 50%;
    pointer-events: none;
}
```

引入即可。以及，点名批评 Hugo 奇葩的构建机制，JavaScript 就摆在那，愣是不加到 `public` 里，我也是没招了。

## 代码一键复制

这个属实是给我整得心力交瘁。好在最后在强大的 Claude 3.5 的帮助下写出来了。

开一个 `clickcopy.js`：

```js
(function () {
    'use strict';
    if (!navigator.clipboard) {
        return;
    }

    function createSVGIcon(iconName) {
        const svgNS = "http://www.w3.org/2000/svg";
        const svg = document.createElementNS(svgNS, "svg");
        svg.setAttribute("viewBox", "0 0 32 32");

        const path = document.createElementNS(svgNS, "path");
        if (iconName === "copy") {
            path.setAttribute("d", "M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z");
            const path2 = document.createElementNS(svgNS, "path");
            path2.setAttribute("d", "M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z");
            svg.appendChild(path2);
        } else if (iconName === "checkmark") {
            path.setAttribute("d", "M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z");
        }
        svg.appendChild(path);
        return svg;
    }

    function flashCopyMessage(el, msg, iconName) {
        var iconContainer = el.querySelector('.copy-icon');
        var msgContainer = el.querySelector('.copy-msg');

        // 更新图标
        iconContainer.innerHTML = '';
        iconContainer.appendChild(createSVGIcon(iconName));

        // 更新消息
        msgContainer.textContent = msg;

        setTimeout(function () {
            // 2秒后清除消息文本和图标变化
            msgContainer.textContent = '';
            iconContainer.innerHTML = '';
            iconContainer.appendChild(createSVGIcon('copy'));
        }, 2000);
    }

    function addCopyButton(containerEl) {
        if (containerEl.querySelector('.highlight-copy-btn')) {
            return;
        }

        var copyBtn = document.createElement("button");
        copyBtn.className = "highlight-copy-btn";
        copyBtn.setAttribute("aria-label", "Copy to clipboard");
        copyBtn.innerHTML = '<span class="copy-icon"></span><span class="copy-msg"></span>';
        copyBtn.querySelector('.copy-icon').appendChild(createSVGIcon('copy'));
        copyBtn.style.display = "none";

        var codeEl = containerEl.querySelector('code') || containerEl;
        copyBtn.addEventListener('click', function () {
            navigator.clipboard.writeText(codeEl.innerText).then(function () {
                flashCopyMessage(copyBtn, 'Copied!', 'checkmark');
            }, function (err) {
                console.error('Unable to copy: ', err);
                flashCopyMessage(copyBtn, 'Failed :\'(', 'copy');
            });
        });

        containerEl.appendChild(copyBtn);
        containerEl.style.position = 'relative';

        containerEl.addEventListener('mouseenter', function () {
            copyBtn.style.display = "block";
        });
        containerEl.addEventListener('mouseleave', function () {
            copyBtn.style.display = "none";
        });
    }

    // 添加复制按钮到所有代码块
    var codeBlocks = document.querySelectorAll('pre');
    Array.prototype.forEach.call(codeBlocks, addCopyButton);
})();
```

写 CSS：

```css
.highlight-copy-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    border: 0;
    border-radius: 4px;
    padding: 5px;
    font-size: 0.8em;
    line-height: 1;
    background-color: transparent;
    /* 移除背景色 */
    color: inherit;
    /* 继承父元素的颜色 */
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.highlight-copy-btn:hover {
    opacity: 1;
}

.copy-icon {
    display: inline-flex;
    /* 使用 flex 布局以更好地控制图标 */
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.copy-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    /* 使用当前文本颜色填充SVG */
}

.copy-msg {
    margin-left: 5px;
    font-size: 12px;
}
```

然后引入就完事了。不过这个功能有时候需要刷新才能启动。

以及复制之后的按钮和文本有点偏移，但是我没力气调了。