Hexo 博客魔改日志：打造极客风个人站
🛠️ 魔改清单
1. 视觉升级
- 深海神经网络背景: 使用 Canvas 粒子动画模拟神经元连接。
- 全息书架: 首页注入 3D 悬浮书架作为分类导航。
- 赛博光标: 定制的机械/光环风格鼠标指针。
2. 交互组件
- 看板娘苗苗: 基于 Live2D (或自定义 Widget) 的智能助手，增加“中线对齐”与“完美眼神跟随”算法。
- 打字机特效: 首页 Slogan 动态输入效果。
3. 下一步计划
- 接入后端 API 实现动态说说是/友链检测。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 达芬奇的博客！
相关推荐
2026-01-29
Hexo 博客魔改每日记录-02：打造“耳语森林”与评论区国内直连优化
前言： 如果说上一篇是搭建博客的骨架，那么这两天的工作则是为博客注入灵魂。我们不仅在一个隐秘的角落搭建了专属的“树洞”空间，还攻克了静态博客最头疼的动态交互问题——让评论系统在无 VPN 环境下也能秒级加载，并构建了完善的通知与安全体系。本文将复盘这些核心功能的实现逻辑与实战经验。 一、 视觉与交互魔改：沉浸式“悄悄话”为了给特定的人留下专属的对话空间，我开发了一个独立于主站样式的“悄悄话”页面 (/whisper/)。这个页面需要脱离 Butterfly 主题的标准容器，呈现出复古信纸与打字机的效果。 1.1 样式隔离策略：Scope Injection在初期开发中，我尝试将样式写在全局 custom.css 中，导致首页背景也被误伤。为了实现“单页单样式”，我采用了Markdown 正文内联注入的方案。 核心技巧： 放弃在 Front-matter (---) 中使用 inject 属性（极易引发 YAML 缩进报错），直接在 Markdown 正文中编写 <style> 和 HTML 结构。 信纸容器实现 (CSS Clip-path)： 利用 clip-p...
2026-01-31
Hexo 博客魔改每日记录-03：GitHub 仪表盘 (Bento Grid) 与极简导航重构
一、 交互减法：摒弃传统菜单在移动端优先的设计理念下，原本复杂的顶部导航菜单显得有些冗余。为了追求极致的沉浸感，我做了一个大胆的决定：隐藏传统菜单，重构全局导航逻辑。 1.1 设计理念：iOS 风格的全局“后退” 参考 iOS 原生应用的交互逻辑，当用户进入深层页面（如文章页或专栏页）时，最自然的动作是“返回上一页”，而不是去点击复杂的面包屑导航。 我编写了 cook_nav_replace.js，实现了以下逻辑： DOM 隐藏：隐藏主题原有的 #nav .menus_items。 动态注入：在页面左上角挂载一个磨砂玻璃质感的胶囊按钮。 智能显隐：仅在非首页出现，且适配 PJAX 无刷新跳转。 123456789101112/* 核心样式预览：磨砂玻璃 + 胶囊圆角 */#cook-back-menu-btn { position: fixed; top: 20px; left: 20px; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(16px) satura...
2026-01-26
Hexo 博客魔改每日记录-01
前言： 编程的乐趣不仅在于构建庞大的系统，也在于打磨属于自己的方寸之地。 这两天，我对个人的 Hexo 博客进行了深度的“外科手术式”改造。从导航栏的像素级对齐，到项目展示页的工程化解耦，每一步都贯彻了“高内聚、低耦合”的软件工程美学。本文将详细复盘所有核心技术点与踩坑经验。 一、 顶层交互重构：悬浮胶囊导航栏 (Glassmorphism)为了摆脱传统博客沉闷的顶部栏，我决定复刻移动端 APP 的交互逻辑，实现**“左侧菜单 - 中间标题 - 右侧搜索”**的对称布局，并赋予其磨砂玻璃（Glassmorphism）质感。 1.1 CSS Flex 布局的妙用Butterfly 主题默认在 PC 端隐藏了“三条杠”菜单（Hamburger Menu）。为了强制显示并重排顺序，我利用了 Flexbox 的 order 属性。 核心难点： 如何打破 DOM 结构的默认顺序？ 如何解决 PC 端 CSS 权重导致的 display: none 问题？ 解决方案 (custom.css)： 123456789101112131415161718192021222324252627...
2026-01-31
Hexo 博客魔改每日记录-04：断舍离！拥抱 Hexo 7 原生图片渲染方案
前言： 做技术的都知道，依赖越少，系统越稳。之前为了让 Markdown 图片在本地和线上都能显示，我尝试了各种第三方插件，结果却陷入了“版本冲突”和“路径诡异”的泥潭。 既然我们已经升级到了 Hexo 7，为什么不利用它强大的原生能力呢？今天，我们彻底卸载冗余插件，回归官方原生的图片渲染方案。 一、 环境准备：清理与配置在开始写作之前，我们需要先调整好 Hexo 的“底层逻辑”，让它学会自己找图片。 1.1 第一步：卸载旧插件必须把那个坏掉的、或者引起冲突的老插件删掉，防止它干扰官方渲染器。 在博客根目录终端执行： 1npm uninstall hexo-asset-image 1.2 第二步：修改 _config.yml打开博客根目录下的 _config.yml，在相应位置修改或加入以下配置，开启官方渲染器的“资源文件夹”支持： 1234567# 1. 基础开关：让 Hexo 创建文章时自动生成同名文件夹post_asset_folder: true# 2. 渲染增强：告诉官方渲染器去同名文件夹找图marked: prependRoot: true postAsse...
评论
