薰逸の猫窝

不到 100 行代码实现人体动作识别：Python + MediaPipe 实时骨骼动画

Sat, 29 Aug 2026 16:00:00 GMT

曾经想过让电脑像镜子一样实时模仿你的动作吗？或者创建一个 AI 健身教练来纠正你的姿势？今天，我们将一起动手实现这个酷炫的想法！本文将带你从零开始，使用 Python 和 Google 的 MediaPipe 框架，构建一个能够实时识别人体动作并绘制出骨骼动画的程序。

最棒的是？整个过程非常简单，代码不到 100 行，对初学者也极其友好！

在这里插入图片描述

演示图片来自【电工版】ラヴィット ◯ Loveit 兮白版编舞翻跳，擦边不存在的！！

🧐 这是什么技术？

我们即将实现的功能，在计算机视觉领域被称为“人体姿态估计 (Human Pose Estimation)”。

它的核心任务是：从一张图片或一帧视频中，识别出人体的关键节点（如肩膀、手肘、膝盖、手腕等），并把它们连接起来，形成一个“骨骼”框架。

MediaPipe 是由 Google Research 开发并开源的一个功能强大的、跨平台的机器学习解决方案框架。

它的设计目标是让开发者能够轻松地构建和部署包含多种模式（如视频、音频、时序数据）的复杂机器学习应用管道（Pipelines）。

你可以把它想象成一个“AI 积木盒”。Google 已经帮你把许多复杂的 AI 功能（比如人脸检测、手势识别、我们这次用的姿态估计）封装成了一个个即插即用的“积木块”（官方称为 Solutions）。我们开发者所要做的，就是像搭积木一样，简单地调用这些功能，快速搭建出自己的应用，而无需从头训练复杂的深度学习模型。

为什么选择 MediaPipe？

除了我们在前面提到的几点，MediaPipe 的核心优势可以归纳为以下几点：

🚀 现成的解决方案 (Ready-to-use Solutions) MediaPipe 不仅仅能做姿态估计。它提供了一整套丰富的预构建解决方案，涵盖了人脸检测、面部网格（Face Mesh）、手势追踪、物体检测、图像分割、头发分割等众多领域。这些方案都经过了高度优化，开箱即用，让你的创意可以快速落地。
⚡️ 极致的性能 (Extreme Performance) 性能是 MediaPipe 的核心优势之一。它的处理管道专为低延迟和高吞吐量设计，即使在资源有限的设备（如中端智能手机）或普通个人电脑的 CPU 上也能实现令人惊叹的实时处理效果。这也是为什么我们的骨骼追踪程序如此流畅的原因。
🌍 一次编写，随处部署 (Write Once, Deploy Anywhere) MediaPipe 的架构设计使其具有极高的可移植性。你用 Python 开发的应用原型，其核心逻辑可以非常轻松地迁移到 Android (Java/C++), iOS (Objective-C/C++), C++ 桌面应用，甚至是 Web (JavaScript/Wasm)。这为应用的跨平台部署节省了大量的时间和精力。
🛠️ 可定制与可扩展 (Customizable and Extensible) 虽然 MediaPipe 提供了现成的解决方案，但它本质上是一个非常灵活的框架。对于高级用户，你可以深入其内部，自定义处理流程图（Graph），替换或组合不同的计算模块（Calculator），或者将自己的 TensorFlow Lite 模型集成进去，构建独一无二的 AI 应用。

想要深入探索 MediaPipe 的所有功能,请访问它的官方网站：

MediaPipe 官方网站
GitHub 官方仓库

🚀 第一步：准备你的开发环境

在敲代码之前，我们需要安装两个核心的 Python 库：opencv-python 和 mediapipe。

OpenCV: 一个强大的计算机视觉库，我们用它来捕获摄像头画面、处理图像和显示结果。
MediaPipe: 我们项目的“大脑”，负责所有姿态估计的 AI 计算。

打开你的终端（Terminal、CMD 或 PowerShell），然后运行以下命令：

pip install opencv-python mediapipe

确保你的电脑连接了一个摄像头，然后我们就可以开始编写代码了！

👨‍💻 第二步：编写核心代码（逐行详解）

创建一个名为 dance_tracker.py 的 Python 文件，然后跟着下面的步骤，把代码一块一块地放进去。

1. 导入工具并初始化

首先，我们需要导入 cv2 (OpenCV) 和 mediapipe，并初始化姿态估计模型和绘图工具。

import cv2
import mediapipe as mp

# 初始化 MediaPipe Pose 模型
mp_pose = mp.solutions.pose
pose = mp_pose.Pose(
    min_detection_confidence=0.5,  # 检测置信度阈值
    min_tracking_confidence=0.5    # 追踪置信度阈值
)

# 初始化 MediaPipe 的绘图工具
mp_drawing = mp.solutions.drawing_utils

mp.solutions.pose: 这是 MediaPipe 提供的姿态估计解决方案。
mp_pose.Pose(): 我们在这里创建了一个姿态估计器的实例。两个confidence参数决定了模型的敏感度，0.5 是一个很好的默认值。
mp.solutions.drawing_utils: 这是一套方便的工具，可以帮我们轻松地将识别出的骨骼绘制到图像上。

2. 打开摄像头并开始主循环

接下来，我们需要访问电脑的摄像头，并创建一个循环来不断地读取画面。

# 打开默认摄像头
cap = cv2.VideoCapture(0)

if not cap.isOpened():
    print("错误：无法打开摄像头。")
    exit()

# 实时处理摄像头的每一帧
while cap.isOpened():
    success, image = cap.read()
    if not success:
        print("忽略了一个空帧。")
        continue

    # ... 后续处理代码将放在这里 ...

# 循环结束后，释放资源
cap.release()
cv2.destroyAllWindows()

cv2.VideoCapture(0): 0 通常代表你电脑的默认摄像头。如果你有多个摄像头，可以尝试 1, 2 等。如果你想识别视频，就输入’视频路径’，例如cap = cv2.VideoCapture('miku.mov')
while cap.isOpened(): 这是一个经典的循环结构，只要摄像头开着，就一直执行循环内的代码。
cap.read(): 这个函数会返回两个值：success (一个布尔值，表示是否成功读取) 和 image (读取到的那一帧画面)。

3. 图像处理与姿态估计

这是最核心的部分。在循环内部，我们将对每一帧图像进行处理。

    # 为了提高性能，将图像标记为不可写
    image.flags.writeable = False
    
    # MediaPipe 需要 RGB 格式，但 OpenCV 是 BGR，所以需要转换
    image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
    
    # 使用 MediaPipe 模型处理图像，得到姿态结果
    results = pose.process(image_rgb)
    
    # 处理完后，再把图像标记为可写，以便绘制
    image.flags.writeable = True

颜色转换: 这是一个非常重要的细节！OpenCV 默认使用 BGR 色彩空间，而几乎所有其他的库（包括 MediaPipe）都使用 RGB。如果不转换，模型将无法正确识别颜色，导致性能下降。
pose.process(image_rgb): ✨ 魔法发生的地方！ 就是这一行代码，调用了复杂的 AI 模型，对输入的 RGB 图像进行分析，然后返回一个包含所有姿态信息的 results 对象。
image.flags.writeable: 这是 MediaPipe 官方推荐的一个性能优化技巧。通过临时将图像设为“只读”，可以避免不必要的数据拷贝，提高处理速度。

4. 绘制骨骼并显示结果

模型已经给了我们结果，现在需要把它可视化地画出来。

    # 在图像上绘制骨骼
    if results.pose_landmarks:
        mp_drawing.draw_landmarks(
            image,
            results.pose_landmarks,
            mp_pose.POSE_CONNECTIONS,
            # 自定义关节点和连接线的样式
            landmark_drawing_spec=mp_drawing.DrawingSpec(color=(0, 255, 0), thickness=2, circle_radius=4),
            connection_drawing_spec=mp_drawing.DrawingSpec(color=(0, 0, 255), thickness=2, circle_radius=2)
        )
        
    # 将图像水平翻转，产生镜像效果
    flipped_image = cv2.flip(image, 1)

    # 创建窗口并显示图像
    cv2.imshow('Real-time Dance Skeleton by MediaPipe', flipped_image)

    # 如果按下 'q' 键或 ESC 键，则退出循环
    if cv2.waitKey(5) & 0xFF in [ord('q'), 27]:
        break

results.pose_landmarks: 如果模型在画面中检测到了人，这个属性就会包含所有 33 个身体关节点的位置信息。
mp_drawing.draw_landmarks(): 这个函数帮我们完成了所有繁琐的绘图工作。我们只需要把原始图像、关节点信息和预设的连接方式 (mp_pose.POSE_CONNECTIONS) 传给它就行了。
cv2.flip(image, 1): 水平翻转图像，这样屏幕里的动作就会像照镜子一样，与你的左右方向一致，体验更好。
cv2.imshow() 和 cv2.waitKey(): 这两行代码负责显示窗口，并检测键盘输入，以便我们可以通过按 q 键来优雅地关闭程序。

✅ 第三步：整合代码并运行！

将上面所有的代码片段整合到你的 dance_tracker.py 文件中。完整的代码如下：

# dance_tracker.py
# 一个使用 MediaPipe 和 OpenCV 的实时人体姿态估计程序

import cv2
import mediapipe as mp

# 初始化 MediaPipe Pose 模型
mp_pose = mp.solutions.pose
pose = mp_pose.Pose(
    min_detection_confidence=0.5,
    min_tracking_confidence=0.5
)

# 初始化 MediaPipe 的绘图工具
mp_drawing = mp.solutions.drawing_utils

# 打开默认摄像头
cap = cv2.VideoCapture(0)

if not cap.isOpened():
    print("错误：无法打开摄像头。")
    exit()

# 实时处理摄像头的每一帧
while cap.isOpened():
    success, image = cap.read()
    if not success:
        print("忽略了一个空帧。")
        continue

    # 提高性能：将图像标记为不可写
    image.flags.writeable = False
    # 转换色彩空间 BGR -> RGB
    image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
    
    # 运行姿态估计
    results = pose.process(image_rgb)
    
    # 将图像标记为可写，以便绘制
    image.flags.writeable = True

    # 在图像上绘制骨骼
    if results.pose_landmarks:
        mp_drawing.draw_landmarks(
            image,
            results.pose_landmarks,
            mp_pose.POSE_CONNECTIONS,
            landmark_drawing_spec=mp_drawing.DrawingSpec(color=(0, 255, 0), thickness=2, circle_radius=4),
            connection_drawing_spec=mp_drawing.DrawingSpec(color=(0, 0, 255), thickness=2, circle_radius=2)
        )
        
    # 产生镜像效果
    flipped_image = cv2.flip(image, 1)

    # 显示结果
    cv2.imshow('Real-time Dance Skeleton by MediaPipe', flipped_image)

    # 按 'q' 或 ESC 退出
    if cv2.waitKey(5) & 0xFF in [ord('q'), 27]:
        break

# 释放资源
cap.release()
cv2.destroyAllWindows()

现在，打开终端，进入文件所在的目录，然后运行它！

python dance_tracker.py

一个窗口应该会弹出，显示你的摄像头画面。当你出现在镜头前时，一个由绿色节点和蓝色线条组成的骨骼动画就会神奇地叠加在你的身上，并实时跟随你的每一个动作！

💡 常见问题与展望

1: 程序报错“无法打开摄像头”怎么办？

这通常是权限问题，特别是在 macOS 或 Windows 上。

macOS: 请进入 系统设置 > 隐私与安全 > 摄像头，确保你用来运行脚本的程序（如“终端”或你的代码编辑器 VS Code）的权限开关是打开的。
Windows: 请进入 设置 > 隐私和安全性 > 相机，确保“允许应用访问你的相机”是开启的。

2

当你成功运行了基础版本后，还可以尝试做一些更有趣的事情：

