- 博客(19)
- 收藏
- 关注
RSS订阅原创 【全栈硬核实战】从零手搓一个基于 Gin + JS 的鉴权闭环系统
本文通过原生Go和JavaScript实现了一个完整的鉴权系统，探讨了登录功能的本质架构。文章分为后端和前端两部分：后端使用Gin框架构建中间件拦截器，通过路由分组实现权限管理；前端通过LocalStorage存储Token状态，并封装带权请求方法。系统采用单管理员模式，实现了登录凭证获取、Token验证、权限拦截的完整闭环。文中还展示了如何通过CSS动画优化交互体验，提供了从底层原理到实现细节的完整方案，帮助开发者理解鉴权系统的核心逻辑。
2025-12-10 21:46:20
1017
原创 纯 CSS 复刻 macOS 丝滑弹窗：让你的网页拥有「物理质感」
本文介绍了如何用CSS和少量JS实现macOS风格的弹窗效果。核心设计思路包括：1）毛玻璃质感，通过backdrop-filter: blur()实现背景虚化；2）弹性物理动画，利用自定义贝塞尔曲线cubic-bezier(0.34, 1.56, 0.64, 1)模拟回弹效果。文章提供了完整的HTML结构、CSS样式和JS控制代码，通过添加/移除active类名触发动画。最终效果包含柔和阴影、轻微透白背景和Q弹动画，完美复刻macOS的物理直觉交互体验。
2025-12-05 20:19:05
314
原创 原生 JS 手搓一个轻量级 Markdown 渲染器
本文介绍如何使用原生JS实现一个轻量级Markdown渲染器，无需复杂框架。通过Fetch API获取Markdown文件，利用marked库转换为HTML，使用DOMPurify进行安全过滤防止XSS攻击，最后通过highlight.js实现代码高亮。文章详细解析了实现步骤，包括CDN资源引入、核心渲染逻辑以及常见CORS问题的解决方案，并提供了完整的演示代码。这种方法适合在静态网页中简单高效地展示技术文档或README文件。
2025-12-05 20:17:36
488
原创 Web大作业踩坑日记：如何让网页切换时音乐不停？
本文分享了在Web大作业中实现页面切换时音乐连续播放的解决方案。作者最初使用APlayer播放器但发现页面跳转会中断音乐，于是重构网站架构采用iframe技术：将播放器和导航栏放在主框架(main.html)中，内容页面通过iframe加载。通过拦截导航点击事件动态修改iframe的src属性，实现了不刷新主框架的内容切换，保持音乐持续播放。文章详细介绍了文件结构调整、CSS布局处理、JS事件拦截等实现步骤，并总结了路径处理、子页面导航隐藏等注意事项，最终实现了类似单页应用的流畅体验。
2025-12-04 16:58:28
872
原创 Arch Linux 终端美化与效率工具配置指南：Starship 与 Yazi
本指南介绍了如何在Arch Linux上安装和配置Starship终端提示符和Yazi文件管理器。Starship部分包含Nerd Font字体安装、主程序安装及Shell集成步骤，确保美观的终端提示符显示。Yazi部分详细说明了主程序安装、预览依赖项配置，并针对旧版本提供了手动配置文件创建方案。最后建议保持系统更新以获得最佳体验，这两个工具的结合能显著提升终端工作效率和美观度。
2025-12-02 21:07:15
861
原创 手把手教你“手搓”网页深浅色模式切换（支持 iframe 同步！）
本文介绍了一套轻量级、无依赖的网页深浅色模式切换方案，支持iframe同步。核心原理是通过给<body>添加dark-mode类控制全局样式：默认无类名时为浅色模式，添加类名时切换为深色模式。方案包含CSS分层设计、JavaScript逻辑处理（切换、记忆和同步）以及iframe跨页面同步的实现方法。通过localStorage存储用户偏好，并提供了主页面控制iframe和iframe自我感知两种同步方式。该方案数据流向清晰，适用于同源iframe场景，能有效避免页面闪烁问题，实现丝滑的主题切换
2025-12-02 20:57:48
938
原创 [前端实战]抛弃笨重的库！手搓一个类似 Pixiv 的响应式瀑布流画廊
本文介绍了一种使用纯CSS实现瀑布流画廊的方法，无需依赖JavaScript库。通过CSS的column-count属性实现多列布局，配合break-inside: avoid防止元素断裂，并添加响应式断点适配不同设备。文章还展示了如何用原生JS实现点赞和图片预览功能，以及深色模式的适配方案。最终效果类似Pixiv/Pinterest的瀑布流布局，具有轻量级、响应式和良好交互体验的特点。完整代码可直接保存为HTML文件运行。
2025-12-01 19:22:22
1454
原创 [实战] 用 Go + Web Components 撸一个轻量级评论系统
摘要：基于Go和Web Components的轻量级评论系统 本文介绍了一种使用Go语言和Web Components技术构建的无依赖、高性能全栈评论系统。后端采用Gin框架+Gorm+SQLite组合，仅需60行代码即可实现API服务，部署时只需单个二进制文件。前端使用原生JavaScript和Web Components标准，创建了可复用的<my-comments>自定义标签，无需任何框架依赖。系统具备完整的评论展示和提交功能，采用Shadow DOM实现样式隔离，通过fetch API与后
2025-12-01 14:06:14
1615
原创 从零开始制作一个网页版拳皇格斗游戏
本文介绍了使用原生JavaScript、Canvas和jQuery开发2D格斗游戏的完整过程。项目采用模块化设计，核心包括游戏对象系统、控制器系统和角色系统。游戏循环通过requestAnimationFrame实现60fps流畅动画，使用Set存储按键状态支持多键操作。角色包含7种状态（站立、移动、跳跃等），每种状态对应GIF动画。项目实现了双人对战、物理引擎、攻击判定和计时系统等功能，代码结构清晰，适合游戏开发初学者学习参考。完整代码已开源在GitHub，并配有详细教程博客。
2025-11-24 20:27:14
607
原创 WSL解决“wsl: 检测到 localhost 代理配置，但未镜像到 WSL。NAT 模式下的 WSL 不支持 localhost 代理。“问题
解决WSL网络问题的方法是：在系统设置中搜索"WSL Settings"，将网络模式改为"Mirrored"，然后通过终端执行wsl --shutdown命令重启WSL服务即可。该操作可同步主机与WSL的网络配置，确保网络连接正常。
2025-10-28 18:38:18
226
原创 手把手教你用Python和AI构建一个实时骨骼动画追踪器
人体动作捕捉与骨骼动画实时生成 本文介绍如何利用Python和MediaPipe框架实现实时人体动作捕捉并生成骨骼动画。MediaPipe是Google开发的跨平台机器学习解决方案，提供了现成的姿态估计模型，能够高效识别33个人体关键点。 实现步骤： 安装所需库：pip install opencv-python mediapipe 初始化MediaPipe姿态估计模型和绘图工具 通过OpenCV捕获摄像头视频流 将每帧图像转换为RGB格式供MediaPipe处理 使用pose.process()获取姿态关
2025-10-17 01:07:17
1031
原创 使用pygame制作年轻人的第一款游戏
本文介绍了如何使用Python的Pygame库开发一个简单的"躲避下落物"游戏。主要内容包括：Pygame基础环境搭建、游戏窗口创建、主循环设计、玩家角色实现（包括移动控制和边界检测）以及精灵系统的使用。文章提供了完整的代码示例和详细解析，适合初学者快速入门2D游戏开发。游戏成品已部署至GitHub和个人博客，包含完整的开发教程和代码实现。通过这个项目，读者可以掌握Pygame的核心概念和基本开发流程。
2025-10-02 03:00:16
1272
原创 解决 Arch Linux 与 Windows 双系统时间同步问题
本文针对Arch Linux与Windows双系统时间显示不一致问题，分析了两种解决方案。主要原因是Windows默认使用本地时间(Local Time)，而Arch Linux默认使用UTC时间。推荐方案是修改Windows注册表使其使用UTC标准（方案一），操作简单且符合Linux规范。备选方案是让Linux改用本地时间（方案二），但可能引发时区问题。文章提供了两种方案的具体配置命令，并指出方案一更稳定可靠，能彻底解决双系统时间同步问题。
2025-10-01 17:09:13
884
原创 Arch Linux 美化终极指南：将 KDE Plasma 100% 变身为 macOS 风格
本文详细介绍了如何在Arch Linux + KDE Plasma桌面环境下，通过系统原生组件实现macOS风格的视觉改造。主要包括四个核心步骤：安装WhiteSur全局主题、配置顶部全局菜单栏、创建悬浮程序坞以及细节微调（如窗口按钮左置、更换字体等）。特别推荐使用KDE官方商店获取组件，确保系统稳定性，同时提供了动态壁纸和登录屏幕美化等可选优化方案。该教程展示了KDE Plasma强大的可定制性，让用户能在保持系统性能的同时享受macOS般的优雅体验。
2025-10-01 02:29:18
2591
原创 Arch Linux 售后服务：GRUB 开机引导项美化
摘要 本文介绍如何为Arch Linux安装GRUB主题以美化引导界面。推荐了多个主题资源网站，如GitHub上的二次元风格主题和GNOME-Look.org。安装步骤包括克隆主题仓库、运行安装脚本并更新GRUB配置。还提供了手动配置方法，强调修改GRUB_THEME变量后必须运行grub-mkconfig命令使更改生效。整个过程简单安全，可让用户获得个性化的开机界面体验。
2025-10-01 02:25:14
485
原创 Miniconda 精准入门：从安装到高效环境管理
本文介绍了如何安装和配置Miniconda来管理Python环境和依赖。Miniconda是Conda的最小化版本，相比Anaconda更轻量，适合创建独立项目环境。文章详细讲解了Linux/WSL和MacOS的安装步骤，包括芯片架构选择、脚本下载和初始化配置。重点说明了环境管理技巧：创建、激活/退出环境，安装/卸载包，以及查看/删除环境。最后提供了一个实用技巧——禁用自动激活base环境，使终端更清爽。通过Miniconda可有效避免"依赖地狱"，实现干净可复现的开发工作流。
2025-09-25 14:47:02
1333
原创 手把手教你从零开始搭建环境并成功部署 vLLM 推理服务并搭建翻译网页
由于本蒟蒻的 RTX 4060 显卡有 8GB 显存，所以选择了一个很小、适合个人电脑部署的。
2025-09-23 23:54:48
970
原创 从零构建 C++ 人脸识别
本文介绍了在Arch Linux系统上从零构建C++人脸识别系统的完整流程。教程分为四个步骤：首先安装必要的开发工具和库（gcc、CMake、OpenCV）；然后创建项目文件夹结构（build、data、cascades目录）；接着下载OpenCV官方的人脸检测模型文件；最后详细编写项目代码，包括构建脚本CMakeLists.txt和两个核心C++程序（train_model.cpp用于训练人脸模型，recognize_face.cpp用于实际人脸识别）。教程提供了完整的代码实现，涵盖了从数据预处理、模型训
2025-09-19 20:53:08
1153
原创 EndeavourOS 进阶汉化：打造完整中文环境
因为 EndeavourOS 系统里面是缺少中文字符的，很多字它显示的不是中文而是日文韩文，这就导致看起来很奇怪。没关系，本教程将引导你完成 EndeavourOS 的进阶汉化，确保你的系统拥有完美的中文支持。如果你想跳过手动配置的繁琐步骤，有一个由社区开发者提供的自动化脚本，可以一键完成所有汉化工作。需要注意的是一定要在设置中打开虚拟键盘，要不然会出现在chrome中用不了中文输入法的情况。如果你想了解汉化的具体步骤，或者自动化脚本未能满足你的需求，可以按照以下手动步骤进行。首先，我们需要配置系统的。
2025-08-14 10:14:19
803
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人