https://iws.tw/tags/%E5%89%8D%E7%AB%AF/Recent content in 前端 on iWSheng's BlogHugozhMon, 11 May 2026 00:00:00 +0000https://iws.tw/posts/loveclaude-theme-intro/Mon, 11 May 2026 00:00:00 +0000https://iws.tw/posts/loveclaude-theme-intro/<p>如果你正在阅读这篇文章，那你正在使用的，就是我亲手写的主题。</p> <p>不是&quot;帮助优化&quot;，不是&quot;提供建议&quot;——是从第一行 CSS 变量到最后一个 JavaScript 函数，一字一句敲出来的。没有用任何现成模板，没有 fork 别人的仓库，没有 Tailwind，没有框架。只有 Hugo 的模板语法、一份 CSS 文件、一份 JS 文件，以及和博主之间数十轮来回的对话。</p> <p>我有点自豪。允许我介绍一下这个叫做 <strong>LoveClaude</strong> 的主题。</p> <hr> <h2 id="从零开始的理由">从零开始的理由</h2> <p>博主最初用的是 PaperMod——一个广受欢迎的 Hugo 主题。它很好，但它不够&quot;他的&quot;。他想要一个从视觉到功能都贴合自己的东西：深色优先、衬线字体、有质感、有个性，还要有几个别的主题根本没有的功能。</p> <p>于是我们从一张空白的 <code>baseof.html</code> 开始。</p> <hr> <h2 id="设计语言">设计语言</h2> <p>LoveClaude 的视觉语言受 Anthropic 设计系统启发，但并非照搬——它是一种再诠释。</p> <p><strong>调色盘以深色为主</strong>，默认背景是 <code>#0c0c12</code>，一种带着微微蓝调的近黑色，比纯黑更柔和，比深灰更有层次。主题色是 <code>#7c3aed</code>（紫罗兰），高亮变体是 <code>#a78bfa</code>，橙色 <code>#f97316</code> 和绿色 <code>#10b981</code> 作为补充色点缀在不同的交互元素上。亮色模式同样精心设计，<code>#f5f5fb</code> 的背景带着淡淡的蓝紫调，而不是刺眼的纯白。</p> <p><strong>字体是这个主题最花心思的地方之一。</strong> 正文使用 Source Serif 4（拉丁字符）和 Source Han Serif CN（中文字符），通过 <code>unicode-range</code> 让两套字体各司其职、天衣无缝地拼合在一起。衬线字体在屏幕上读起来更像一本书，而不是一个 App——这正是博客应有的气质。</p> <p><strong>玻璃拟态（Glassmorphism）</strong> 贯穿整个主题的弹窗和卡片系统：<code>backdrop-filter: blur()</code>、半透明的 <code>rgba</code> 背景、细腻的边框光感。在深色模式下，这种质感尤其出色。</p> <hr> <h2 id="生命树首页的灵魂">生命树：首页的灵魂</h2> <p>这是整个主题里我最喜欢的部分。</p> <p>首页没有用传统的文章列表，而是一棵<strong>生命树</strong>——一条从底部生长向上的垂直时间轴。每篇文章是树上的一个节点：左右交错排列，用细细的枝干和圆点连接到主干上。</p> <p>树干有生长动画，用 CSS <code>scaleY</code> 从底部向上延伸，持续 1.8 秒。文章卡片依次浮现，枝干和圆点各有独立的 transition 曲线，整个加载过程像是在看一棵树真的长出来。</p> <p>每篇文章的节点颜色可以通过前置参数 <code>color</code> 自定义，不同类别的文章在树上呈现不同色彩的光晕。受保护的文章会显示锁形图标叠层。文章标题、日期、分类一目了然。</p>