My Blog

背景：给 PaperMod 博客做「左侧悬浮目录」时，从 fixed 迁移到 sticky，系统梳理了 position 的完整体系。 一、一句话总纲 position 决定了一个元素"相对于谁、用什么规则来定位"。 CSS 里有 5 个值（其中 4 个常用）。它们最大的区别，就在两个问题： 参照物是谁 —— 相对自己？相对祖先？相对屏幕？ 会不会脱离文档流 —— 原来的位置还占不占？ 二、先理解前提：什么是「文档流」 网页元素默认从上到下、从左到右自然排列，像写字一样一行行排下来。 这个「自然的排列规则」就叫文档流（normal flow）。 默认情况（position: static），所有元素都待在文档流里，一个接一个。 position 的很多值，本质就是"让元素脱离这个自然流，然后相对某个参照物重新定位"。 三、五个值逐个拆解 1. static（默认值） .element { position: static; } 所有元素的默认状态，不写 position 就是它。 元素乖乖待在文档流里，按顺序排列。 top / left / right / bottom 这些偏移属性对它无效。 一句话：就正常排着，别动我。 2. relative（相对定位） .element { position: relative; top: 10px; left: 20px; } 相对它自己原来的位置偏移。 关键点 1：仍然占着原来的位置（不脱离文档流，坑还在）。 关键点 2：top: 10px = 从原位置往下挪 10px；left: 20px = 往右挪 20px。 一句话：我人挪了，但原来的座位还给我留着。 ...

背景：做博客「左侧目录」的窄屏适配时，用到了 @media 让目录在窄屏下隐藏/缩小。这里系统记录媒体查询是什么、怎么用。 一、媒体查询是什么 一句话：媒体查询（Media Query）是 CSS 里的一种"条件判断"，让某些样式只在"满足特定条件"时生效。 最常用的条件是"屏幕宽度"，但也可以是设备类型、屏幕方向（横屏/竖屏）、是否支持某功能等。 它和编程里的 if 语句是同一个思想： /* 如果屏幕宽度 ≤ 1200px，就应用里面这些样式 */ @media (max-width: 1200px) { .toc-sidebar { display: none; } } 这等价于（用伪代码表达）： 如果 (屏幕宽度 <= 1200px) { 隐藏 .toc-sidebar } 二、@media 的基本语法 结构是固定的，记住这个骨架： @media 条件 { 选择器 { 属性: 值; } } @media 是关键字 括号里写"条件" 花括号里写"满足条件时要应用的样式" 里面的写法和普通 CSS 完全一样 三、最常用的宽度条件 1. max-width（小于等于某个宽度时生效） @media (max-width: 768px) { /* 屏幕 ≤ 768px（手机）时生效 */ } 记忆：max-width = “最多就这么宽”，所以是**“小屏时生效”**。 2. min-width（大于等于某个宽度时生效） @media (min-width: 1200px) { /* 屏幕 ≥ 1200px（大屏）时生效 */ } 记忆：min-width = “至少这么宽”，所以是**“大屏时生效”**。 ...