处理视频文件：将 cap = cv2.VideoCapture(0) 改为 cap = cv2.VideoCapture('你的视频文件.mp4')，就可以处理本地的舞蹈视频了。
获取特定关节点坐标： results.pose_landmarks 对象中包含了所有 33 个关节点的坐标（x, y, z, visibility）。你可以访问它们并进行计算，例如：
- 计算手臂弯曲的角度。
- 判断你是否做出了某个特定的姿势（比如“大”字形）。
- 将骨骼数据发送到 Unity 或 Unreal Engine，驱动一个 3D 模型。
美化视觉效果：你可以完全自定义绘制的骨骼样式，比如改变颜色、粗细，或者用更酷炫的图形元素替换简单的线条和圆点。
性能： MediaPipe 已经非常快了。如果你的电脑配置较高（有不错的独立显卡），它的表现会更好。如果你觉得卡顿，可以尝试降低摄像头的分辨率。

总结

恭喜你！你已经成功构建了一个属于自己的 AI 实时动作捕捉应用。通过这个项目，我们不仅学会了如何使用 OpenCV 和 MediaPipe，更打开了通往计算机视觉世界的大门。希望这篇文章能激发你的创造力，去探索更多 AI 与现实世界交互的可能性。

Happy coding!

OpenCV 环境搭建：安装必要的开发工具与库

Sat, 29 Aug 2026 16:00:00 GMT

第 1 步：安装必要的开发工具和库

我们需要 C++ 编译器、项目构建工具 (CMake) 和核心的图像处理库 (OpenCV)。

在终端中输入以下命令：

sudo pacman -S base-devel cmake opencv

base-devel: 这是一个软件包组，包含了 gcc (C++ 编译器), make (编译工具) 等一系列最基础的开发工具。
cmake: 一个跨平台的项目构建工具，它能读取我们后续编写的配置文件 (CMakeLists.txt) 并生成 make 所需的 Makefile。
opencv: 我们项目最核心的依赖库，提供了所有图像处理和人脸识别的功能。

第 2 步：创建项目文件夹结构

现在，我们需要为项目创建一个干净整洁的工作空间。

创建一个主文件夹。我们把它放在您的主目录 (~) 下，并命名为 FaceRecProject。

Bash
```
# cd ~ 会确保您当前在主目录下
cd ~
mkdir FaceRecProject
```
进入这个主文件夹。之后的所有操作都在这里进行。

Bash
```
cd FaceRecProject
```
创建项目所需的子文件夹。

Bash
```
mkdir build
mkdir data
mkdir cascades
```
- build: 用于存放所有编译过程中产生的临时文件和最终生成的可执行程序，让主目录保持干净。
- data: 用于存放我们提供给程序学习的人脸照片。
- cascades: 用于存放 OpenCV 官方提供的人脸检测模型文件。

第 3 步：下载人脸检测模型

我们需要一个预训练好的模型来告诉程序“人脸长什么样”。

在终端中（确保您仍在 FaceRecProject 文件夹下），运行以下命令：

wget -P ./cascades https://raw.githubusercontent.com/opencv/opencv/master/data/haarcascades/haarcascade_frontalface_alt.xml

wget: 一个从网络上下载文件的命令行工具。
-P ./cascades: -P 参数告诉 wget 把下载的文件放到指定的文件夹里，也就是我们刚创建的 cascades 文件夹。
https://...: 这是模型文件的下载地址。

第 4 步：编写项目代码

现在我们要创建三个核心的文本文件：构建脚本和两个 C++ 源代码文件。

创建构建脚本 CMakeLists.txt

Bash

# 使用 nano 文本编辑器创建一个新文件
nano CMakeLists.txt

将下面的代码完整地复制并粘贴到 nano 编辑器窗口中：

CMake

cmake_minimum_required(VERSION 3.10)
project(FaceRecognition)
set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
find_package(OpenCV REQUIRED COMPONENTS core highgui imgproc objdetect videoio face)
include_directories(${OpenCV_INCLUDE_DIRS})
add_executable(train_model train_model.cpp)
target_link_libraries(train_model ${OpenCV_LIBS} stdc++fs)
add_executable(recognize_face recognize_face.cpp)
target_link_libraries(recognize_face ${OpenCV_LIBS})

粘贴完成后，按 Ctrl+X，然后按 Y，最后按 回车 来保存并退出。

创建训练程序 train_model.cpp

Bash

nano train_model.cpp

将下面的代码完整地复制并粘贴进去：

C++

#include <iostream>
#include <fstream>
#include <sstream>
#include <vector>
#include <string>
#include <filesystem>
#include <opencv2/core.hpp>
#include <opencv2/imgcodecs.hpp>
#include <opencv2/imgproc.hpp>
#include <opencv2/face.hpp>

using namespace cv;
using namespace cv::face;
using namespace std;
namespace fs = std::filesystem;

void create_dataset_csv(const string& data_path, const string& output_file) {
    ofstream csv_file(output_file);
    int label = 0;
    for (const auto& entry : fs::directory_iterator(data_path)) {
        if (entry.is_directory()) {
            for (const auto& img_entry : fs::directory_iterator(entry.path())) {
                if (img_entry.is_regular_file()) {
                    csv_file << img_entry.path().string() << ";" << label << endl;
                }
            }
            label++;
        }
    }
    csv_file.close();
    cout << "Dataset CSV file created at " << output_file << endl;
}

static void read_csv(const string& filename, vector<Mat>& images, vector<int>& labels, char separator = ';') {
    ifstream file(filename.c_str(), ifstream::in);
    string line, path, classlabel;
    while (getline(file, line)) {
        stringstream liness(line);
        getline(liness, path, separator);
        getline(liness, classlabel);
        if(!path.empty() && !classlabel.empty()) {
            images.push_back(imread(path, IMREAD_GRAYSCALE));
            labels.push_back(atoi(classlabel.c_str()));
        }
    }
}

int main() {
    string data_dir = "./data";
    string csv_file_path = "./data.csv";
    create_dataset_csv(data_dir, csv_file_path);

    vector<Mat> images;
    vector<int> labels;
    try {
        read_csv(csv_file_path, images, labels);
    } catch (const cv::Exception& e) {
        cerr << "Error opening file \"" << csv_file_path << "\". Reason: " << e.msg << endl;
        exit(1);
    }
    if(images.size() <= 1) {
        cerr << "Error: This program needs at least 2 images to train. Please add more images to your data directory." << endl;
        exit(1);
    }

    Ptr<LBPHFaceRecognizer> model = LBPHFaceRecognizer::create();
    cout << "Training the model..." << endl;
    model->train(images, labels);
    string model_filename = "face_model.yml";
    model->save(model_filename);
    cout << "Model trained and saved to " << model_filename << endl;
    return 0;
}

同样按 Ctrl+X, Y, 回车 保存退出。

创建识别程序 recognize_face.cpp

Bash

nano recognize_face.cpp

将下面的代码完整地复制并粘贴进去：

C++

#include <iostream>
#include <map>
#include <string>
#include <filesystem>
#include <chrono>
#include <iomanip>
#include <sstream>
#include <opencv2/core.hpp>
#include <opencv2/highgui.hpp>
#include <opencv2/imgproc.hpp>
#include <opencv2/objdetect.hpp>
#include <opencv2/face.hpp>

using namespace std;
using namespace cv;
using namespace cv::face;
namespace fs = std::filesystem;

int main() {
    string cascade_path = "./cascades/haarcascade_frontalface_alt.xml";
    string model_path = "face_model.yml";
    CascadeClassifier face_cascade;
    if (!face_cascade.load(cascade_path)) {
        cerr << "Error: Could not load face cascade." << endl;
        return -1;
    }

    Ptr<FaceRecognizer> model = LBPHFaceRecognizer::create();
    try {
        model->read(model_path);
    } catch (const cv::Exception& e) {
        cerr << "Error: Could not load trained model. Have you trained the model yet?" << endl;
        return -1;
    }

    map<int, string> label_to_name;
    label_to_name[0] = "Person 1"; // 可在此处修改识别出的名字
    label_to_name[1] = "Person 2";

    string strangers_dir = "strangers";
    if (!fs::exists(strangers_dir)) {
        fs::create_directory(strangers_dir);
    }
    auto last_stranger_save_time = chrono::steady_clock::now();
    const auto save_cooldown = chrono::seconds(5);

    VideoCapture cap(0);
    if (!cap.isOpened()) {
        cerr << "Error: Could not open camera." << endl;
        return -1;
    }

    Mat frame;
    while (true) {
        cap >> frame;
        if (frame.empty()) break;

        Mat gray;
        cvtColor(frame, gray, COLOR_BGR2GRAY);
        equalizeHist(gray, gray);

        vector<Rect> faces;
        face_cascade.detectMultiScale(gray, faces, 1.1, 4, 0|CASCADE_SCALE_IMAGE, Size(30, 30));

        for (const auto& face_rect : faces) {
            Mat face_roi = gray(face_rect);
            Mat resized_face;
            resize(face_roi, resized_face, Size(92, 112), 1.0, 1.0, INTER_CUBIC);

            int predicted_label = -1;
            double confidence = 0.0;
            model->predict(resized_face, predicted_label, confidence);

            rectangle(frame, face_rect, Scalar(0, 255, 0), 2);

            string text;
            if (predicted_label != -1 && confidence < 85.0) {
                 string name = label_to_name.count(predicted_label) ? label_to_name[predicted_label] : "Known Person";
                 text = format("%s (Conf: %.2f)", name.c_str(), confidence);
            } else {
                text = "Stranger";
                auto now = chrono::steady_clock::now();
                if (chrono::duration_cast<chrono::seconds>(now - last_stranger_save_time) > save_cooldown) {
                    auto time_now_t = chrono::system_clock::to_time_t(chrono::system_clock::now());
                    stringstream ss;
                    ss << put_time(localtime(&time_now_t), "%Y%m%d_%H%M%S");
                    string filename = strangers_dir + "/stranger_" + ss.str() + ".jpg";
                    imwrite(filename, frame(face_rect));
                    cout << "Stranger detected! Image saved to " << filename << endl;
                    last_stranger_save_time = now;
                }
            }

            Point text_pos(face_rect.x, face_rect.y - 10);
            putText(frame, text, text_pos, FONT_HERSHEY_SIMPLEX, 0.6, Scalar(0, 255, 0), 2);
        }

        imshow("Face Recognition", frame);

        if (waitKey(10) == 'q') break;
    }
    return 0;
}

按 Ctrl+X, Y, 回车 保存退出。

第 5 步：准备训练数据

这是教程序认识人脸的关键。

在 data 文件夹里，为每一个人创建一个单独的子文件夹。文件夹的名字最好是英文，比如 zhangsan, lisi。

Bash
```
# 例如，创建两个人的文件夹
mkdir data/zhangsan
mkdir data/lisi
```
将每个人的照片（JPG 或 PNG 格式）放入对应的文件夹。每个人的照片建议至少 10 张，越多越好，最好包含不同角度、不同表情、不同光线下的照片。

您可以用文件管理器来复制粘贴，或者用 cp 命令。

第 6 步：编译项目

现在，所有代码和数据都准备好了，让我们来编译它。

进入 build 文件夹。

Bash
```
cd build
```
运行 CMake。它会读取上一级目录的 CMakeLists.txt 文件并生成配置。

Bash
```
cmake ..
```
- .. 代表上一级目录。
运行 make。它会根据 CMake 生成的配置，调用 C++ 编译器来编译源代码。

Bash
```
make
```
等待编译完成。如果一切顺利，您不会看到任何红色的错误信息。

第 7 步：运行程序

编译成功后，build 文件夹里会生成两个可执行文件：train_model 和 recognize_face。

首先，训练模型。我们需要回到项目主目录来运行，这样程序才能找到 data 文件夹。

Bash
```
# 回到主目录 FaceRecProject
cd ..

# 运行训练程序
./build/train_model
```
程序会读取 data 文件夹里的照片，训练模型，然后在主目录生成一个 face_model.yml 文件。
最后，运行实时识别程序！

Bash
```
# 确保仍在主目录
./build/recognize_face
```
程序会请求打开您的摄像头。授权后，一个名为 “Face Recognition” 的窗口就会弹出。它会实时地检测和识别人脸，并将陌生人的头像保存在 strangers 文件夹。

按 q 键可以关闭窗口并退出程序。

