Swayopus

Obsidian Callout 全功能展示

Swayopus — Thu, 25 Jun 2026 00:00:00 GMT

## 基础类型 > [!note] Note > 这是一个 note callout，蓝色竖线。 > [!tip] Tip > 这是一个 tip callout，绿色竖线。 > [!info] Info > Info 和 note 共用蓝色系。 > [!warning] Warning > 这是一个 warning callout，橙色竖线。 > [!danger] Danger > 这是一个 danger callout，红色竖线。 > [!success] Success > 这是一个 success callout，绿色竖线。 > [!question] Question > 这是一个 question callout，橙色竖线。 > [!example] Example > 这是一个 example callout，紫色竖线。 > [!quote] Quote > 这是一个 quote callout，灰色竖线。 > [!bug] Bug > 这是一个 bug callout，红色竖线。 > [!todo] Todo > 这是一个 todo callout，蓝色竖线。 > [!abstract] Abstract > 这是一个 abstract callout，青色竖线。 > [!failure] Failure > 这是一个 failure callout，红色竖线。 ## 自定义标题 > [!note] 这是我自定义的笔记标题 > 蓝色竖线，标题文字可以随便写。 > [!tip] 小技巧：使用 Ctrl+K 打开搜索 > 绿色竖线，自定义标题用来描述具体用途。 > [!warning] 注意：此操作不可逆 > 橙色竖线，自定义标题让 warning 更有指向性。 ## 空标题（只有图标，没有文字） > [!note] > 没有标题，只有图标和内容。 > [!tip] > 这也是空标题，图标 + 内容。 > [!warning] > 空标题的 warning。 ## 可折叠 Callout > [!faq]- 点击展开查看答案 > 这是默认收起的 FAQ。`-` 表示默认收起。 > [!example]+ 默认展开的示例 > 这是默认展开的 example。`+` 表示默认展开。点击标题可以收起。 > [!note]- 折叠的笔记 > 这个笔记默认是折叠的。 > 可以包含多行内容。 > 点击标题展开查看。 > [!info]+ 展开的 Info > 这个 info 默认展开，点击标题可以折叠。 ## 嵌套 Callout > [!question] 第一层：Question > 外层是一个 question callout。 > > > [!todo] 第二层：Todo > > 这是嵌套在 question 里面的 todo callout。 > > > > > [!example] 第三层：Example > > > 这是第三层嵌套，example callout。 > [!note] 外层 Note > 外层 note callout。 > > > [!tip] 内层 Tip > > 嵌套的 tip，绿色竖线在蓝色竖线里面。 > > 两个 callout 的竖线颜色各自独立。 > > > > > [!warning] 最内层 Warning > > > 三层嵌套，蓝绿橙竖线都有。 ## 混合：折叠 + 嵌套 > [!question]- 折叠的问题（点击展开） > 这个 callout 既是折叠的，又包含嵌套内容。 > > > [!note] 嵌套的笔记 > > 折叠的外层 + 嵌套的内层。 > > 展开外层的 question 之后可以看到嵌套的 note。 ## 普通引用对比下面是一条普通 Markdown 引用（`>` 语法），用于和 callout 对比竖线宽度： > 这是普通引用。左侧蓝色竖线，斜体，有淡灰背景。 > 和 callout 的区别：callout 有图标 + 标题，引用没有。 ## 复杂折叠测试 ### 外层可折叠 + 内层可折叠 > [!question]- 外层折叠（点击展开） > 外层是折叠的 question。 > > > [!faq]- 内层也折叠（点击展开） > > 内层是折叠的 FAQ，在外层里面。 > > 两个都要能独立折叠/展开。 > > > > > [!example] 最内层不可折叠 > > > 这是一个普通 example，不可以折叠。 ### 外层不可折叠 + 内层可折叠 > [!note] 外层不可折叠 > 外层是普通的 note，不可以折叠。 > > > [!warning]- 内层可折叠（点击展开） > > 内层是折叠的 warning，在外层里面。 > > 点击内层标题可以展开。 > > 外层的图标不应该受内层折叠影响。 ### 三层嵌套 + 各层独立折叠 > [!question]- 第一层（折叠） > 第一层是折叠的 question。 > > > [!note] 第二层（不折叠） > > 第二层是普通的 note。 > > > > > [!tip]- 第三层（折叠） > > > 第三层是折叠的 tip。 > > > 各层图标应该独立旋转，互不影响。

街头摄影入门笔记

Swayopus — Thu, 25 Jun 2026 00:00:00 GMT

