https://time-friend.com/zh/tags/%E9%A6%96%E9%A1%B5/Recent content in 首页 on Time FriendHugozh-CNTue, 12 Aug 2025 11:50:00 +0000https://time-friend.com/zh/archive/blog-architecture-typing-effect/Tue, 12 Aug 2025 11:50:00 +0000https://time-friend.com/zh/archive/blog-architecture-typing-effect/<p>打开首页会看到一行文字在逐字打字, 过几秒又换一句. 这个效果不复杂, 但很多人问怎么做的.</p> <p>这篇说一下实现方式.</p> <h1 id="整体原理">整体原理</h1> <p>首页加载时, 从一个 JSON 文件里随机选一句台词, 用 Typed.js 这个库模拟打字效果.</p> <pre tabindex="0"><code>首页加载 ↓ main.js 检测到当前是首页 ↓ 根据语言 (中文/英文) 确定取哪个字段 ↓ 从 /data/quotes.json 随机取一条 ↓ 传给 Typed.js, 开始打字动画 </code></pre><h1 id="数据来源-quotesjson">数据来源: quotes.json</h1> <p>台词存在 <code>static/data/quotes.json</code> 里.</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>[ </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;en&#34;</span>: <span style="color:#e6db74">&#34;Hope is a good thing, maybe the best of things, and no good thing ever dies.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;zh&#34;</span>: <span style="color:#e6db74">&#34;希望是美好的，也许是世间最美好的事物，而美好的事物永不消逝。&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;author&#34;</span>: <span style="color:#e6db74">&#34;The Shawshank Redemption&#34;</span> </span></span><span style="display:flex;"><span> }, </span></span><span style="display:flex;"><span> { </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;en&#34;</span>: <span style="color:#e6db74">&#34;Get busy living or get busy dying.&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;zh&#34;</span>: <span style="color:#e6db74">&#34;忙着活，或忙着死。&#34;</span>, </span></span><span style="display:flex;"><span> <span style="color:#f92672">&#34;author&#34;</span>: <span style="color:#e6db74">&#34;The Shawshank Redemption&#34;</span> </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span>] </span></span></code></pre></div><p>每条数据包含三个字段:</p>