恭喜！你已经从零开始，成功地在 Arch Linux 上构建并运行了一个属于您自己的 C++ 人脸识别应用。

无依赖全栈评论系统：Go (Gin) + Web Components 快速搭建

Sat, 29 Aug 2026 16:00:00 GMT

想要给网站加个评论功能，接入第三方服务怕数据不安全，引入庞大的前端框架又觉得“杀鸡焉用牛刀”？

其实，利用浏览器现代标准 Web Components 和编译极其方便的 Go 语言，我们可以快速构建一个无依赖、高性能的全栈评论系统。它不需要复杂的构建流程，部署时只需一个二进制文件，非常适合个人开发者快速上手。

技术栈一览

Backend (后端): Go (Gin 框架) + Gorm + SQLite
- 理由：部署极其简单，编译后只是一个二进制文件，自带数据库，无需额外安装 MySQL。
Frontend (前端): 原生 JavaScript + Web Components
- 理由：无依赖，无构建流程，标准 HTML 标签，真正的组件化。

第一部分：后端 —— 极速搭建 API

我们将使用 Go 语言最流行的 Gin 框架，配合 Gorm 进行数据库操作。整个后端代码不到 60 行。

1. 初始化项目

首先，在终端中创建一个文件夹并初始化 Go 模块：

mkdir go-comments
cd go-comments
go mod init go-comments

安装必要的依赖包：

# Web 框架
go get -u github.com/gin-gonic/gin
# ORM 和 数据库驱动
go get -u gorm.io/gorm
go get -u gorm.io/driver/sqlite
# 跨域处理中间件
go get -u github.com/gin-contrib/cors

2. 编写 `main.go`

新建 main.go，这是我们要实现的全部逻辑：

package main

import (
	"time"

	"github.com/gin-contrib/cors"
	"github.com/gin-gonic/gin"
	"gorm.io/driver/sqlite"
	"gorm.io/gorm"
)

// 定义评论模型，Gorm 会自动把它转换成数据库表
type Comment struct {
	ID        uint      `gorm:"primaryKey" json:"id"`
	Content   string    `json:"content"`
	CreatedAt time.Time `json:"created_at"`
}

func main() {
	// 1. 连接 SQLite 数据库 (自动创建 comments.db)
	db, err := gorm.Open(sqlite.Open("comments.db"), &gorm.Config{})
	if err != nil {
		panic("数据库连接失败")
	}

	// 2. 自动迁移：保证数据库表结构与 Struct 同步
	db.AutoMigrate(&Comment{})

	// 3. 初始化 Gin 引擎
	r := gin.Default()

	// 4. 配置 CORS (允许跨域)
	// 因为前端可能跑在不同端口，必须允许跨域请求
	r.Use(cors.Default())

	// 5. 路由定义
	
	// 获取评论列表
	r.GET("/comments", func(c *gin.Context) {
		var comments []Comment
		// 按时间倒序查询
		db.Order("created_at desc").Find(&comments)
		c.JSON(200, comments)
	})

	// 提交新评论
	r.POST("/comments", func(c *gin.Context) {
		var jsonInput Comment
		// 绑定 JSON 数据
		if err := c.ShouldBindJSON(&jsonInput); err != nil {
			c.JSON(400, gin.H{"error": err.Error()})
			return
		}
		// 写入数据库
		db.Create(&jsonInput)
		c.JSON(200, jsonInput)
	})

	// 6. 在 8080 端口启动服务
	r.Run(":8080")
}

运行后端非常简单：

go run main.go

看到 Listening and serving HTTP on :8080 即表示成功。

第二部分：前端 —— 封装 Web Components

我们要创建一个自定义标签 <my-comments>，无论把它放在哪个 HTML 页面里，它都能自动渲染出评论区并拥有交互功能。

编写 `index.html`

为了演示方便，我们将 JS 直接写在 HTML 里（实际开发中建议分离为 .js 文件）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Go + Web Components Demo</title>
</head>
<body>

    <my-comments></my-comments>

    <script>
        // 自定义组件类
        class MyComments extends HTMLElement {
            constructor() {
                super();
                // 开启 Shadow DOM，让样式与外部隔离，互不影响
                this.attachShadow({ mode: 'open' });
                this.apiUrl = 'http://localhost:8080/comments'; 
            }

            connectedCallback() {
                this.render();
                this.fetchComments(); // 组件加载时拉取数据
            }

            render() {
                this.shadowRoot.innerHTML = `
                <style>
                    :host { display: block; font-family: sans-serif; }
                    .container { 
                        max-width: 500px; margin: 20px auto; 
                        border: 1px solid #e0e0e0; border-radius: 8px; padding: 20px;
                        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
                    }
                    h3 { margin-top: 0; color: #333; }
                    ul { list-style: none; padding: 0; max-height: 300px; overflow-y: auto; }
                    li { border-bottom: 1px solid #f0f0f0; padding: 10px 0; }
                    .content { font-size: 16px; color: #444; }
                    .time { font-size: 12px; color: #999; margin-top: 4px; }
                    .input-group { display: flex; gap: 10px; margin-top: 20px; }
                    input { flex: 1; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
                    button { 
                        padding: 8px 16px; background: #007bff; color: white; 
                        border: none; border-radius: 4px; cursor: pointer; 
                    }
                    button:hover { background: #0056b3; }
                </style>

                <div class="container">
                    <h3>💬 评论区</h3>
                    <ul id="list">加载中...</ul>
                    <div class="input-group">
                        <input type="text" id="input" placeholder="写下你的想法..." />
                        <button id="btn">发送</button>
                    </div>
                </div>
                `;

                // 绑定点击事件
                this.shadowRoot.getElementById('btn').onclick = () => this.postComment();
            }

            // 获取评论 (GET)
            async fetchComments() {
                try {
                    const res = await fetch(this.apiUrl);
                    const data = await res.json();
                    
                    const list = this.shadowRoot.getElementById('list');
                    if (data.length === 0) {
                        list.innerHTML = '<li style="text-align:center;color:#999">暂无评论，快来抢沙发！</li>';
                        return;
                    }

                    list.innerHTML = data.map(c => `
                        <li>
                            <div class="content">${this.escapeHtml(c.content)}</div>
                            <div class="time">${new Date(c.created_at).toLocaleString()}</div>
                        </li>
                    `).join('');
                } catch (err) {
                    console.error("API Error:", err);
                    this.shadowRoot.getElementById('list').innerHTML = '加载失败，请检查后端服务。';
                }
            }

            // 提交评论 (POST)
            async postComment() {
                const input = this.shadowRoot.getElementById('input');
                const content = input.value.trim();
                if (!content) return;

                try {
                    await fetch(this.apiUrl, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ content: content })
                    });
                    
                    input.value = ''; // 清空输入框
                    this.fetchComments(); // 刷新列表
                } catch (err) {
                    alert("发送失败！");
                }
            }

            // 简单的 XSS 防御
            escapeHtml(text) {
                return text
                    .replace(/&/g, "&amp;")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/"/g, "&quot;")
                    .replace(/'/g, "&#039;");
            }
        }

        // 注册组件
        customElements.define('my-comments', MyComments);
    </script>
</body>
</html>

运行效果

保持 go run main.go 在终端运行。
双击打开 index.html。
输入评论并发送，你会发现评论立刻保存到了 SQLite 数据库中，刷新页面数据依然存在。

总结

通过这个小 Demo，我们发现：

Go 做后端真的很爽：不用配置复杂的 Webpack/Vite，不用担心数据库安装，一个二进制文件走天下。
Web Components 很强大：它让我们回归 HTML 的本质。想象一下，你可以在你的个人博客、公司的老旧项目，甚至是别人的网站（通过油猴脚本）里，只用一行 <my-comments></my-comments> 就插入这个功能，是不是很酷？

希望这篇教程能给你带来灵感！Happy Coding! ✨

手搓登录鉴权系统：用 Go (Gin) 与原生 JavaScript 从零实现完整登录流程

Sat, 29 Aug 2026 16:00:00 GMT

在现在的 Web 开发中，我们太习惯于依赖现成的库了：前端用 Auth0，后端用 Passport.js。但如果剥去这些层层封装，“登录”这件事的本质究竟是什么？

今天，我将剥离所有复杂的第三方库，带大家用最原生的 Go (Gin) 和 JavaScript，手搓一个包含后端中间件拦截、前端 Token 管理、交互式登录弹窗的完整鉴权系统。我们将不仅实现功能，更要探讨其背后的架构思维。

第一章：顶层架构设计

在写代码之前，我们先梳理一下逻辑。对于个人博客系统（Mikuweb）而言，我们的需求非常明确：单管理员模式。

我们需要构建一个“闭环”：

前端：拿着密码去换通行证（Token）。
前端：把通行证缝在衣服上（LocalStorage），每次办事（发请求）都亮出来。
后端：设置一道安检门（Middleware），有证的放行，没证的拦截。

数据流向图

sequenceDiagram
    participant U as 👤 用户 (Browser)
    participant A as 🚪 登录接口 (/login)
    participant M as 🛡️ 鉴权中间件 (Middleware)
    participant H as ⚙️ 业务逻辑 (/admin/posts)

    Note over U, A: 阶段一：获取凭证
    U->>A: 1. 提交密码 (POST /login)
    alt 密码正确
        A-->>U: 2. 返回 Token (凭证)
        Note over U: 将 Token 存入 LocalStorage
    else 密码错误
        A-->>U: 401 Unauthorized
    end

    Note over U, H: 阶段二：使用凭证
    U->>M: 3. 发起敏感操作 (Header携带 Token)
    M->>M: 4. 检查 Token 是否有效
    alt 验证通过
        M->>H: 5. next() 放行
        H-->>U: 6. 操作成功
    else 验证失败
        M-->>U: 401 拦截请求
    end

第二章：后端实现 —— 守门员的艺术 (Go + Gin)

后端的灵魂不在于那个 login 接口，而在于中间件 (Middleware) 的设计。

1. 定义“上帝密码”与配置

为了演示最纯粹的逻辑，我们这里使用“硬编码”的单密码模式（生产环境请务必使用环境变量）。

// main.go
const (
    // 这是唯一的通关秘籍，实际开发中建议读取 os.Getenv("APP_PASSWORD")
    ADMIN_PASSWORD = "miku_is_cute" 
    
    // 管理员公开信息
    ADMIN_NICKNAME = "awkker"
    ADMIN_AVATAR   = "/static/xunyi.png"
)

2. 核心：编写鉴权中间件 (The Gatekeeper)

这是很多初学者容易卡住的地方。中间件本质上是一个拦截器。在 Gin 中，它控制着请求的生命周期。

// AuthMiddleware 就像机场安检，不通过安检（Token错误），永远进不了候机厅（业务逻辑）
func AuthMiddleware() gin.HandlerFunc {
    return func(c *gin.Context) {
        // Step 1: 检查旅客有没有带“通行证”
        // 约定：前端必须在 HTTP Header 的 "Authorization" 字段中携带 Token
        token := c.GetHeader("Authorization")
        
        // Step 2: 验证通行证的真伪
        // 这里我们做简单的字符串比对，实际场景中通常是校验 JWT 的签名
        if token != ADMIN_PASSWORD {
            // 🛑 核心操作：Abort
            // Abort() 会阻止挂在当前路由下的后续 Handler 执行
            c.AbortWithStatusJSON(401, gin.H{
                "error": "权限不足：请先登录喵！(>_<)",
            })
            return // 必须 return，否则函数会继续向下跑
        }
        
        // ✅ 核心操作：Next
        // 验证通过，放行给下一个处理函数（比如发布文章的 Controller）
        c.Next()
    }
}

3. 路由分组：声明式权限管理

有了中间件，我们不需要在每个接口里写 if password == ...。我们利用 路由组 (Group) 来圈定保护范围。

func main() {
    r := gin.Default()

    // === 公共区域 (Public) ===
    // 任何人都可以看文章，不需要 Token
    r.GET("/posts", postController.GetList)
    r.POST("/login", authController.Login) // 登录接口本身必须是公开的

    // === 禁区 (Private/Admin) ===
    // 使用 Use() 挂载我们刚才写的中间件
    admin := r.Group("/admin")
    admin.Use(AuthMiddleware()) 
    {
        // 只有携带正确 Token 的请求才能到达这里
        admin.POST("/posts", postController.Create)   // 写文章
        admin.DELETE("/posts/:id", postController.Delete) // 删文章
    }

    r.Run(":8080")
}