## 为什么开始拍照最近买了一台二手富士 X-T3，开始认真学拍照。街头摄影最吸引我的地方在于它的不确定性——你永远不知道下一秒会遇到什么画面。 ## 器材选择新手不用纠结器材。手机也好、卡片机也好、单反也好，重要的是走出去拍。我用 X-T3 配一个 35mm f/2 定焦头，轻便够用。 ## 构图心得 - **三分法**：把画面横竖各分三等份，主体放在交叉点上 - **引导线**：利用道路、栏杆、光影引导视线 - **等待时机**：找到好背景后，等人走进画面 - **打破规则**：拍多了自然知道什么时候该打破规则 ## 后期处理 Lightroom 调色就够了。富士直出颜色已经很舒服，微调曝光和对比度即可。

2026 上半年阅读清单

Swayopus — Thu, 25 Jun 2026 00:00:00 GMT

## 技术类 - **《Designing Data-Intensive Applications》** ★★★★★ — 分布式系统必读，每章都值得反复看 - **《A Philosophy of Software Design》** ★★★★☆ — 薄薄一本，关于复杂性的讨论很透彻 - **《Crafting Interpreters》** ★★★★★ — 手把手教你写解释器，代码清晰，讲解生动 ## 文学类 - **《夜晚的潜水艇》** ★★★★★ — 陈春成的短篇集，想象力惊人，文字干净 - **《克拉拉与太阳》** ★★★★☆ — 石黑一雄的 AI 视角小说，温柔又残酷 - **《失明症漫记》** ★★★★★ — 萨拉马戈对人性的刻画让人不寒而栗 ## 在读 - 《深入理解 Linux 网络》—— 还在啃，笔记待补 - 《重读 20 世纪中国小说》—— 只看了开头几章，今年要读完

LaTeX 数学公式测试 — KaTeX 渲染示例

Swayopus — Mon, 22 Jun 2026 00:00:00 GMT

## 行内公式质能方程 $E = mc^2$ 可能是物理学最著名的公式。欧拉恒等式 $e^{i\pi} + 1 = 0$ 被称为"最美数学公式"。勾股定理 $a^2 + b^2 = c^2$ 和求和公式 $\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n$ 也是常见示例。 ## 块级公式 ### 麦克斯韦方程组 $$ \begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \\ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\ \nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\varepsilon_0\frac{\partial \mathbf{E}}{\partial t} \end{aligned} $$ ### 傅里叶变换 $$ \hat{f}(\xi) = \int_{-\infty}^{\infty} f(x)\, e^{-2\pi i x \xi} \,dx $$ ### 贝叶斯定理 $$ P(A|B) = \frac{P(B|A) \cdot P(A)}{P(B)} $$ ## 矩阵 $$ \begin{pmatrix} a_{11} & a_{12} & \cdots & a_{1n} \\ a_{21} & a_{22} & \cdots & a_{2n} \\ \vdots & \vdots & \ddots & \vdots \\ a_{m1} & a_{m2} & \cdots & a_{mn} \end{pmatrix} $$ ## 常见公式 **二次方程求根：** $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$ **柯西-施瓦茨不等式：** $$ \left|\sum_{i=1}^{n} x_i y_i\right| \leq \sqrt{\sum_{i=1}^{n} x_i^2} \cdot \sqrt{\sum_{i=1}^{n} y_i^2} $$ **泰勒展开：** $$ f(x) = \sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!}(x-a)^n $$ ## 化学方程式 $$ \ce{2H2 + O2 -> 2H2O} $$ $$ \ce{CO2 + C -> 2CO} $$ ## 中文混合对于任意实数 $x$，有不等式 $\frac{x^2 + 1}{2} \geq |x|$，当且仅当 $x = \pm 1$ 时取等号。 --- 以上是所有常用数学公式类型的测试。KaTeX 渲染的公式在亮色和暗色模式下都能正确显示。

Hello, World — Welcome to Crepusopia

Swayopus — Sat, 20 Jun 2026 00:00:00 GMT

## 为什么写博客在 2026 年的今天，互联网上的内容比以往任何时候都要丰富，但真正属于自己的空间却越来越少。社交媒体、短视频、即时通讯——信息流从我们身边呼啸而过，却没有留下什么。写博客是一种对抗。对抗碎片化，对抗速朽，对抗"看过就忘"。 ## 技术选型这个博客基于 **Astro** 构建，使用了以下技术栈： - **Astro 5** — 静态站点生成器，极致性能 - **Tailwind CSS v4** — 原子化 CSS，灵活高效 - **STIX + Snell 字体** — 精致的排版体验 - **oklch 色彩空间** — 流畅的亮暗模式切换 ### 代码示例 ```typescript // 一个简单的 TypeScript 示例 interface Post { title: string; published: Date; tags: string[]; } const posts: Post[] = await getCollection("posts"); const sortedPosts = posts.sort((a, b) => b.data.published.getTime() - a.data.published.getTime()); ``` ## 接下来这个博客会记录我在技术、工程和创作上的思考。内容可能涵盖： 1. 前端开发与工程化实践 2. 工具链与效率方法论 3. 读书笔记与生活随想 > "Writing is thinking. To write well is to think clearly. That's why it's so hard." > — David McCullough 期待在这里与你相遇。

