React 回到顶部按钮：自实现 vs Ant Design FloatButton vs react-scroll-to-top
自己实现（推荐，无依赖） 约 30 行代码，支持平滑滚动，可自由定制样式： import { useEffect, useState } from "react";export default function BackTop() { const [show, setShow] = useState(false); useEffect(() => { const onScroll = () => { setShow(window.scrollY > 300); }; window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); if (!show) return null; return ( <button onClick={() => window.scrollTo({ top: 0, behavior: "smooth", }) } style={{ position: "fixed", right: 20, bottom: 20, width: 50, height: 50, borderRadius: "50%", cursor: "pointer", }} > ↑ </button> ); }用法： function App() { return ( <> <YourPage /> <BackTop /> </> ); }滚动超过 300px 才显示，点击后平滑回到顶部。useEffect 里记得清理监听器，避免内存泄漏。 Ant Design：FloatButton.BackTop 已经用了 Ant Design 的项目，直接用现成组件： import { FloatButton } from "antd";function App() { return ( <> <YourPage /> <FloatButton.BackTop /> </> ); }支持自动显示/隐藏、动画、自定义位置和图标，零配置可用。 Material UI MUI 没有专门的 BackTop 组件，官方示例用 Fab 实现： import Fab from "@mui/material/Fab"; import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";<Fab color="primary" size="small" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })} > <KeyboardArrowUpIcon /> </Fab>第三方库：react-scroll-to-top 如果项目没有 UI 库但想省事： npm install react-scroll-to-topimport ScrollToTop from "react-scroll-to-top";function App() { return ( <> <YourPage /> <ScrollToTop smooth /> </> ); }支持平滑滚动、自定义颜色、自定义 SVG 图标、自定义触发高度。 选哪个场景 推荐方案普通 React 项目 自实现，30 行以内已用 Ant Design FloatButton.BackTop已用 MUI Fab + window.scrollTo想快速加功能 react-scroll-to-top不要为了一个回到顶部按钮引入专门的依赖，自实现版本代码量极小且完全可控。
Python 跨平台获取 CPU 型号：py-cpuinfo / wmic / /proc/cpuinfo 全方案
问题背景 需要在 Python 代码里获取完整的 CPU 型号字符串，例如： Intel(R) Xeon(R) CPU E5-2680 v4 @ 2.40GHz不同平台读取方式不同，以下是各方案的完整写法。 推荐：py-cpuinfo（跨平台） pip install py-cpuinfofrom cpuinfo import get_cpu_infoinfo = get_cpu_info() print(info["brand_raw"]) # Intel(R) Xeon(R) CPU E5-2680 v4 @ 2.40GHzbrand_raw 是最原始、最完整的 CPU 商品名称。该库会自动根据平台选择 Windows 注册表、Linux /proc/cpuinfo、macOS sysctl 等数据源，兼容性最好，适合写跨平台工具。 Windows（无第三方库） 方案一：wmic import subprocesscpu = subprocess.check_output( "wmic cpu get name", shell=True ).decode("gbk").split("\n")[1].strip()print(cpu)注意编码用 gbk，Windows 中文环境下 cmd 输出默认是 GBK。 方案二：PowerShell CimInstance import subprocesscpu = subprocess.check_output( ["powershell", "(Get-CimInstance Win32_Processor).Name"] ).decode("utf-8").strip()print(cpu)PowerShell 输出是 UTF-8，更可靠，推荐用这个。 Linux 直接读 /proc/cpuinfo： with open("/proc/cpuinfo") as f: for line in f: if line.startswith("model name"): print(line.split(":", 1)[1].strip()) break多核机器 /proc/cpuinfo 会重复每个核的信息，读第一条就够了。 macOS import subprocesscpu = subprocess.check_output( ["sysctl", "-n", "machdep.cpu.brand_string"] ).decode().strip()print(cpu)不推荐：platform.processor() import platformprint(platform.processor()) # 很多系统输出：Intel64 Family 6 Model 79 Stepping 1, GenuineIntel # 或者直接为空字符串platform.processor() 不返回 CPU 商品名称，在 Linux 上通常是架构描述或空串，不适合用来显示给用户看的型号。 跨平台封装 from cpuinfo import get_cpu_infodef get_cpu_name() -> str: return get_cpu_info()["brand_raw"]用 py-cpuinfo 一行搞定，不需要为三个平台分别写判断逻辑。
macOS 取消 SSH 钥匙串自动登录
ssh-add --apple-use-keychain ~/.ssh/id_rsa 做了两件事：把私钥加载到 ssh-agent，同时把 passphrase 保存到 macOS 钥匙串（Keychain）。取消时两者需要分别处理。 从 ssh-agent 移除密钥 查看当前已加载的密钥： ssh-add -l移除指定密钥： ssh-add -d ~/.ssh/id_rsa或移除全部： ssh-add -D这只影响当前 ssh-agent 会话，不会删除 Keychain 中保存的密码。 从钥匙串访问中删除 SSH 密码Command + Space 打开 Spotlight，搜索钥匙串访问（Keychain Access） 左侧选登录（Login） → 密码（Passwords） 搜索 SSH 或 id_rsa 找到 SSH: /Users/<你的用户名>/.ssh/id_rsa 右键 → 删除删除后再使用 SSH 时会重新要求输入 passphrase。 修改 ~/.ssh/config 禁用 UseKeychain 查看当前配置： cat ~/.ssh/config如果有以下内容，改为 no 或删除这两行： Host * UseKeychain yes AddKeysToAgent yes改为： Host * UseKeychain no AddKeysToAgent no完全恢复到手动输入密码 # 1. 移除 ssh-agent 中所有密钥 ssh-add -D# 2. Keychain Access 里删除 SSH 条目（GUI 操作）# 3. 修改 ~/.ssh/config，删除或禁用 UseKeychain / AddKeysToAgent完成后每次 SSH 连接都会提示输入 passphrase，不再自动使用钥匙串。 各操作作用范围操作 影响范围ssh-add -d 仅移除当前 ssh-agent 会话中的密钥Keychain Access 删除 删除保存的 passphrase，下次需重新输入UseKeychain no 阻止新的 SSH 会话向 Keychain 写入AddKeysToAgent no SSH 连接时不自动将密钥添加到 agent
Hexo 替代方案：Astro、Hugo、VitePress 选型对比
Hexo 的问题 Hexo 在 2015–2020 年是最流行的静态博客框架，但现在暴露出几个问题：插件生态老化：很多插件多年未更新，兼容性问题多 大站构建慢：文章超过几百篇后全量构建明显变慢 Markdown 扩展性差：不支持 MDX，组件嵌入需要 hack 主题质量参差不齐：活跃维护的主题越来越少主流替代方案 Astro（个人博客首选） 适合： 个人博客、作品集、内容站 npm create astro@latest核心优势：Islands 架构：默认零 JS，按需激活交互组件 MDX 支持：Markdown 里可以嵌入任意框架组件（React/Vue/Svelte） 构建速度快：增量构建，千篇文章也流畅 SEO 友好：内置 sitemap、RSS、Open Graph 主题生态活跃：官方 theme showcase 持续更新 多框架：同一项目可以混用 React、Vue、Svelte 组件缺点：学习曲线比 Hexo 稍陡（需要理解 Islands 概念） .astro 文件语法独特Hugo（超大站、Go 技术栈） 适合： 文章超过千篇、CI/CD 要求构建秒级完成 brew install hugo hugo new site myblog核心优势：构建速度极快：Go 实现，数千篇文章构建只需几秒 单二进制：不依赖 Node.js，部署环境干净 模板系统强大：Go template，灵活但学习成本高缺点：Go template 语法反直觉，调试困难 不支持组件化（无 MDX） 主题质量不稳定VitePress（Vue 技术文档） 适合： 技术文档、组件库文档 npm add -D vitepress核心优势：Vite 驱动：热更新极快 Vue 生态：文档里可以直接写 Vue 组件做交互 Demo 默认主题精美：开箱即用，对比 Hexo 默认主题体验好很多缺点：专门为文档场景优化，个人博客功能（RSS、标签、归档）需要手写 不适合内容站Next.js（需要服务端功能） 适合： 需要 SSR、API Routes、数据库查询的站点 优点：完整的 React 生态 SSG + SSR + ISR 混用 Vercel 一键部署缺点：对纯静态博客来说过重 构建后体积大Docusaurus（纯文档站） 适合： 开源项目文档、知识库 Meta 出品，React 生态，内置版本管理、多语言、搜索。对博客场景支持一般。 选型建议场景 推荐个人博客、内容站 Astro超大站（千篇以上）或 CI 构建极速要求 HugoVue 组件库文档 VitePress需要 API / 数据库 Next.js开源项目文档 Docusaurus从 Hexo 迁移成本最低的是 Astro：Markdown 文件基本兼容，frontmatter 格式相同，只需调整模板层。
2026 年 Hexo 还香吗：Astro / VitePress / Hugo 替代对比
Hexo 在 2015-2018 那几年真是"个人博客默认选择"。但 2026 年再新开一个博客，它不是最好的选择。列几个替代方案。 Hexo 现在的问题Node.js 生态里很多老插件已经无人维护 构建速度一般——几百篇文章还行，上千篇明显变慢 Markdown 扩展能力不如新框架（MDX 之类） SEO、SSR、图片优化都要自己折腾 官方更新频率越来越低不是不能用，只是新开项目性价比不高。 替代方案对比框架 推荐度 学习曲线 主要卖点Astro ⭐⭐⭐⭐⭐ ★★★ 性能最好、组件生态最活跃VitePress ⭐⭐⭐⭐⭐ ★★ Vue 官方栈，文档站体验极佳Hugo ⭐⭐⭐⭐☆ ★★★ Go 编译，构建速度极快Next.js ⭐⭐⭐⭐☆ ★★★★ 全功能，可扩展成完整网站Docusaurus ⭐⭐⭐⭐☆ ★★★ 专业文档站首选Hexo ⭐⭐⭐ ★ 老牌博客，简单但落伍个人博客：首选 Astro Astro 已经成了当前的默认选择： 优点：页面速度非常快（Islands Architecture，默认零 JS） Markdown / MDX 支持一流 默认 SEO 友好、图片自动优化 可以插 React / Vue / Svelte / Solid 组件（"用啥框架不限"） 部署到 GitHub Pages / Cloudflare Pages / Vercel 都是一键 社区活跃，主题多例子： npm create astro@latest模板选 blog / minimal / portfolio 都行，都跑得起来。 Astro 对我这种"技术博客写 Markdown 加代码块"的场景友好度非常高。 Vue 生态：VitePress 如果你熟 Vue（或者不想学新东西），VitePress 是最平滑的： docs/ ├── index.md ├── blog/ │ ├── first.md │ └── second.md └── .vitepress/ └── config.ts零配置能跑，自带：数学公式（KaTeX） Mermaid 流程图 代码高亮 + copy 按钮 暗色模式 全文搜索（Algolia / local） RSS / Sitemap特别适合技术文档 + 博客混合站。Vue 官方文档、Vite 官方文档都是它。 文章特别多：Hugo 一个博客攒了 3000 篇以上文章的时候，Hugo 优势明显——Go 编译，1000 篇文章从 30 秒（Hexo）降到 3 秒。 不足：模板语法（Go template）比较别扭 主题生态没 Astro/Next.js 火 前端集成能力较弱选 Hugo 的场景：内容极多 + 不需要复杂前端 + 追求极致构建速度。 完整网站：Next.js 想做的不只是博客——加登录、评论、订阅、AI 搜索、API、数据库、支付……直接上 Next.js： 能做：博客 用户系统 / 认证 CMS 后台 支付订阅 AI 集成（Vercel AI SDK） API 路由（无服务器函数） SSR / SSG / ISR 混用代价：学习成本明显高于 Hexo，React 生态得吃透。 专业文档：Docusaurus 或 VitePress 大型开源项目文档站——React 生态选 Docusaurus，Vue 选 VitePress。 两者都自带：侧边导航 版本管理（v1 / v2 / v3 切换） 多语言 搜索 团队 / 客户展示Meta 的 React 文档、字节的部分开源文档站都用 Docusaurus。 从 Hexo 迁移 大部分 Hexo 博客的 source/_posts 里都是标准 Markdown + YAML frontmatter。迁移到 Astro / VitePress 通常改一下 frontmatter 字段就行： Hexo： --- title: xxx date: 2024-01-01 12:00:00 tags: [foo, bar] categories: [tech] ---Astro 差异不大： --- title: "xxx" date: 2024-01-01T12:00:00Z tags: ["foo", "bar"] categories: ["tech"] ---写个脚本批量改字段名 + 转日期格式就完事，正文完全不用动。 我的推荐 按目标推荐一次：纯个人博客，追求现代化 + 长期可维护：Astro Vue 用户，写文档 + 博客：VitePress 文章上千篇，追求快构建：Hugo 想做完整产品站：Next.js 大项目开源文档：Docusaurus 只想快速开始，不想学新东西：Hexo 也能用一句话总结 Hexo 还能用但不是首选。个人技术博客现在的默认答案是 Astro——性能、Markdown 支持、组件生态、部署便利全都优秀。