第三章：前端实现 —— 状态管理与微交互 (Native JS)

前端的难点在于：HTTP 是无状态的，浏览器怎么“记住”我登录了？ 以及，如何通过微小的动画提升用户体验？

1. 状态持久化：LocalStorage

我们使用 localStorage 而不是 sessionStorage，这样即使用户关闭浏览器再打开，登录状态依然存在。

// static/js/user.js

// 封装一个 User 模块，负责管理身份
const UserModule = {
    // 检查是否登录：也就是看看兜里有没有 Token
    isLoggedIn() {
        return !!localStorage.getItem('auth_token');
    },

    // 登录成功后的处理
    loginSuccess(token, userInfo) {
        // 🗝️ 核心：把 Token 存起来！
        localStorage.setItem('auth_token', token);
        localStorage.setItem('user_info', JSON.stringify(userInfo));
        
        // 刷新页面，让 UI 根据新状态重新渲染
        location.reload();
    },

    // 退出登录
    logout() {
        // 销毁 Token
        localStorage.removeItem('auth_token');
        location.reload();
    }
};

2. 发起带权的请求 (Fetch Wrapper)

这是最关键的一步。当我们调用后端的 /admin 接口时，必须手动把 Token 塞进 Header 里。

async function deleteArticle(id) {
    const token = localStorage.getItem('auth_token');
    
    // 如果没有 Token，直接在这里拦截，省去一次网络请求
    if (!token) {
        alert("请先登录！");
        return;
    }

    const response = await fetch(`/admin/posts/${id}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            // 🗝️ 核心：出示通行证！名字要和后端 GetHeader 里的保持一致
            'Authorization': token 
        }
    });

    if (response.status === 401) {
        // 容错处理：比如 Token 过期了，或者被后端改了密码
        alert("登录失效，请重新登录");
        UserModule.logout();
    }
}

3. UI 交互：Q 弹的错误反馈

当用户输错密码时，不要只弹一个冰冷的 alert。我们用 CSS 动画模拟一个“摇头”的动作，这会让网页感觉更有生命力。

CSS (login.css): 利用 cubic-bezier 贝塞尔曲线，实现一种富有弹性的抖动。

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); } /* 向左猛甩 */
    40%, 80% { transform: translateX(10px); }  /* 向右猛甩 */
}

/* 激活这个类名时，执行 0.5秒 的动画 */
.login-box.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

JS 调用:

if (!response.ok) {
    // 添加类名触发动画
    loginBox.classList.add('shake');
    
    // 500ms 动画结束后，移除类名，以便下次还能触发
    setTimeout(() => {
        loginBox.classList.remove('shake');
    }, 500);
}

第四章：安全性反思 (Production Note)

写到这里，我们已经完成了一个功能闭环。但作为一个有追求的开发者，必须诚实地指出当前实现的局限性。

如果这是在公司级的生产环境，我们需要做以下升级：

拒绝明文传输：Token 和密码目前是在 HTTP 裸奔的。解决方案：必须部署 SSL 证书，启用 HTTPS。
拒绝前端明文存储：LocalStorage 容易被 XSS 攻击读取。解决方案：使用 HttpOnly Cookie，这样 JS 读不到，但浏览器发请求会自动带上。
Token 时效性：目前的 Token 是永久有效的。解决方案：引入 JWT (JSON Web Token)，设置 exp (过期时间) 字段。
密码存储：后端不应明文比对密码。解决方案：数据库存储密码的哈希值（如 bcrypt），比对时使用 bcrypt.CompareHashAndPassword。

第五章：demo 展示

你可以在自己的电脑上尝试运行以下代码

项目结构

demo/
├── main.go        # 后端：负责鉴权和 API
└── index.html     # 前端：包含页面、样式和 JS 逻辑

1. 后端代码 (`main.go`)

这里展示了中间件拦截和 Token 验证的核心逻辑。

package main

import (
	"net/http"
	"github.com/gin-gonic/gin"
)

// 🔐 配置上帝密码 (实际开发请用环境变量)
const APP_PASSWORD = "miku"

func main() {
	r := gin.Default()

	// 1. 静态文件服务 (用来展示前端页面)
	r.LoadHTMLFiles("index.html")
	r.GET("/", func(c *gin.Context) {
		c.HTML(200, "index.html", nil)
	})

	// 2. 登录接口 (公开)
	r.POST("/api/login", func(c *gin.Context) {
		var json struct {
			Password string `json:"password"`
		}
		if c.ShouldBindJSON(&json) == nil && json.Password == APP_PASSWORD {
			// 登录成功，直接把密码当作 Token 返回 (简化演示)
			c.JSON(200, gin.H{
				"token": APP_PASSWORD,
				"msg":   "欢迎回来，主人！",
			})
		} else {
			c.JSON(401, gin.H{"error": "密码错误喵！"})
		}
	})

	// 3. 需要权限的接口组
	admin := r.Group("/admin")
	admin.Use(AuthMiddleware()) // 🛡️ 挂载鉴权中间件
	{
		admin.POST("/delete", func(c *gin.Context) {
			c.JSON(200, gin.H{"status": "success", "data": "文章已删除！"})
		})
	}

	r.Run(":8080")
}

// 🛡️ 核心中间件：检查请求头里有没有 Token
func AuthMiddleware() gin.HandlerFunc {
	return func(c *gin.Context) {
		token := c.GetHeader("Authorization")

		if token != APP_PASSWORD {
			// 🚫 拦截请求，不再往下执行
			c.AbortWithStatusJSON(401, gin.H{"error": "无权访问，请先登录！"})
			return
		}

		// ✅ 放行
		c.Next()
	}
}

2. 前端代码 (`index.html`)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Mikuweb 鉴权演示</title>
    <style>
        /* ✨ 简单的居中样式 */
        body {
            font-family: sans-serif;
            background: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .card {
            background: white;
            padding: 2rem;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            text-align: center;
            width: 300px;
        }
        input, button {
            width: 100%;
            margin-top: 10px;
            padding: 10px;
            box-sizing: border-box;
        }
        /* 🔴 核心：错误时的抖动动画 */
        .shake {
            animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
        }
        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }
    </style>
</head>
<body>

<div class="card" id="login-box">
    <h2>🔐 请登录</h2>
    <input type="password" id="password" placeholder="输入 miku 试试">
    <button onclick="handleLogin()">登录</button>
</div>

<div class="card" id="admin-box" style="display: none;">
    <h2>👋 管理员模式</h2>
    <p>Token 已保存到 LocalStorage</p>
    <button onclick="sensitiveAction()">🗑️ 测试删除文章</button>
    <button onclick="logout()" style="background: #ff4757; color: white;">退出登录</button>
</div>

<script>
    // 🔄 页面加载时检查状态
    const token = localStorage.getItem('auth_token');
    if (token) toggleView(true);

    // 1️⃣ 登录逻辑
    async function handleLogin() {
        const pwd = document.getElementById('password').value;
        const box = document.getElementById('login-box');

        const res = await fetch('/api/login', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ password: pwd })
        });

        if (res.ok) {
            const data = await res.json();
            localStorage.setItem('auth_token', data.token); // 保存 Token
            toggleView(true);
            alert(data.msg);
        } else {
            // ❌ 触发抖动动画
            box.classList.remove('shake'); // 重置动画
            void box.offsetWidth;          // 强制重绘
            box.classList.add('shake');    // 再次添加
        }
    }

    // 2️⃣ 敏感操作 (带 Token 请求)
    async function sensitiveAction() {
        const res = await fetch('/admin/delete', {
            method: 'POST',
            headers: {
                // 🗝️ 核心：把 Token 亮给后端看
                'Authorization': localStorage.getItem('auth_token')
            }
        });

        if (res.status === 401) {
            alert("Token 失效，请重新登录！");
            logout();
        } else {
            const data = await res.json();
            alert("操作成功：" + data.data);
        }
    }

    // 3️⃣ 辅助功能
    function logout() {
        localStorage.removeItem('auth_token');
        location.reload();
    }

    function toggleView(isLoggedIn) {
        document.getElementById('login-box').style.display = isLoggedIn ? 'none' : 'block';
        document.getElementById('admin-box').style.display = isLoggedIn ? 'block' : 'none';
    }
</script>
</body>
</html>

总结

通过手搓这套系统，我们实际上复习了 Web 开发中最重要的几个概念：

中间件模式：如何解耦业务与鉴权。
RESTful 规范：利用 Header 传递元数据。
状态管理：前端如何利用 Storage 维持会话。
交互细节：如何用 CSS 提升用户体验。

哪怕是最简单的“单密码”系统，只要用心雕琢，也能成为你技术栈中闪光的一环。

手搓深色模式：一行 CSS 类的轻量级无依赖方案（支持 iframe 同步）

Sat, 29 Aug 2026 16:00:00 GMT

在现代 Web 开发中，深色模式（Dark Mode）几乎成了标配。虽然有很多 UI 库自带这个功能，但作为一个喜欢掌控细节的开发者，自己“手搓”一套方案不仅代码量小，而且能完全满足定制化需求（比如复杂的 iframe 嵌套场景）。

今天就来分享一套轻量级、无依赖、支持 iframe 同步的深浅色模式切换方案。

核心原理：一行 CSS 类的魔法

我们的实现逻辑非常简单粗暴但有效： 通过给 <body> 标签添加一个 dark-mode 类来控制全局样式。

默认状态：<body> 无类名 -> 浅色模式。
深色状态：<body> 有 .dark-mode 类名 -> 深色模式。

第一步：CSS 样式的分层设计

为了维护方便，我们建议采用覆盖式写法。默认写浅色样式，然后通过 CSS 优先级覆盖深色样式。

/* === 默认样式 (浅色模式) === */
.article-card {
    background: #fff;
    color: #333;
    transition: background 0.3s, color 0.3s; /* 加上过渡动画更丝滑 */
}

/* === 深色模式 (覆盖样式) === */
/* 核心技巧：利用 body.dark-mode 提高权重 */
body.dark-mode .article-card {
    background: #2a2a2a;
    color: #f0f0f0;
}

提示：如果你的项目很大，建议将深色样式拆分到单独的文件中，便于管理。

第二步：JavaScript 逻辑核心

我们需要一个“大脑”来处理三个任务：

切换：点击按钮修改 class。
记忆：使用 localStorage 记住用户的选择。
同步：确保刷新页面后主题不丢失。

在你的全局 JS 文件（例如 navbar.js）中加入以下逻辑：

1. 页面加载时的自动检测

// 页面加载瞬间，立即读取偏好
// 放在 DOMContentLoaded 或 <head> 中可以减少闪烁
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
    document.body.classList.add('dark-mode');
}

2. 切换按钮的点击事件

themeToggle.addEventListener('click', function() {
    // 1. 切换当前 body 的类
    const isDark = document.body.classList.toggle('dark-mode');
    
    // 2. 保存状态到本地存储
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
    
    // 3. 更新按钮文字或图标
    this.textContent = isDark ? '🌞' : '🌙';
    
    // 4. (进阶) 同步给子页面，见下文
    syncThemeToIframe(isDark);
});

第三步：攻克难点—— Iframe 跨页面同步

很多传统网页架构使用 iframe 来加载内容，这就导致了一个痛点：主页变黑了，iframe 里面还是白的。

我们需要实现主页面与 iframe 的双向通信。

场景 A：主页面控制 iframe（父传子）

当我们在主导航栏点击切换时，需要手动去抓取 iframe 的 DOM 并修改它：

const syncThemeToIframe = (isDark) => {
    const iframe = document.getElementById('contentFrame');
    // 必须确保 iframe 已加载且同源
    if (iframe && iframe.contentDocument && iframe.contentDocument.body) {
        // 同步 toggle 类名
        iframe.contentDocument.body.classList.toggle('dark-mode', isDark);
    }
};

场景 B：Iframe 加载时的自我感知（子查父/存储）

当 iframe 里的页面被刷新或跳转时，它需要知道当前是什么模式。

方法 1：读取共享的 LocalStorage（推荐） 只要 iframe 和主页面同源（Domain 相同），它们共享 localStorage。在 iframe 内部引用的 JS 中：

// iframe 内部脚本
document.addEventListener('DOMContentLoaded', function() {
    // 直接读取统一的存储键值
    if (localStorage.getItem('theme') === 'dark') {
        document.body.classList.add('dark-mode');
    }
});

方法 2：监听主框架的消息（更严谨） 在主页面的 main-frame.js 中监听 iframe 的加载事件：

iframe.addEventListener('load', () => {
    // 只要主页面是黑的，加载完新的 iframe 页面后，强制把它也变黑
    const isParentDark = document.body.classList.contains('dark-mode');
    if (isParentDark) {
        iframe.contentDocument.body.classList.add('dark-mode');
    }
});

效果展示

总结与数据流图

这一套方案的数据流向非常清晰：

用户动作 -> 触发 JS 事件。
DOM 操作 -> 实时修改 CSS 类（视觉反馈）。
持久化 -> 写入 localStorage（防止刷新丢失）。
传递 -> 穿透 iframe 边界同步状态。

用户点击 
   ↓
[主页面 body 变黑] ──(同步)──> [Iframe body 变黑]
   ↓
[写入 localStorage]
   ↓
(用户刷新页面)
   ↓
[读取 localStorage] ──> [恢复深色模式]

注意事项

同源策略：iframe 操作 contentDocument 或共享 localStorage 必须要求主页面和子页面在同一个域名下。
样式优先级：切记深色模式的 CSS 选择器权重必须高于默认样式（使用 body.dark-mode .class 即可完美解决）。
闪烁问题：将读取 localStorage 的脚本放在 HTML 的 <head> 底部执行，可以最大程度避免页面先白后黑的“闪烁”现象。

希望这篇教程能帮你轻松搞定网页的“夜间模式”！快去试试吧！

手搓 Markdown 渲染器：Fetch API 与三个经典工具库的安全渲染流水线

Sat, 29 Aug 2026 16:00:00 GMT

在现代前端开发中，我们习惯了用 React、Vue 配合各种复杂的插件来渲染内容。但有时，我们只是想在一个简单的静态网页上展示一篇 README 或技术文档，引入一套重型框架显得有些“杀鸡用牛刀”。

今天，我们就回归本源，利用浏览器原生的 Fetch API 配合三个经典的工具库，手搓一个安全、漂亮且支持代码高亮的 Markdown 渲染器。

核心架构：渲染流水线

要在网页上把 Markdown 变成 HTML，其实就是建立一条数据处理的“流水线”。整个过程可以分为四个步骤：

取货 (Fetch)：通过网络请求获取 .md 文件的纯文本内容。
翻译 (Parse)：将 Markdown 语法转换成 HTML 字符串（使用 marked）。
安检 (Sanitize)：清洗 HTML，移除恶意脚本防止 XSS 攻击（使用 DOMPurify）。
装修 (Highlight & Style)：给代码块上色，并应用排版样式（使用 highlight.js 和 GitHub CSS）。

1. 准备工具 (The Stack)

我们要用到三个“前端老字号”库，直接通过 CDN 引入，无需 npm 安装，无需打包。

Marked: 负责核心的 Markdown 解析，速度快，体积小。
DOMPurify: 负责安全。（极其重要） 因为 Markdown 允许嵌入 HTML，如果不清洗，黑客可以直接写入 <script> 攻击你的用户。
Highlight.js: 负责自动检测代码语言并高亮。

2. 核心代码实现

第一步：引入资源

除了 JS 库，为了让排版好看，我们直接引入 GitHub Markdown CSS，让你的文章看起来像在 GitHub 上一样专业。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.0/github-markdown-light.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.8/purify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

第二步：编写渲染逻辑

这是整个引擎的心脏。我们通过 fetch 读取本地或远程的文件，然后依次调用库函数进行处理。

const contentDiv = document.getElementById('content');
const mdUrl = './post.md'; // 你的文件路径

fetch(mdUrl)
    .then(response => {
        if (!response.ok) throw new Error("文件加载失败 QAQ");
        return response.text(); // 拿到纯文本
    })
    .then(text => {
        // 1. 翻译：Markdown -> HTML
        const dirtyHtml = marked.parse(text);

        // 2. 安检：清洗脏代码 (防 XSS)
        const cleanHtml = DOMPurify.sanitize(dirtyHtml);

        // 3. 上架：插入页面
        contentDiv.innerHTML = cleanHtml;

        // 4. 装修：代码高亮
        contentDiv.querySelectorAll('pre code').forEach((block) => {
            hljs.highlightElement(block);
        });
    })
    .catch(err => {
        console.error(err);
        contentDiv.innerHTML = `<p style="color:red">加载出错了: ${err.message}</p>`;
    });

3. 常见坑点：CORS 跨域

很多新手在写这段代码时，会直接双击 index.html 打开，然后发现控制台报错：

Access to fetch at ‘file://…’ from origin ‘null’ has been blocked by CORS policy.

原因：出于安全策略，浏览器禁止网页直接通过 file:// 协议读取硬盘文件。

解决：你必须启动一个本地 HTTP 服务器。

VS Code 用户：安装 “Live Server” 插件，右键点击 HTML 文件选择 “Open with Live Server”。
Python 用户：终端运行 python -m http.server。

完整演示代码

你可以新建一个 index.html，同级目录下放一个 post.md，然后把下面的代码复制进去体验。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生 Markdown 渲染器 Demo</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.0/github-markdown-light.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">

    <style>
        body {
            background-color: #f6f8fa;
            padding: 20px;
            font-family: -apple-system, sans-serif;
        }
        
        /* 模拟一张 A4 纸的阅读体验 */
        .page-container {
            max-width: 850px;
            margin: 0 auto;
            background: white;
            border: 1px solid #d0d7de;
            border-radius: 6px;
            padding: 40px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        /* 必须加上这个类名，github-markdown-css 才会生效 */
        .markdown-body {
            box-sizing: border-box;
            min-width: 200px;
            max-width: 100%;
        }

        .loading { text-align: center; color: #666; margin-top: 50px; }
    </style>
</head>
<body>

    <div class="page-container">
        <div id="content" class="markdown-body">
            <div class="loading">正在加载文章... (∠・ω< )⌒★</div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.8/purify.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

    <script>
        // 配置：你的 Markdown 文件路径
        const FILE_PATH = './post.md'; 

        const contentDiv = document.getElementById('content');

        // 开始加载
        fetch(FILE_PATH)
            .then(response => {
                if (!response.ok) throw new Error(`状态码 ${response.status}`);
                return response.text();
            })
            .then(text => {
                // 1. Parse: 转换
                const rawHtml = marked.parse(text);
                
                // 2. Sanitize: 清洗 (安全第一!)
                const safeHtml = DOMPurify.sanitize(rawHtml);
                
                // 3. Render: 注入
                contentDiv.innerHTML = safeHtml;
                
                // 4. Highlight: 高亮代码块
                contentDiv.querySelectorAll('pre code').forEach((block) => {
                    hljs.highlightElement(block);
                });
            })
            .catch(error => {
                console.error(error);
                contentDiv.innerHTML = `
                    <div style="text-align:center; color:#cf222e;">
                        <h3>加载失败</h3>
                        <p>${error.message}</p>
                        <small>提示：请确保使用了 Live Server 或本地服务器运行</small>
                    </div>
                `;
            });
    </script>
</body>
</html>

总结

看，我们没有使用任何复杂的构建工具（Webpack/Vite），仅用了不到 50 行代码，就实现了一个功能完备的 Markdown 阅读器。

这种“手搓”的方式非常适合个人博客、简单的文档站点，或者通过这一过程去深入理解浏览器如何处理文本和 DOM。

Happy Coding! (∠・ω< )⌒★

把苹果的液态玻璃搬进网页：从毛玻璃到真·液态玻璃的完整实现

Sat, 29 Aug 2026 16:00:00 GMT

从 macOS 到 HarmonyOS：液态玻璃的前世今生

2024 年 WWDC，苹果发布了全新设计语言 Liquid Glass（液态玻璃），随 macOS Sequoia 与 iOS 18 铺开。它不再是 2013 年 iOS 7 那层简单的毛玻璃（Frosted Glass），而是一种会「折射」的材质：窗口边缘像透镜一样把背后的内容扭曲，高光随视角流动，玻璃仿佛真的有了厚度和曲率。

liquid_glass

苹果之后，各大厂商迅速跟进。华为 HarmonyOS NEXT 把「玻璃拟态」作为核心设计语言贯穿全系统；小米、OPPO 的系统中也不难看到类似材质的影子。一时间，「玻璃拟态」成了继拟物化、扁平化、新拟态（Neumorphism）之后的新一轮质感竞赛。

对前端开发者来说，这层材质有没有办法用 Web 技术复刻？答案是：能。这篇文章就用我博客里真实跑着的一套实现，把原理拆开讲透，文末附一个开箱即用的单文件 Demo。

本文代码来自本站开屏页的液态玻璃 Dock、顶栏与搜索框，你可以随时来 xunyi.cloud 亲手摸一摸这些玻璃。

三层递进：从模糊到折射

理解液态玻璃，最好把它拆成三层，每一层都能独立实现：

┌─────────────────────────────────┐
│ ③ 折射层：背景内容边缘扭曲       │  ← Liquid Glass 的灵魂
├─────────────────────────────────┤
│ ② 模糊层：背景内容整体虚化       │  ← 传统毛玻璃
├─────────────────────────────────┤
│ ① 质感层：半透明底 + 高光 + 阴影  │  ← 任何「玻璃感」的底色
└─────────────────────────────────┘

第一层：质感

半透明白底、1px 浅色边框、顶部一道斜向高光、底部柔和的投影：

.glass {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 36px rgba(10, 18, 34, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
              rgba(255,255,255,0.56) 5%, rgba(255,255,255,0) 40%);
}

这层决定「像不像玻璃」，但还不会「动」。

第二层：模糊

backdrop-filter 一行代码让元素背后的内容虚化：

backdrop-filter: blur(24px) saturate(1.3);

这就是 2013 年至今的「毛玻璃」。但它有个致命的局限：整个玻璃面均匀模糊，边缘没有任何光学变化——而真实的玻璃，越靠近边缘，背后的景物弯折越厉害。

第三层：折射

液态玻璃的关键在于：模糊不是均匀的，边缘要产生「透镜畸变」。背后的文字和图像经过玻璃边缘时，应该被轻微地拉扯、弯曲。

浏览器没有现成的「折射」CSS 属性，但 SVG 的滤镜体系里藏着一个完美的原语——feDisplacementMap。它能拿一张「位移图」，按图上每个像素的 R/G 通道值，把目标画面往横/竖方向推开。我们要做的，就是自己画一张位移图。

核心实现：用 Canvas 画一张位移图

整体渲染管线如下：

flowchart LR
  A[玻璃容器 rect] --> B[逐像素 SDF 计算]
  B --> C[边缘位移强度图]
  C --> D[Canvas 像素数组 R/G 编码]
  D --> E[canvas.toDataURL 喂给 feImage]
  E --> F[feDisplacementMap 扭曲背景]
  F --> G[backdrop-filter: url#filter + blur]

第一步：用 SDF 描述「玻璃的形状」

SDF（Signed Distance Field，有符号距离场）能回答一个问题：任意一个像素到玻璃边缘的距离是多少？ 对于圆角矩形，SDF 函数长这样：

function roundedRectSdf(x: number, y: number, halfW: number, halfH: number, r: number) {
  // 把坐标变换到矩形中心，先向内收缩一个圆角半径
  const qx = Math.abs(x) - halfW + r;
  const qy = Math.abs(y) - halfH + r;
  // 内部点取负值，外部点取到圆角矩形的欧氏距离
  return Math.min(Math.max(qx, qy), 0) + Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) - r;
}

第二步：把距离映射成「折射强度」

玻璃的边缘折射不是突然出现的，而是有一段过渡带。用 smoothStep 把距离值揉成 0~1 的强度：

const smoothStep = (a: number, b: number, t: number) => {
  const n = Math.max(0, Math.min(1, (t - a) / (b - a)));
  return n * n * (3 - 2 * n);
};

// edgeDistance 由 SDF 得出；cornerSoftness 控制过渡带宽度
const edgeDisplacement = smoothStep(1, 0, edgeDistance - cornerSoftness);
const scaled = smoothStep(0, 1, edgeDisplacement);

// 边缘再加一圈「增强环」，模拟光线掠过玻璃棱边的亮度
const edgeRing = 1 - smoothStep(-0.16, 0.24, edgeDistance);
const edgeBoost = 1 + edgeRing * edgeRefractionStrength;

第三步：编码进位移图

浏览器要求 feDisplacementMap 的位移图里：R 通道 = X 方向位移，G 通道 = Y 方向位移，取值范围 0255 映射到 -11。我们把每个像素算出的位移向量归一化后写进 Canvas：

const data = new Uint8ClampedArray(width * height * 4);
// 先算出全图最大位移，用于归一化
// displacement 数组存每个像素的 (dx, dy)

for (let i = 0; i < data.length; i += 4) {
  const r = (dx / maxScale) / 2 + 0.5;  // 映射到 0..1
  const g = (dy / maxScale) / 2 + 0.5;
  data[i]     = Math.round(r * 255);
  data[i + 1] = Math.round(g * 255);
  data[i + 3] = 255;                    // 全不透明
}
ctx.putImageData(new ImageData(data, width, height), 0, 0);

第四步：把 Canvas 接进 SVG 滤镜

这是整个方案里最巧妙的一步：SVG 的 feImage 可以直接引用 canvas.toDataURL() 生成的 data URI，于是「JS 画的图」无缝变成「滤镜的输入」：

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
const feImage = document.createElementNS('http://www.w3.org/2000/svg', 'feImage');
const feDisplacement = document.createElementNS('http://www.w3.org/2000/svg', 'feDisplacementMap');

feImage.setAttributeNS(xlinkNS, 'href', canvas.toDataURL());
feDisplacement.setAttribute('in', 'SourceGraphic');
feDisplacement.setAttribute('in2', `${id}-map`);
feDisplacement.setAttribute('xChannelSelector', 'R');
feDisplacement.setAttribute('yChannelSelector', 'G');

filter.append(feImage, feDisplacement);
svg.append(filter);
document.body.appendChild(svg);

最后，把整条滤镜链挂到玻璃元素的 backdrop-filter 上，与基础的 blur/对比度叠加：

target.style.backdropFilter =
  `url(#${id}) blur(${blur}px) contrast(${contrast}) brightness(${brightness}) saturate(${saturate})`;

url(#id) 引用的滤镜作用于元素背后的画面（backdrop），于是背景先被位移图「折射」，再被 CSS 滤镜模糊增亮——三层效果至此全部打通。

让玻璃「活」起来：鼠标跟随折射

静态折射已经很像玻璃了，但苹果的液态玻璃还会随视角微微流动。Web 上没有视角，但鼠标就是最好的视角：

if (interactive) {
  target.addEventListener('mousemove', (event) => {
    const rect = target.getBoundingClientRect();
    // 鼠标在玻璃上的归一化坐标 (0~1)
    mouseX = (event.clientX - rect.left) / rect.width;
    mouseY = (event.clientY - rect.top) / rect.height;
    render();  // 重新生成位移图
  });
}

在逐像素循环里，把鼠标位置当作一个「引力源」，离鼠标越近的像素位移越小，越远则被推开：

const dxMouse = uvX - mouseX;
const dyMouse = uvY - mouseY;
const mouseDistance = Math.hypot(dxMouse, dyMouse);
// 高斯衰减：只在鼠标附近小范围产生影响
const mouseInfluence = Math.exp(-mouseDistance * 16) * 0.06;
mapped = { x: mapped.x + dxMouse * mouseInfluence,
           y: mapped.y + dyMouse * mouseInfluence };

每帧重绘一张 Canvas 位图看起来重，但实际上：dpr 上限 2、玻璃通常只有几百乘几十像素，加上只在 mousemove/resize 时重绘，性能开销完全可控。

性能与降级：优雅地退化为毛玻璃

Canvas 不可用时（极端环境）：跳过位移图，backdrop-filter 只保留 blur/contrast/brightness/saturate，玻璃降级成第二层的毛玻璃，视觉不崩
ResizeObserver 监听尺寸变化自动重绘位移图；prefers-reduced-motion 用户关闭鼠标跟随
位移图只在需要时生成，常驻成本只是几张几十 KB 的位图

完整可运行 Demo

下面是一个零依赖的单文件 Demo，保存成 .html 双击打开即可玩。它是一块椭圆液态玻璃，背景铺了光晕、条纹和 emoji 网格——直接用鼠标拖动玻璃，就像捏着一块透镜扫过桌面，边缘折射与高光实时变化：

<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Liquid Glass Demo · 拖动我</title>
<style>
  * { box-sizing: border-box; }
  body { margin: 0; height: 100vh; overflow: hidden; position: relative;
         font-family: -apple-system, 'PingFang SC', sans-serif;
         background: #0f172a; user-select: none; }
  /* 复杂背景：三色光晕 + 斜向条纹 + emoji 网格 */
  .scene { position: absolute; inset: 0; overflow: hidden;
           background:
             radial-gradient(circle at 18% 22%, rgba(57,197,187,.4), transparent 42%),
             radial-gradient(circle at 82% 72%, rgba(192,132,252,.45), transparent 46%),
             radial-gradient(circle at 60% 26%, rgba(255,215,106,.28), transparent 36%); }
  .stripes { position: absolute; inset: -20%;
             background: repeating-linear-gradient(45deg,
               rgba(255,255,255,.07) 0 24px, transparent 24px 48px); }
  .grid { position: absolute; inset: 0; display: flex; flex-wrap: wrap;
          gap: 8px; padding: 10px; opacity: .92; }
  .grid span { width: 34px; height: 34px; display: grid; place-items: center; font-size: 20px; }
  .word { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%);
          font-size: 42px; font-weight: 800; letter-spacing: .18em;
          color: rgba(255,255,255,.95); text-shadow: 0 4px 24px rgba(0,0,0,.4); }
  .hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
          color: rgba(255,255,255,.65); font-size: 14px; letter-spacing: .1em; }
  /* 椭圆液态玻璃（可拖动） */
  .glass { position: absolute; width: 300px; height: 180px; left: 50%; top: 50%;
           transform: translate(-50%,-50%); border-radius: 50%; cursor: grab;
           border: 1px solid rgba(255,255,255,.55);
           background: rgba(255,255,255,.16);
           box-shadow: 0 24px 60px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.6);
           touch-action: none; }
  .glass.dragging { cursor: grabbing; }
  .glass::before { content:''; position:absolute; inset:0; border-radius:inherit;
    background: linear-gradient(120deg, rgba(255,255,255,.5) 8%, rgba(255,255,255,0) 40%); }
</style>
</head>
<body>
  <div class="scene">
    <div class="stripes"></div>
    <div class="grid" id="grid"></div>
    <div class="word">LIQUID GLASS</div>
  </div>
  <div class="glass" id="glass"></div>
  <div class="hint">🖱 拖动玻璃，看背后的世界被折射</div>
<script>
const emojis = ['🌸','🌿','🍀','💠','🔷','🟣','🫧','✨','🎐','🌊','🍃','💧'];
const grid = document.getElementById('grid');
for (let i = 0; i < 180; i++) {
  const s = document.createElement('span');
  s.textContent = emojis[i % emojis.length];
  grid.appendChild(s);
}

const NS = 'http://www.w3.org/2000/svg';
const XNS = 'http://www.w3.org/1999/xlink';
const target = document.getElementById('glass');

const svg = document.createElementNS(NS, 'svg');
svg.setAttribute('width', 0); svg.setAttribute('height', 0);
svg.style.position = 'fixed'; svg.style.pointerEvents = 'none';
const filter = document.createElementNS(NS, 'filter');
filter.setAttribute('id', 'lg');
filter.setAttribute('filterUnits', 'userSpaceOnUse');
filter.setAttribute('color-interpolation-filters', 'sRGB');
const feImage = document.createElementNS(NS, 'feImage');
feImage.setAttribute('id', 'lg-map');
const feMap = document.createElementNS(NS, 'feDisplacementMap');
feMap.setAttribute('in', 'SourceGraphic');
feMap.setAttribute('in2', 'lg-map');
feMap.setAttribute('xChannelSelector', 'R');
feMap.setAttribute('yChannelSelector', 'G');
filter.append(feImage, feMap); svg.append(filter);
document.body.appendChild(svg);

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const smooth = (a,b,t)=>{const n=Math.max(0,Math.min(1,(t-a)/(b-a)));return n*n*(3-2*n);};
// 椭圆 SDF：坐标按长短轴缩放成单位圆后算距离，再按短轴还原尺度
const ellipseSdf = (x, y, rx, ry) => {
  const len = Math.hypot(x / rx, y / ry);
  return (len - 1) * Math.min(rx, ry);
};

function render() {
  const rect = target.getBoundingClientRect();
  const dpr = Math.min(devicePixelRatio || 1, 2);
  const w = Math.max(1, Math.floor(rect.width * dpr));
  const h = Math.max(1, Math.floor(rect.height * dpr));
  canvas.width = w; canvas.height = h;
  feImage.setAttribute('width', rect.width);
  feImage.setAttribute('height', rect.height);
  const data = new Uint8ClampedArray(w * h * 4);
  const disp = []; let maxScale = 0;
  for (let i = 0; i < data.length; i += 4) {
    const x = (i / 4) % w, y = Math.floor(i / 4 / w);
    const ux = x / w - 0.5, uy = y / h - 0.5;
    // 椭圆边缘折射 + 边缘增强环（透镜棱边更亮）
    const edge = ellipseSdf(ux, uy, 0.5, 0.5);
    const strength = smooth(0, 1, smooth(1, 0, edge - 0.14));
    const ring = 1 - smooth(-0.14, 0.2, edge);
    const boost = 1 + ring * 0.7;
    const mx = ux * strength + 0.5, my = uy * strength + 0.5;
    const dx = (mx * w - x) * boost, dy = (my * h - y) * boost;
    maxScale = Math.max(maxScale, Math.abs(dx), Math.abs(dy));
    disp.push(dx, dy);
  }
  maxScale = Math.max(maxScale * 0.5, 0.0001);
  let j = 0;
  for (let i = 0; i < data.length; i += 4) {
    data[i]     = Math.round((disp[j++] / maxScale / 2 + 0.5) * 255);
    data[i + 1] = Math.round((disp[j++] / maxScale / 2 + 0.5) * 255);
    data[i + 3] = 255;
  }
  ctx.putImageData(new ImageData(data, w, h), 0, 0);
  feImage.setAttributeNS(XNS, 'href', canvas.toDataURL());
  feMap.setAttribute('scale', maxScale / dpr);
}
target.style.backdropFilter =
  'url(#lg) blur(.4px) contrast(1.16) brightness(1.05) saturate(1.3)';

// 拖动：把玻璃当透镜扫过背景，折射实时重绘
let dragging = false, offX = 0, offY = 0;
target.addEventListener('pointerdown', (e) => {
  dragging = true;
  target.classList.add('dragging');
  target.setPointerCapture(e.pointerId);
  const r = target.getBoundingClientRect();
  offX = e.clientX - r.left; offY = e.clientY - r.top;
});
target.addEventListener('pointermove', (e) => {
  if (!dragging) return;
  target.style.left = (e.clientX - offX) + 'px';
  target.style.top  = (e.clientY - offY) + 'px';
  render();
});
target.addEventListener('pointerup', () => {
  dragging = false;
  target.classList.remove('dragging');
});
new ResizeObserver(render).observe(target);
render();
</script>
</body>
</html>

本站的落地：Dock、顶栏与搜索框

这套实现没有停留在 Demo，而是真实跑在 xunyi.cloud 的各个玻璃面上：

开屏 Dock：液态玻璃底座 + 折射跟随鼠标，配合 rAF 惯性放大、相邻图标挤压的 macOS 手感
博客顶栏：跨页 persist 的通栏玻璃条，滚动时玻璃变实，夜间切换薰衣草紫
搜索弹窗、音乐面板：同一套 createLiquidGlass 工具，参数各自微调

落地过程中踩过的坑也值得记一笔：backdrop-filter 上同时挂 url(#filter) 与 CSS 滤镜时，顺序与 filterUnits 设置都会影响渲染；Safari 需要 -webkit-backdrop-filter 前缀；而 canvas.toDataURL() 每帧生成 data URI 有 GC 压力，适合「按需重绘」而不是逐帧循环。

写在最后

从 2013 年的毛玻璃到 2024 年的液态玻璃，苹果花了十一年把一层材质雕琢成品牌语言；而 Web 用 backdrop-filter、SVG feDisplacementMap 和一张 Canvas 位移图，就能让同样的质感在任何浏览器里流动。玻璃之下，折射的其实是我们对「细节」这件事的执着。

本站全部玻璃实现已开源在博客仓库，欢迎取用与魔改。

初音画廊 BGM 进化史：从 APlayer 到 iframe 架构

Sat, 29 Aug 2026 16:00:00 GMT

前言最近在搓我的 Web 期末大作业——一个初音未来（Miku）主题的画廊网站。页面做得很漂亮，但总觉得少了点灵魂……没错，是 BGM！本以为加个播放器很简单，结果没想到为了实现“切换页面音乐不断”，我把整个网站的架构都重构了一遍。今天就来分享一下这个从 APlayer 到 iframe 架构的进化过程。

第一阶段：初见 APlayer

为了给我的“Miku 画廊”加上音乐，我选中了颜值超高的开源播放器 APlayer。

1. 引入播放器

这个步骤很简单，不用 npm，直接用 CDN 引入 CSS 和 JS 就能用，非常适合我们这种交作业的静态页面项目。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

2. 初始化

我在页面底部加了一个 <div id="aplayer"></div>，然后写了段 JS：

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,          // 开启吸底模式，让它一直悬浮在左下角
    theme: '#39c5bb',     // Miku专属的葱绿色！
    audio: [
        {
            name: 'World is Mine',
            artist: 'Hatsune Miku',
            url: 'music/world_is_mine.mp3',
            cover: 'img/miku_cover.jpg'
        }
    ]
});

效果：页面一打开，左下角就出现了播放器，点击播放，Miku 的歌声就出来了。完美？并没有。

第二阶段：遇到的痛点

我兴奋地点击导航栏去查看“精选展厅”页面，结果…… 音乐停了！ 😱 原因分析：传统的网页跳转（`a href="page2.html"`）本质上是浏览器销毁当前页面，加载新页面。当前页面被销毁了，依附在页面上的 JS 播放器自然也就“挂了”。到了新页面，播放器重新初始化，音乐又从头开始放。这对于听歌体验来说简直是灾难！我想要的是网易云音乐那种“页面随便切，歌声永流传”的效果。

第三阶段：重构！iframe 主框架大法

为了解决这个问题，我参考了大佬的思路，决定使用 iframe（内嵌框架） 技术。

核心思路

把网页拆成“外壳”和“内容”两部分：

外壳 (Shell)：包含侧边导航栏 + 音乐播放器。这个外壳永远不会刷新。
内容 (Content)：用一个 <iframe> 标签来显示具体的子页面（如首页、画廊页）。切换页面时，只替换 iframe 里的链接。

1. 文件结构调整

我重新规划了项目结构：

static/
├── css/
│   ├── main-frame.css      # 专门给iframe布局用的
│   └── navbar.css          # 导航栏样式
├── html/
│   ├── main.html           # 【新入口】主框架外壳
│   ├── index.html          # 原来的首页（现在变成子页面）
│   └── ...                 # 其他页面
└── js/
    ├── main-frame.js       # 控制iframe切换
    └── music_aplayer.js    # 播放器配置

2. 编写主框架 (main.html)

这是整个系统的核心。我在 main.html 里写了这样的布局：

<body>
    <iframe src="index.html" id="contentFrame" class="content-frame" name="contentFrame"></iframe>

    <div id="aplayer"></div>

    <script src="../js/navbar.js"></script>
    <script src="../js/main-frame.js"></script>
    <script src="../js/music_aplayer.js"></script>
</body>

3. CSS 布局魔法 (main-frame.css)

为了让 iframe 看起来不像个旧时代的网页，我们需要去掉它的边框，并处理好层级关系（z-index）：

.content-frame {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    border: none;
    z-index: 1; /* 层级最低，在最底层 */
    transition: left 0.3s ease; /* 加个动画，侧边栏展开时丝滑移动 */
}

同时，侧边栏的 z-index 设为 1000，播放器的 fixed 模式会自动处理层级，确保它们浮在内容之上。

4. 让导航栏控制 iframe (main-frame.js)

最关键的一步，不能让 <a> 标签直接跳转，而是要拦截点击事件，把目标地址赋给 iframe：

// 伪代码逻辑
link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止浏览器跳转
    const targetUrl = this.getAttribute('href');
    // 修改 iframe 的地址，实现页面局部刷新
    document.getElementById('contentFrame').src = targetUrl;
});