不如来说说我的第一篇博客吧

Swayopus — Thu, 18 Jun 2026 00:00:00 GMT

## 不如来说说我的第一篇博客吧你好，欢迎来到 Crepusopia。我是 Merrick Jun Ouyang，你也可以叫我欧阳钧泓。这是我的个人博客，也是我第一次认真搭建一个属于自己的「线上自留地」。说实话，我写过不少代码，但写一篇「关于自己的文章」反而比写技术文档难得多。既怕写得太正经，又怕写得太随意。犹豫了半天，我决定——不如就像跟朋友聊天一样，说说为什么要做这件事。 ## 为什么会有这个博客？我写博客的念头其实很早就有了，但一直没动手。理由无非是那些老生常谈的借口：没时间、怕写不好、不知道写什么。后来我想通了一件事：一个博客真正的价值，不是它有多完美，而是它开始了。所以这个博客的存在本身，就是最重要的意义。它是我用来记录思考、沉淀经验、练习表达的地方。无论是技术上的摸索，还是生活里的感悟，我都想写下来。不是为了取悦谁，而是为了让未来的自己，能回头看看今天在想什么。 ## 这里会写些什么？我给自己划了三个方向： - 📝 技术记录 - 前端、Astro、Tailwind CSS、性能优化——这些东西我会写。但我不追求「教程感」，更像是把自己的踩坑过程和学习笔记分享出来。 - 📖 个人感悟 - 有些想法在脑子里转了很久，想写下来理一理。可能是关于阅读的、关于成长的、关于折腾的，什么都可能。 - 📆 事件记录 - 一些值得记住的瞬间，一些有意思的事情。写下来，就不怕忘记了。 ## 关于「Swayopus」这个域名是我起的，没有什么深奥的含义。Sway 是「摇摆、流动」，Opus 是「作品」——合在一起，大概就是「在不断变化中，留下一些作品」的意思吧。听起来有点像给自己的「人生说明书」。你也可以把它当成一个安静的角落。来读文章也好，点个赞也好，默默路过也好，都欢迎。那就先这样第一篇博客，话不多说。接下来我会慢慢写，欢迎你常来看看。你可以在评论区说点什么，也可以直接给我写邮件——邮箱在页面底部，或者 About 页面里也有。那么，下次见。 —— Merrick，于 2026 年夏

Tailwind CSS v4 迁移指南：从 v3 到 v4 的变化

Swayopus — Thu, 18 Jun 2026 00:00:00 GMT

## 最大的变化：CSS-first 配置 Tailwind CSS v4 最根本的变化是**不再需要 `tailwind.config.js`**。所有配置直接写在 CSS 文件中。 ### v3 写法 (旧) ```javascript // tailwind.config.js export default { content: ["./src/**/*.{astro,html,js}"], theme: { extend: { colors: { primary: "#3b82f6", }, }, }, plugins: [require("@tailwindcss/typography")], }; ``` ### v4 写法 (新) ```css /* app.css */ @import "tailwindcss"; @theme { --color-primary: #3b82f6; } ``` ## 使用 Vite 插件在 Astro 项目中，v4 通过 Vite 插件集成： ```javascript // astro.config.mjs import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ vite: { plugins: [tailwindcss()], }, }); ``` ## 暗色模式 v4 的暗色模式更加直观： ```css :root { --color-bg: oklch(0.985 0.002 106.43); --color-text: oklch(0.25 0.01 106.43); } .dark { --color-bg: oklch(0.18 0.008 260); --color-text: oklch(0.9 0.008 260); } ``` ## 总结 v4 的迁移总体上比想象中顺利。关键点： 1. 移除 `tailwind.config.js`，改用 CSS `@theme` 2. 使用 `@tailwindcss/vite` 代替 PostCSS 插件 3. CSS 变量天然支持亮暗模式 4. 构建速度明显提升（得益于 Oxide 引擎）

Astro 静态博客的极致性能优化

Swayopus — Mon, 15 Jun 2026 00:00:00 GMT

