让 Hexo 博客分享到微信变成精美卡片——Open Graph 完整配置指南
前言很多博主发现：别人分享链接到微信是漂亮的卡片（大图+标题+描述），而自己的只是裸链接。核心原因只有一个——缺少 Open Graph meta 标签。 本文以 Butterfly 主题为例，手把手教你配齐 OG 协议，顺便避开 HTTPS 混合内容、爬虫 User-Agent、图片防盗链等常见坑。 一、Open Graph 核心字段速览 Meta 标签 作用 微信渲染位置 og:title 卡片标题 大字标题行 og:description 摘要/描述 标题下方灰字 og:image 缩略图（关键） 左侧/上方大图 og:url 规范链接 点击跳转目标 og:type 内容类型 内部判断用 og:site_name 站点名 角标/来源行 微信硬性要求：og:image 必须 ≥300×300px、≤5MB、HTTPS、无防盗链，否则抓取失败直接退化成纯文本。 二、Butterfly 主题一键开启_config.butterfly.yml 默认已开启，确认如下： 12345Open_Graph_meta: ...
深夜两点的代码与一碗热汤面
「世界上最遥远的距离，不是生与死，而是我在改 bug，你在睡觉，服务器在报警，而我连一碗热乎的面都吃不上。」—— 某程序员朋友圈 零、起因凌晨 1:47，CI/CD 流水线第 23 次挂在 npm run build 上。 错误日志滚得飞快，红色的 ERR! code ELIFECYCLE 刷屏。我盯着屏幕发呆了十秒，才反应过来——不是依赖版本冲突，也不是内存溢出，是 node-sass 在 Node 18 下彻底寄了。 要不降 Node 版本？要不改 dart-sass？要不干脆把 styles 目录整个扔掉重写？ 三个方案在脑子里打架，胜负手全在「明早 9 点要上线」这句死命令上。 一、外卖软件里的「配送中」饿了。胃里像有只老鼠在啃胃壁。 打开外卖 APP，全屏「已打烊」。唯一还亮着的，是楼下那家「阿姨手工面」——距离关门还剩 13 分钟。 下楼，推门，蒸汽扑面。 「小伙子，要啥面？今晚收摊早，汤不够了。」「番茄鸡蛋面，加俩荷包蛋，汤多一点。」「行嘞，稀饭还是干拌？」「汤面，趁热吃。」 厨房里铁勺撞碗的当当声，比任何白噪音都治愈。 二、那碗面 红亮的汤...
从零手写一个轻量级 Vue 3 响应式核心——150 行读懂 reactive / effect / ref
目标 不造轮子，只拆轮子。 本文带你用 150 行纯 TypeScript 实现 Vue 3 响应式核心 API 的最小可用子集： reactive(obj) —— 深度响应式对象 ref(val) —— 基础类型包装器 effect(fn) —— 副作用函数（自动追踪依赖） computed(getter) —— 缓存派生值 watchEffect(fn) —— 立即执行 + 自动追踪 无 Virtual DOM、无编译器、无 Patch，只聚焦「依赖收集 → 触发更新」这条主线。 一、核心数据结构：依赖图Vue 3 用 WeakMap → Map → Set 三层结构存「谁依赖谁」： 12// target -> key -> Set<effect>const targetMap = new WeakMap<object, Map<string | symbol, Set<ReactiveEffect>>>(); 1234567graph LR A[targetMap: WeakMap] -->...
2026 年前端开发效率工具箱：我每天都在用的 12 个神器（含配置文件）
阅读建议：按需取用，别一次全装。文末打包了 .vscode/settings.json、.npmrc、.cursorrules 等现成配置，下载即用。 一、终端与 Shell：把命令行变成超能力1. Warp — 智能终端（Mac/Win/Linux） 杀手锏：AI 命令生成（Ctrl+ ` 自然语言变命令）、块状输出可展开/折叠、团队共享 Workflows 替代：Windows 推荐 WezTerm + Oh My Posh，Linux 原生 Ghostty 12# 一键安装（Mac）brew install --cask warp 2. zoxide — cd 的智能替代品123# 记忆你去过的目录，模糊跳转z code # 直接跳到 ~/projects/hexo-blogz blog # 同理 123# 安装 + 初始化（zsh/fish/bash 通用）curl -sSfL https://raw.githubusercontent.com/ajeetdsouza/zoxide/main/install....