✨ 最终效果

现在，我的大作业变成了这样：

打开 main.html：首先看到首页，音乐播放器就位。
点击“画师副展厅”：
- 浏览器地址栏不变。
- 页面中间的内容平滑变成了新页面。
- 左下角的 APlayer 进度条还在继续走，Miku 的歌声完全没有中断！ 3. 响应式适配：在手机上，侧边栏会自动变成遮罩模式，iframe 保持不动，体验非常 App 化。

📝 踩坑总结

路径问题：音乐文件的路径要基于 main.html 的位置写（比如 ../images/music/xxx.mp3），而不是子页面。
子页面导航：因为子页面被嵌在 iframe 里，如果不做处理，子页面里可能又会显示一个导航栏。我在 navbar.js 里加了个判断 if (window.self !== window.top)，如果是被嵌套的页面，就自动隐藏导航栏。
LRC 歌词：APlayer 支持 .lrc 文件，只要配置好 lrcType: 3，歌词就能跟着动，这波大作业稳了！

结语虽然只是加个播放器，却逼着我学懂了 iframe 和单页应用（SPA）的雏形逻辑。看到网页在切换时那丝滑的体验，感觉一切折腾都值了！

Ciallo～(∠・ω< )⌒★ 下次继续折腾！

Arch Linux 美化终极指南：将 KDE Plasma 100% 变身为 macOS 风格

