https://example.org/ Recent content in 首页 on 七两 Hugo zh-cn hi@example.org (Eltrac) hi@example.org (Eltrac) Sat, 11 Apr 2026 00:00:00 +0000 https://example.org/posts/20260411/ Sat, 11 Apr 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/posts/20260411/ <p>宛如经历了一场“从百草园到三味书屋”的蜕变，我的个人博客系统终于尘埃落定。</p> <p>这套系统记录了我的技术成长路线：从大一开始简单粗暴地 Clone GitHub 上的开源代码；到大四时，用 Claude “Vibe Coding” 堆叠出一个重量级的毕设项目（基于 SpringBoot + Vue3 + MySQL + Redis + RabbitMQ + Elasticsearch + MinIO，虽然回过头看有些过度设计）；再到如今，借助 Codex，仅用 3 小时便基于 Hugo 和 Obsidian 跑通了全新的轻量化博客。</p> https://example.org/posts/technical_specification/ Fri, 10 Apr 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/posts/technical_specification/ <h2 id="1-文档目标与适用读者">1. 文档目标与适用读者</h2> <p>本文档面向以下读者：</p> <ul> <li>对 <strong>Hugo</strong> 较陌生，尤其不熟悉 <strong>Go Template（Go 模板语法）</strong> 的初级开发者</li> <li>对 <strong>JavaScript DOM 操作</strong>、事件绑定与页面交互组织方式不熟悉的开发者</li> <li>需要在当前博客项目基础上进行修改、扩展和维护的开发者</li> </ul> <p>本文档的核心目标有三个：</p> https://example.org/posts/quiet-interfaces/ Thu, 09 Apr 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/posts/quiet-interfaces/ <h2 id="边界为什么容易做重">边界为什么容易做重</h2> <p>很多界面在需要区分层级时，最直观的办法就是加深阴影、加粗边框，或者直接换成更强烈的背景色。</p> <h2 id="更轻的边界方式">更轻的边界方式</h2> <p>真正耐看的界面，常常只依赖很轻的色差、恰当的留白和准确的排列来建立结构。</p> https://example.org/about/ Wed, 08 Apr 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/about/ <p>这个项目已经按照你提供的提示词生成了一个完整的 Hugo 站点起始版本，包含：</p> <ul> <li>首页、通用页面、文章详情、散文归档、书单详情、小说页、卡片页</li> <li>全局配色系统、暗色模式、背景纹理、印刷感标题</li> <li>目录高亮、返回顶部、本地点赞、外链渲染</li> </ul> <p>如果你后续想继续补：</p> https://example.org/posts/reading-rhythm/ Tue, 07 Apr 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/posts/reading-rhythm/ <h2 id="宽度">宽度</h2> <p>宽度过宽会让读者在换行时失去节奏，过窄又会让页面显得局促。</p> <h2 id="行高">行高</h2> <p>行高并不是越大越好。它应当和字体大小、内容密度一起工作。</p> <h2 id="标题间距">标题间距</h2> <p>标题之间的距离，决定了读者是否能快速判断结构层级。</p> https://example.org/essays/train-window/ Mon, 06 Apr 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/essays/train-window/ <p>列车进站前的几分钟，窗外的建筑都开始有一点模糊。那种模糊并不妨碍辨认，反而让轮廓显得更重要。</p> <p>页面有时候也像这样。真正留下来的，不是每一个细节，而是结构和节奏。</p> https://example.org/cards/layout-note/ Sun, 05 Apr 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/cards/layout-note/ <p>时间线的价值不只是展示顺序，还能把“密度”和“间隔”可视化。</p> <ul> <li>中轴负责顺序</li> <li>左右交错负责节奏</li> <li>卡片负责摘要</li> </ul> https://example.org/posts/soft-navigation/ Fri, 03 Apr 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/posts/soft-navigation/ <h2 id="常态应该退后">常态应该退后</h2> <p>导航如果在默认状态下就已经非常强烈，那么正文一进入页面就会被压住。</p> <h2 id="激活态才需要抬起">激活态才需要抬起</h2> <p>当前项目里的导航更适合在 hover 或 current 状态时再反相显示。</p> <h2 id="轻导航的优势">轻导航的优势</h2> <p>它让页面在静止状态更像文档，而不是仪表板。</p> https://example.org/cards/reading-note/ Wed, 01 Apr 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/cards/reading-note/ <p>如果一篇文章已经长到需要目录，那么目录本身就该承担第二层信息设计的责任：</p> <ul> <li>当前读到哪里</li> <li>还有多少层级</li> <li>哪些段落只是补充，哪些是关键转折</li> </ul> https://example.org/posts/margin-notes/ Mon, 30 Mar 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/posts/margin-notes/ <h2 id="边注的角色">边注的角色</h2> <p>边注本质上是帮助理解正文，而不是替代正文。</p> <h2 id="为什么目录适合放在右侧">为什么目录适合放在右侧</h2> <p>对多数读者来说，右上角更像一个暂时查阅而非持续打扰的位置。</p> <h2 id="当辅助信息过多时">当辅助信息过多时</h2> <p>如果所有信息都挤在正文前方，页面就会显得拥堵。</p> https://example.org/essays/night-desk/ Sun, 29 Mar 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/essays/night-desk/ <p>夜里写字的时候，我总觉得屏幕不应该太亮。亮得太急，会让文字失去停留的地方。</p> <p>所以我更偏爱那些像桌灯一样的页面，照亮正文，却不照亮全部。</p> https://example.org/posts/library-of-small-things/ Wed, 25 Mar 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/posts/library-of-small-things/ <h2 id="小内容不是噪声">小内容不是噪声</h2> <p>很多真正有价值的想法，最初都只是短笔记。</p> <h2 id="结构决定寿命">结构决定寿命</h2> <p>有没有 section、tag、时间顺序和入口位置，直接决定内容是否能被重新发现。</p> <h2 id="从卡片到文章">从卡片到文章</h2> <p>卡片不一定永远是卡片，它也可以是未来长文的源头。</p> https://example.org/posts/content-systems/ Sun, 22 Mar 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/posts/content-systems/ <h2 id="首页只是入口">首页只是入口</h2> <p>首页只负责给出最近的线索，真正决定内容生命力的是它们被重新找到的能力。</p> <h2 id="section-的意义">Section 的意义</h2> <p>把文章、散文、小说、书单拆成独立 section，可以让模板和展示策略清楚很多。</p> https://example.org/essays/afternoon-index/ Sat, 21 Mar 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/essays/afternoon-index/ <p>整理一堆旧文章时，最难的不是决定留下什么，而是决定它们该彼此站在什么位置。</p> <p>好的归档不是抽屉，而是地图。</p> https://example.org/posts/after-midnight-layout/ Wed, 18 Mar 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/posts/after-midnight-layout/ <h2 id="为什么深夜要单独测">为什么深夜要单独测</h2> <p>白天顺眼的界面，在夜里未必仍然舒服。</p> <h2 id="低对比不是低可读">低对比不是低可读</h2> <p>暗色模式的目标不是把一切都压暗，而是重建对比关系。</p> <h2 id="文字的温度">文字的温度</h2> <p>深灰底配浅棕灰字，会比纯黑白对比更柔和。</p> https://example.org/library/book-three/ Wed, 18 Mar 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/library/book-three/ <p>这是一本很容易让人放慢速度的书。它不依赖大事件，而是用持续温柔的观察，把一整片生活带到面前。</p> https://example.org/fictions/cold-platform/ Mon, 16 Mar 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/fictions/cold-platform/ <p>风从空轨道上吹过来的时候，总会把广播声削掉一点边缘。她站在黄线后，听见自己的名字像别人的事。</p> <p>等车的人并不真的在等车，他们在等一个可以继续往前的理由。</p> https://example.org/posts/first-print/ Sat, 14 Mar 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/posts/first-print/ <h2 id="为什么先做骨架">为什么先做骨架</h2> <p>当一个博客以阅读为核心时，最先应该稳定下来的不是炫技，而是节奏。</p> <h2 id="固定宽度">固定宽度</h2> <p><code>650px</code> 这个宽度在桌面端会给人比较稳的阅读体验。它不会太散，也不会压得太紧。</p> <h2 id="纹理和颜色">纹理和颜色</h2> <p>背景上的淡纹理应该几乎感觉不到，但拿掉以后会立刻失去质感。这个项目里用的是内联 SVG，所以部署起来很轻。</p> https://example.org/posts/thin-lines/ Wed, 11 Mar 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/posts/thin-lines/ <h2 id="实线的问题">实线的问题</h2> <p>过重的线会让版面变碎，尤其是在信息本来就很多的时候。</p> <h2 id="虚线的优点">虚线的优点</h2> <p>虚线天然更轻，更像提醒，而不是命令。</p> <h2 id="分割也有层级">分割也有层级</h2> <p>页脚、目录缩进线、时间线中轴，不应该用完全同一种强调强度。</p> https://example.org/essays/windy-corridor/ Mon, 09 Mar 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/essays/windy-corridor/ <p>有些页面看起来很满，但没有方向；有些页面很空，却有风。</p> <p>我总觉得后者更接近真实的阅读空间。</p> https://example.org/posts/paper-trace/ Thu, 05 Mar 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/posts/paper-trace/ <h2 id="纹理是第二层背景">纹理是第二层背景</h2> <p>它不应该先于内容被注意到，但拿掉之后又会让页面显得单薄。</p> <h2 id="为什么要足够淡">为什么要足够淡</h2> <p>如果纹理太强，读者会把注意力浪费在背景上。</p> <h2 id="纸感的实现">纸感的实现</h2> <p>轻微网格、低透明度、固定尺寸重复，是一种比较稳妥的方式。</p> https://example.org/library/book-two/ Sun, 01 Mar 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/library/book-two/ <p>当你把两本书放在一起读，就能感受到同一位作者在不同空间里的目光密度。</p> https://example.org/fictions/sleepless-station/ Fri, 27 Feb 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/fictions/sleepless-station/ <p>凌晨两点半，站台上只剩售货机在发亮。玻璃反光里，他看见自己像一张没被取走的车票。</p> <p>列车晚点以后，时间就开始变稠。每个人都像被临时搁置在一段不属于自己的叙事里。</p> https://example.org/essays/small-lamp/ Thu, 19 Feb 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/essays/small-lamp/ <p>灯太大，房间就没有层次。界面也一样。</p> <p>真正舒服的页面，往往只照亮你现在正在看的那部分。</p> https://example.org/library/book-four/ Sat, 14 Feb 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/library/book-four/ <p>最打动人的地方不是设定本身，而是它如何把不落地的生活写得异常可信。</p> https://example.org/essays/rainy-room/ Wed, 11 Feb 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/essays/rainy-room/ <h2 id="雨声是页面的边框">雨声是页面的边框</h2> <p>如果你把页面看成一个房间，那么滚动条、留白、标题和脚注，其实就是门框、窗沿、灯光和桌角。</p> <h2 id="慢下来以后">慢下来以后</h2> <p>你会发现很多内容不需要被卡片化得太彻底，它们只需要一个安静的排版容器。</p> https://example.org/library/book-five/ Mon, 02 Feb 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/library/book-five/ <p>它像一个巨大的陈列柜，每一格都短，但组合起来会形成非常强的回响。</p> https://example.org/library/book-one/ Tue, 06 Jan 2026 00:00:00 +0000hi@example.org (Eltrac) https://example.org/library/book-one/ <p>这本书最迷人的部分，不是它写了飞行，而是它写出了人在远方时如何理解自己。</p> https://example.org/library/book-six/ Mon, 22 Dec 2025 00:00:00 +0000hi@example.org (Eltrac) https://example.org/library/book-six/ <p>每隔一段时间再读一次，都会在完全不同的句子上停下来。</p> https://example.org/posts/design_specification/ Mon, 01 Jan 0001 00:00:00 +0000hi@example.org (Eltrac) https://example.org/posts/design_specification/ <h1 id="hugo-博客项目设计规范文档">Hugo 博客项目设计规范文档</h1> <h2 id="项目视觉总览">项目视觉总览</h2> <h3 id="视觉气质">视觉气质</h3> <p>本项目的视觉基调不是“互联网产品界面”，而是更接近<strong>纸面阅读物、档案页、轻印刷海报</strong>的混合风格。整体感受有以下几个稳定特征：</p>