## 起点：Astro 的默认性能 Astro 的核心理念是 **Zero JavaScript by default**。与 Next.js、Nuxt 等框架不同，Astro 在构建时默认将所有组件渲染为静态 HTML，只在需要交互的地方注入 JS。这意味着一个 Astro 博客的基线性能已经相当优秀。 ## 关键优化点 ### 1. 字体加载字体是最常见的性能瓶颈。使用 `unicode-range` 分段和 `font-display: swap`： ```css @font-face { font-family: "STIX"; src: url("/fonts/STIX-VF.woff2") format("woff2-variations"); font-display: swap; unicode-range: U+0000-00FF; } ``` ### 2. 图片优化 - 使用 AVIF/WebP 格式 - 利用 Astro 的 `` 组件自动生成 srcset - 实现 LQIP (Low Quality Image Placeholders) ### 3. 预加载与预连接 ```html ``` ### 4. View Transitions Astro 的 View Transitions API 让页面导航感觉像 SPA： ```astro ``` ## Lighthouse 得分参考 | 指标 | 得分 | | -------------- | ------ | | Performance | 99-100 | | Accessibility | 100 | | Best Practices | 100 | | SEO | 100 | ## 小结 Astro 让博客达到 100 分 Lighthouse 不再困难。关键是持续关注字体、图片和第三方脚本。

oklch 色彩空间：现代 CSS 的配色新范式

Swayopus — Wed, 10 Jun 2026 00:00:00 GMT

## 为什么不用 HSL？ HSL 有一个众所周知的问题：**相同 Lightness 值的不同色相，人眼感知亮度完全不同**。例如，`hsl(240, 100%, 50%)`（蓝色）和 `hsl(60, 100%, 50%)`（黄色）的 L 都是 50%，但黄色明显比蓝色亮得多。 ## oklch 的改进 oklch 使用**感知均匀**的亮度通道： ```css :root { /* 这两个颜色的感知亮度是一致的 */ --blue: oklch(0.6 0.2 265); --yellow: oklch(0.6 0.2 95); } ``` ## 亮暗模式的优雅切换 ```css :root { --bg: oklch(0.98 0.002 106); /* 亮色背景 */ --text: oklch(0.25 0.01 106); /* 亮色文字 */ } .dark { --bg: oklch(0.18 0.008 260); /* 暗色背景 */ --text: oklch(0.9 0.008 260); /* 暗色文字 */ } ``` ## 浏览器支持 oklch 已在所有现代浏览器中得到支持（Chrome 111+, Safari 15.4+, Firefox 113+）。 ## 小结从 HSL 迁移到 oklch 是值得的——更准确的亮度控制、更简洁的实现方式、更好的可访问性。

Markdown 写作的高效工作流

Swayopus — Thu, 28 May 2026 00:00:00 GMT

## 核心工具 - **VS Code** — 编辑器，配合 Markdown 插件 - **Prettier** — 统一格式化 - **markdownlint** — 语法规范检查 - **Git** — 版本管理 ## 必备 VS Code 插件 1. **Markdown All in One** — 快捷键、TOC、预览 2. **markdownlint** — 规范检查 3. **Code Spell Checker** — 拼写检查 4. **Paste Image** — 快速粘贴图片 ## Frontmatter 模板用脚本自动生成 frontmatter： ```yaml --- title: "" description: "" published: YYYY-MM-DD tags: [] category: "" draft: true --- ``` ## 小结好的工具链让写作更专注于内容本身。Markdown + Git 的组合简单而强大。

2025 年度回顾

Swayopus — Sun, 28 Dec 2025 00:00:00 GMT

## 学习 2025 年是技术栈快速迭代的一年。从 Rust 入门到 Astro 静态站点生成器，从前端工具链到后端部署，这一年接触了不少新东西。 ### 编程语言 - **Rust**：花了三个月时间系统学习了所有权、生命周期和泛型，写了一个小型的命令行工具 - **TypeScript**：从 any 泛滥到严格模式，类型系统终于用得顺手了 - **Python**：在数据处理和自动化脚本方面继续深耕 ### 工具与框架 - 从 Webpack 迁移到 Vite，构建速度快了不止一个数量级 - 开始使用 Astro 构建静态博客，享受 Zero JS by default 的极致性能 - Tailwind CSS v4 的 CSS-first 配置方式让人耳目一新 ## 工作这一年参与了几个有意义的项目： > "The best code is the code you don't have to write." 在工程实践中逐渐理解了这句话的含义。过度设计是最大的敌人。 ## 生活保持了每周跑步三次的习惯，读完了 12 本书。最重要的收获是学会了在忙碌中找到平衡。 ## 2026 展望 - 深入 Rust 异步编程 - 参与开源项目 - 把这个博客经营好