Sat, 29 Aug 2026 16:00:00 GMT

Arch Linux + KDE Plasma 是许多 Linux 爱好者心中的“梦幻组合”，它提供了极致的自由度和强大的性能。而 macOS 以其优雅、简洁的设计语言备受推崇。那么，我们能否将二者合一，在强大的 Arch 系统上享受到 macOS 的视觉体验呢？

在这里插入图片描述

答案是肯定的！KDE Plasma 的超高可定制性让这一切变得轻而易举。

本指南将一步步教你，如何仅使用 KDE Plasma 的原生组件和官方商店，将你的桌面环境完美复刻成 macOS 风格。这种方法可以确保最佳的稳定性和未来的系统兼容性，让你告别第三方插件可能带来的困扰。

核心改造元素

我们将围绕 macOS 的四大核心视觉元素进行改造：

全局主题：统一的配色、窗口和图标风格。
顶部菜单栏：集成了全局菜单、时间和系统托盘。
底部程序坞 (Dock)：悬浮、居中、带有程序图标。
细节微调：字体、窗口按钮位置、动态壁纸等。

第一步：奠定基础 —— 安装全局主题

这是最快的一步，一个好的全局主题能立刻让你的桌面改头换面。我们将使用非常流行的 WhiteSur 主题。

打开 “系统设置 (System Settings)” -> “外观 (Appearance)”。
在左侧选择 “全局主题 (Global Theme)”。
点击右下角的 “获取新的全局主题… (Get New Global Themes…)”。
在弹出的窗口中，搜索 WhiteSur，找到 WhiteSur Dark 或 WhiteSur Light 并点击 “安装 (Install)”。
安装后，返回“全局主题”页面，选中 WhiteSur，点击右下角的 “应用 (Apply)”。