背景：给 PaperMod 博客做「左侧悬浮目录」，在做窄屏适配时，发现 position: fixed 方案越补越复杂，进而推导出 position: sticky 才是正解。 一、问题的本质：两个"参照系"打架 当前目录用的是 position: fixed，正文是居中布局。这导致了根本矛盾： 元素 定位方式 参照系 目录 .toc-sidebar position: fixed 整个浏览器窗口（屏幕） 正文 .post-content 居中 + max-width 屏幕正中央的固定宽度容器 两个元素各自用不同的参照系定位，所以： 屏幕很宽时，两者刚好不重叠（纯属运气） 屏幕变窄时，正文的"左右留白"缩小，目录（相对屏幕固定）就会压到正文 结论：用 fixed 就注定要"打补丁"——写一堆媒体查询去"猜"什么宽度下会重叠。这是治标不治本。 二、为什么"缩小距离/缩小宽度/隐藏"是补丁，不是解法 一开始设想的"三步判断"逻辑： 屏幕够宽 → 目录浮在正文旁 二者贴在一起 → 缩小目录宽度 还不行 → 隐藏目录 这个逻辑方向是对的，但用媒体查询实现时，本质是在**“手动模拟"本应由浏览器自动完成的事**： 你得猜“多少像素下会重叠”（是 1200？1300？1400？） 每猜一次，就要加一个 @media 断点 屏幕尺寸无穷多，断点也写不完 换个设备、换个分辨率，又得重调 这就是"补丁式"响应式的通病：永远在追赶，永远有漏网之鱼。 三、position: sticky 为什么是正解 sticky 解决的是**“参照系统一”**这个根本问题。 fixed 和 sticky 的本质区别 属性 定位参照系 表现 position: fixed 相对屏幕 永远钉在屏幕某个位置，与页面内容无关 position: sticky 相对父容器 在父容器范围内"跟随滚动”，超出范围就正常流动 sticky 如何从根上避免"重合" 如果目录用 sticky，并且放在正文容器的左侧（作为正文布局的一部分），那么： ...

背景：学习 Hugo 搭建博客时，在文章 front matter 和站点配置 hugo.toml 中遇到了 YAML 和 TOML 两种格式。 一、它们到底是什么 YAML 和 TOML 都是**「数据序列化格式」（serialization format）**——用来把「数据」用有规则、人和机器都能读懂的文本写下来，方便程序读取、也方便人修改。 它们和 Markdown 是同类东西：Markdown 是给「文章」定格式，YAML/TOML 是给「配置数据」定格式。 常见数据格式一览 格式 一眼认出 典型用途 JSON {"key": "value"} API 接口、前后端传数据 YAML key: value + 缩进 配置文件（Docker、K8s、GitHub Actions、Hugo 文章） TOML key = "value" 配置文件（Rust/Python 项目、Hugo 站点配置） XML <tag>value</tag> 老牌格式，现在少用 INI key=value Windows 老式配置 二、YAML 详解 核心语法（三件事） 1. 键值对用冒号 name: anko age: 25 2. 层级用缩进（空格，不能用 Tab） person: name: anko address: city: 上海 street: 某路 3. 列表用短横线 - ...

背景：学习 Hugo + GitHub Pages 搭建博客，在「安装 PaperMod 主题」这一步遇到了 git submodule 命令。 ⚠️ 注意：文中的 PaperMod 主题仓库地址务必以官方为准，使用前请先核对最新地址： 官方仓库：https://github.com/adityatelange/hugo-PaperMod SSH 地址：git@github.com:adityatelange/hugo-PaperMod.git 曾误写过 adnanhob/PaperMod（该仓库不存在），已更正。仓库地址可能随时间迁移，动手前建议到 GitHub 搜索 hugo-PaperMod 确认。 一、命令逐词拆解 git submodule add --depth=1 git@github.com:adityatelange/hugo-PaperMod.git themes/PaperMod 片段 含义 git submodule add git 的核心命令：添加一个子模块 --depth=1 只拉取最近 1 次提交（浅克隆） git@github.com:adityatelange/hugo-PaperMod.git 主题的远程仓库地址（SSH 形式） themes/PaperMod 主题下载到本地的位置 二、核心概念：什么是「子模块」（submodule） 要解决的场景冲突 你的博客站点本身是个 git 仓库（my-blog），而 PaperMod 主题也是一个独立的 git 仓库。现在你想把主题代码放进博客的 themes/ 目录里。 如果直接 git clone 主题进去，就会形成「仓库套仓库」的混乱局面——博客的 git 会看到 themes/PaperMod 里还有个 .git，管理起来一团糟。 子模块的机制 子模块就是 git 专门用来解决「仓库里套仓库」的机制。做法很聪明： ...