作者分享了如何利用 CSS 的 :target 选择器，结合页面 URL 片段实现动态显示/隐藏内容，从而构建一个无需后端交互、速度极快的静态博客。该项目解决了博客源码更新和发布延迟的问题，实现了笔记的增删改功能，并且内容全部存储在单个 HTML 文件中，便于更新和同步，同时支持基本的 Markdown 语法。虽然牺牲了页面锚点和单篇笔记的 SEO，但作者认为其极高的速度和便捷性满足了个人电子笔记本的需求。作者鼓励大家体验并提出建议。

⚡️ **极致的速度与便捷性**: 该项目利用 CSS 的 :target 选择器，通过 URL 片段控制内容的显示与隐藏，完全消除了后端交互，实现了极快的加载速度。这解决了作者在更新和发布博客时常遇到的拖延问题，使得内容能够快速地以静态 HTML 的形式呈现。

📝 **高效的内容管理**: 项目实现了笔记的增、删、改功能，所有内容集中在一个 HTML 文件中，极大地方便了用户进行内容的更新和同步。这种单文件结构简化了博客的维护流程，让作者能够更专注于写作本身。

💡 **核心技术与权衡**: 通过 CSS :target 选择器，在不依赖 JavaScript 或后端的情况下，实现了类似动态博客的内容切换效果。虽然这一实现方式导致页面锚点功能失效且单篇笔记无法进行 SEO 优化，但作者认为其带来的速度和易用性优势是值得的，符合其作为电子笔记本的定位。

✍️ **持续写作的动力**: 受初中语文老师“多看多写”的启发，作者养成了记笔记和写博客的习惯，并希望长期保持。这个项目正是作者为自己打造的“电子笔记本”，旨在“随心而写”，鼓励自己持续地输出内容。

动机

我的博客上最后一篇文章是 2023 年的年度总结，但文章源码一直在更新。

博客是使用自己开发的静态网站生成器。每次我想发布新文章，就会经历构建和部署的过程。比较麻烦，所以自己总是拖延，长久下来，文章写了很多，但一直没有发布出来。为了速度起见，我也不可能再回到动态博客中。

而正好了解了到 CSS 的 :target 选择器可以配合页面 URL 片段显示/隐藏文档内容。于是有了这个项目。

优点

速度极快，无任何后端交互实现了笔记的增/删/改单 HTML 文件，随意更新与同步基本的 MarkDown 语法支持

缺点

需要加载整个文档页面锚点不再生效不支持每篇笔记的 SEO

我初中时语文成绩差点不及格，当时的老师告诉我：语文学习，说难也难，因为是母语，很多人不会用心学习；说简单也简单，四个字：多看多写。从此我养成了记笔记、写博客的习惯，我希望这个习惯能一直持续下去。

这个项目就是我的电子笔记本，就如它的名字一样，随心而写，仅此而已。

欢迎大家体验使用，并提出意见建议： https://chunqiuyiyu.github.io/xie/#archive