提示：应用后，你的配色、窗口样式、图标、光标等大部分元素都应该已经很有 macOS 的感觉了。

第二步：打造灵魂 —— 顶部全局菜单栏

这是 macOS 的精髓。我们将把应用菜单（文件、编辑…）从窗口内部移到屏幕顶部。

进入编辑模式：在桌面空白处右键 -> “进入编辑模式 (Enter Edit Mode)”。
清理顶部面板：如果顶部面板上有“任务管理器”（显示窗口列表的那个），可以右键将它移除，因为这个功能将由我们下面的 Dock 实现。
添加全局菜单：点击 “添加部件… (Add Widgets…)”，搜索并拖拽 “全局菜单 (Global Menu)” 部件到顶部面板的最左侧。
布局调整：为了让右侧的系统托盘、时钟等靠右显示，从部件列表里拖拽一个 “间隔 (Spacer)” 到全局菜单和系统托盘之间。这个“间隔”会自动伸长，把右边的所有东西都推到屏幕最右边。
退出编辑模式。

第三步：创建标志 —— “插件式”悬浮程序坞 (Dock)

虽然 KDE 原生面板功能强大，但配置起来略显繁琐。一个更简单、更“插件化”的方法是直接从社区商店下载一个现成的 Dock 部件。

移除旧面板：确保屏幕底部没有多余的面板。可以在“编辑模式”下右键点击它并选择“移除”。
获取新部件：在桌面空白处右键 -> “添加部件… (Add Widgets…)”。在打开的侧边栏中，点击 “获取新部件… (Get New Widgets…)” -> “下载 Plasma 部件 (Download Plasma Widgets)”。
搜索并安装 Dock：在弹出的商店窗口中，搜索 dock。你会看到 Floating Dock 等多个选项。可以按评分或下载量排序，选择一个你喜欢的进行安装。
添加 Dock 到桌面：安装后关闭商店。回到“添加部件”列表，搜索你刚刚安装的部件名字（如 Floating Dock），然后直接把它拖拽到桌面的底部，一个配置好的 Dock 就出现了。
配置与固定程序：退出编辑模式。这些 Dock 部件通常都有自己独立的配置选项（右键点击它即可找到），比手动配置面板更直观。最后，从你的主菜单拖拽常用的程序图标到 Dock 上即可固定。

重要提示：社区开发的第三方部件可能更新不及时，在 KDE Plasma 大版本更新后有失效的风险。虽然此方法更简单，但稳定性和兼容性可能不如使用原生面板的方案。

第四步：注入灵魂 —— 细节是魔鬼

窗口按钮左置：
- 进入 “系统设置” -> “外观” -> “窗口装饰 (Window Decorations)”。
- 点击“标题栏按钮 (Titlebar Buttons)”标签页，直接用鼠标把“关闭、最小化、最大化”图标从右边拖到左边。
更换字体： macOS 的字体优雅清晰。我们可以安装一个优秀的开源替代品 Inter。
- 安装字体：
```
sudo pacman -S inter-font
```
- 应用字体：进入 “系统设置” -> “外观” -> “字体 (Fonts)”，将除“固定宽度”外的所有字体都设置为 Inter。
添加动态壁纸 (可选)： macOS 近年的动态壁纸令人印象深刻。在 KDE 上，实现这一效果最简单且功能最强大的方法，通常是从社区商店安装一个专门的动态壁纸插件。
- 获取并安装插件：右键桌面 -> “配置桌面和壁纸…”，在设置窗口的右下角点击 “获取新插件… (Get New Plugins…)”。
- 在弹出的商店窗口中，搜索 video wallpaper。你会看到 Smart Video Wallpaper Reborn 等多个选项。选择一个评分和下载量高的进行安装。
- 应用插件：安装后，注销再重新登录（或重启电脑）以确保插件被加载。再次进入“配置桌面和壁纸…”设置，在 “壁纸类型 (Wallpaper Type)” 的下拉菜单中，你应该就能找到新安装的插件（如 Smart Video Wallpaper Reborn）。
- 设置视频：选中它，你就可以在下方的设置区域添加你喜欢的视频文件，并进行详细的配置了。
  在这里插入图片描述
性能优化提示：开启硬件加速（强烈推荐） 动态壁纸会消耗更多资源。为了让它更流畅、更省电，强烈建议开启硬件加速，让显卡来处理视频解码。这需要安装对应的驱动：
```
# 适用于 Intel 核显
sudo pacman -S intel-media-driver
```
安装后重启即可生效，这对你系统上所有的视频播放都有好处。
美化登录屏幕 (可选)：
- 进入 “系统设置” -> “开机和关机 (Startup & Shutdown)” -> “登录屏幕 (SDDM)”。
- 点击 “获取新的 SDDM 主题…”，搜索 macOS 或 WhiteSur，安装并应用你喜欢的主题。

结语

恭喜你！通过以上步骤，你已经成功地在强大的 Arch Linux 上，拥有了一个媲美 macOS 的桌面环境。这正是 KDE Plasma 和 Arch Linux 的魅力所在——只要你敢想，一切皆可定制。

现在，享受你的专属桌面吧！

Arch Linux 终端美化：Starship 与 Yazi 安装配置全指南

Sat, 29 Aug 2026 16:00:00 GMT

前言

本指南将整合两个强大的终端工具——Starship 和 Yazi——的安装与配置流程，帮助你将 Arch Linux 的终端体验提升到一个新的水平。Starship 能够为你提供一个美观、信息丰富的命令提示符，而 Yazi 则是一个高效、带预览功能的终端文件管理器。

第一部分：Starship - 高度可定制的终端提示符

Starship 是一个用 Rust 编写的、速度极快、高度可定制的终端提示符。它能够在你的命令行中，根据当前目录和环境，智能地显示 Git 分支、项目版本号等关键信息。

在这里插入图片描述

1.1 安装字体 (获取图标支持)

Starship 使用了许多 Nerd Font 字体库中的特殊图标。为了能正常显示这些图标，而不是乱码方块，我们必须先安装并配置一款 Nerd Font 字体。

1.1.1 安装字体包

FiraCode Nerd Font 是一款优秀且常用的选择。

sudo pacman -S ttf-firacode-nerd

1.1.2 刷新系统字体缓存

为了让系统能立刻识别到新安装的字体，需要手动刷新字体缓存。

fc-cache -fv

1.1.3 在终端模拟器中配置字体

这是最关键的一步。你需要打开你所使用的终端软件（如 Konsole）的设置，并将字体更改为 FiraCode Nerd Font。

在这里插入图片描述

以 Konsole 为例：

打开 Konsole。
点击菜单栏 设置 -> 编辑当前方案...。
选择 外观 标签页，点击 选择字体...。
在字体列表中搜索并选中 FiraCode Nerd Font。
点击 确定 和 应用 保存设置。

1.2 安装 Starship

Starship 主程序可以直接从 Arch 官方仓库安装。

sudo pacman -S starship

1.3 在 Shell 中启用 Starship

为了让 Starship 能够接管默认的终端提示符，需要在你的 Shell 配置文件中添加一行启动命令。这一步是让配置永久生效的关键。

1.3.1 确认你的 Shell

首先，确认你当前使用的 Shell 类型。

echo $SHELL

本教程以最常见的 /bin/bash 为例。

1.3.2 添加配置到 `.bashrc`

运行以下命令，将 Starship 的启动脚本自动追加到 Bash 的配置文件末尾。

echo 'eval "$(starship init bash)"' >> ~/.bashrc

添加完成后，完全关闭并重新打开你的终端窗口，Starship 提示符就会自动生效了。

1.4 (可选) 个性化你的 Starship

你可以通过创建一个 TOML 格式的配置文件来进行高度定制。

创建配置文件：

mkdir -p ~/.config && touch ~/.config/starship.toml

编辑配置文件：
```
nano ~/.config/starship.toml
```
添加自定义配置：以下是一个简单的示例，它修改了提示符的结束符号，并设置主机名仅在 SSH 连接时显示。
```
# ~/.config/starship.toml

# 修改命令成功或失败时显示的符号
[character]
success_symbol = "[➜](bold green)"
error_symbol = "[✗](bold red)"

# 默认隐藏主机名，仅在 SSH 远程连接时显示
[hostname]
ssh_only = true
disabled = false
```
保存文件后，新配置会立即在新的终端提示符上生效。更多可用的配置项可以查阅 Starship 官方文档。

第二部分：Yazi - 高效的终端文件管理器

本部分旨在记录在 Arch Linux 上安装和配置 Yazi 的完整过程。特别针对通过 pacman 安装后可能遇到的旧版本 Yazi 的情况，该版本没有自动生成配置文件的命令，且部分配置项与新版本不同。本指南将提供一套确保可以成功配置的“手动挡”方案。

在这里插入图片描述

2.1 安装

2.1.1 安装 Yazi 主程序

Yazi 位于 Arch Linux 的官方软件仓库中，可以直接通过 pacman 安装。

sudo pacman -S yazi

2.1.2 安装预览功能依赖

为了让 Yazi 能够预览图片、视频、PDF、压缩包等文件，我们需要安装一系列的依赖工具。

从官方仓库安装：

sudo pacman -S p7zip ffmpegthumbnailer poppler bat ueberzugpp

p7zip: 用于预览压缩文件（.7z, .zip, .rar 等）。
ffmpegthumbnailer: 用于生成视频文件的缩略图。
poppler: 用于预览 PDF 文件。
bat: 用于代码文件语法高亮。
ueberzugpp: 用于在终端中显示图片。

从 AUR 仓库安装：

字体预览工具 fontpreview-ueberzug 需要从 AUR 安装。

yay -S fontpreview-ueberzug

2.2 核心配置 (手动创建)

由于我们面对的 Yazi 版本可能没有 yazi init 命令，我们需要手动创建配置文件来启用和优化预览功能。

2.2.1 创建配置目录

mkdir -p ~/.config/yazi/

2.2.2 创建并编辑主配置文件

使用文本编辑器创建一个新的 yazi.toml 文件。

nano ~/.config/yazi/yazi.toml

2.2.3 写入核心配置

将以下内容完整复制并粘贴到你打开的 yazi.toml 文件中。

# --- 插件配置 ---
# 告诉 Yazi 使用 ueberzugpp 作为图片预览工具
[plugin]
image_previewer = "ueberzugpp"

# --- 预览质量配置 ---
[preview]
# 提高 PDF 预览的清晰度 (DPI)，默认是 150
pdf_poppler_dpi = 300

# 提高图片预览的质量
# 注意：此旧版本的范围是 50-90，而不是新版的 1-10
image_quality = 85

完成后，保存并退出编辑器 (Ctrl + O, Enter, Ctrl + X)。

2.3 强烈推荐：更新系统

我们遇到的所有配置问题（没有 init 命令、配置项范围不同）都源于软件版本过旧。在 Arch Linux 这样的滚动发行版上，保持系统更新是最佳实践。

运行以下命令可以更新你系统上所有的软件包，包括 Yazi：

sudo pacman -Syu

更新后，你可能会获得一个拥有 yazi init 命令的新版本 Yazi，未来的配置会更加方便。

2.4 (可选) Shell 集成

为了在退出 Yazi 后，终端能自动跳转到最后浏览的目录，可以将以下函数添加到你的 Shell 配置文件中 (如 ~/.bashrc 或 ~/.zshrc)。

# Yazi: cd on quit
function y {
    local tmp="$(mktemp -t "yazi-cwd.XXXXX")"
    yazi --cwd-file="$tmp"
    if [ -f "$tmp" ]; then
        cd "$(cat "$tmp")"
        rm -f "$tmp"
    fi
}

添加后，使用 source ~/.bashrc (或 ~/.zshrc)使其生效，之后便可以用 y 命令来启动 Yazi。

总结

通过以上步骤，你已经成功地为你的 Arch Linux 终端配置了 Starship 提示符和 Yazi 文件管理器。这两个工具的结合，不仅能让你的终端界面更加现代化和美观，也能极大地提升你在命令行下的工作效率。建议查阅它们的官方文档，探索更多高级定制选项。

WSL 疑难杂症：设置搜索无结果问题的解决方法

Sat, 29 Aug 2026 16:00:00 GMT

问题如下

image-20251026165815387

解决方法如下

1.搜索栏搜索“WSL Settings”。

image-20251026170229286

2.更改网络设置为”Mirrored”。

image-20251026170331852

3.终端重启 WSL 服务。

wsl --shutdown

薰逸の猫窝

不到 100 行代码实现人体动作识别：Python + MediaPipe 实时骨骼动画

🧐 这是什么技术？

🚀 第一步：准备你的开发环境

👨‍💻 第二步：编写核心代码（逐行详解）

1. 导入工具并初始化

2. 打开摄像头并开始主循环

3. 图像处理与姿态估计

4. 绘制骨骼并显示结果

✅ 第三步：整合代码并运行！

💡 常见问题与展望

1: 程序报错“无法打开摄像头”怎么办？

2

总结

OpenCV 环境搭建：安装必要的开发工具与库

第 1 步：安装必要的开发工具和库

第 2 步：创建项目文件夹结构

第 3 步：下载人脸检测模型

第 4 步：编写项目代码

第 5 步：准备训练数据

第 6 步：编译项目

第 7 步：运行程序

无依赖全栈评论系统：Go (Gin) + Web Components 快速搭建

技术栈一览

第一部分：后端 —— 极速搭建 API

1. 初始化项目

2. 编写 main.go

第二部分：前端 —— 封装 Web Components

编写 index.html

运行效果

总结

手搓登录鉴权系统：用 Go (Gin) 与原生 JavaScript 从零实现完整登录流程

第一章：顶层架构设计

数据流向图

第二章：后端实现 —— 守门员的艺术 (Go + Gin)

1. 定义“上帝密码”与配置

2. 核心：编写鉴权中间件 (The Gatekeeper)

3. 路由分组：声明式权限管理

第三章：前端实现 —— 状态管理与微交互 (Native JS)

1. 状态持久化：LocalStorage

2. 发起带权的请求 (Fetch Wrapper)

3. UI 交互：Q 弹的错误反馈

第四章：安全性反思 (Production Note)

第五章：demo 展示

项目结构

1. 后端代码 (main.go)

2. 前端代码 (index.html)

总结

手搓深色模式：一行 CSS 类的轻量级无依赖方案（支持 iframe 同步）

核心原理：一行 CSS 类的魔法

第一步：CSS 样式的分层设计

第二步：JavaScript 逻辑核心

1. 页面加载时的自动检测

2. 切换按钮的点击事件

第三步：攻克难点—— Iframe 跨页面同步

场景 A：主页面控制 iframe（父传子）

场景 B：Iframe 加载时的自我感知（子查父/存储）

效果展示

总结与数据流图

注意事项

手搓 Markdown 渲染器：Fetch API 与三个经典工具库的安全渲染流水线

核心架构：渲染流水线

1. 准备工具 (The Stack)

2. 核心代码实现

第一步：引入资源

第二步：编写渲染逻辑

3. 常见坑点：CORS 跨域

完整演示代码

总结

把苹果的液态玻璃搬进网页：从毛玻璃到真·液态玻璃的完整实现

从 macOS 到 HarmonyOS：液态玻璃的前世今生

三层递进：从模糊到折射

第一层：质感

第二层：模糊

第三层：折射

核心实现：用 Canvas 画一张位移图

第一步：用 SDF 描述「玻璃的形状」

第二步：把距离映射成「折射强度」

第三步：编码进位移图

第四步：把 Canvas 接进 SVG 滤镜

2. 编写 `main.go`

编写 `index.html`

1. 后端代码 (`main.go`)

2. 前端代码 (`index.html`)

效果：页面一打开，左下角就出现了播放器，点击播放，Miku 的歌声就出来了。完美？并没有。

1.3.2 添加配置到 `.bashrc`