本源码是一篇精心设计的博客/长文阅读单页模板，以一篇完整的中文随笔《写给三年后的自己》作为示例内容。页面采用暖橙色调搭配米白底色，营造舒适沉浸的阅读氛围。顶部固定导航栏内嵌阅读进度条，随滚动实时更新位置。
设计上遵循现代博客的最佳实践：正文区域最大宽度 720px 保证最佳行长（每行约 60-80 字符）；右侧固定侧栏包含文章目录（锚点跳转）、作者简介卡片与热门文章推荐；首字下沉效果、引用块、代码块、标签云等排版元素一应俱全。底部还有上/下一篇导航卡片引导继续阅读。
适合独立博主、技术写作者、知识分享者搭建个人博客的文章详情页；也可作为企业官网的新闻动态/公告详情模板。示例文章可直接替换为自己的内容，HTML 结构清晰便于 CMS 对接。
使用教程
1. 下载与保存
将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。
2. 本地预览
直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。
3. 自定义修改
替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。
4. 上线部署
将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。
HTML 源码
复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>写给三年后的自己 · 慢读志</title>
<style>
:root{
--bg:#fbfaf7; --card:#fff; --ink:#22252b; --sub:#7a8090; --line:#e8e6df;
--accent:#c05621; --accent-l:#fbeee3; --mark:#fff3bf;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",Georgia,"Songti SC",serif;background:var(--bg);color:var(--ink);line-height:1.9;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
/* NAV */
nav{position:sticky;top:0;z-index:20;background:rgba(251,250,247,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nb{max-width:1100px;margin:0 auto;padding:0 24px;height:62px;display:flex;align-items:center;justify-content:space-between}
.logo{font-weight:800;letter-spacing:4px;font-size:17px;color:var(--ink)}
.nb .lk{display:flex;gap:24px;font-size:14.5px}
.nb .lk a{color:var(--sub)}
.nb .lk a:hover{color:var(--accent);text-decoration:none}
/* 阅读进度条 */
.prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:30;transition:width .1s linear}
/* HERO */
.hero{max-width:820px;margin:0 auto;padding:56px 24px 30px;text-align:center}
.cat{display:inline-block;font-size:12.5px;letter-spacing:3px;color:var(--accent);background:var(--accent-l);padding:5px 15px;border-radius:999px;margin-bottom:20px;font-family:sans-serif}
h1{font-size:clamp(28px,4.8vw,42px);line-height:1.35;font-weight:800;letter-spacing:.5px}
.meta{margin-top:22px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--sub);font-size:14px;font-family:sans-serif}
.av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#c05621,#e9a06a);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.meta i{font-style:normal;opacity:.5}
.cover{max-width:900px;margin:30px auto 0;padding:0 24px}
.cover .img{height:300px;border-radius:18px;background:linear-gradient(135deg,#f6d365,#fda085 55%,#c05621);
position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(192,86,33,.18)}
.cover .img::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.25) 1.2px,transparent 1.2px);background-size:20px 20px}
.cover small{display:block;text-align:center;color:var(--sub);font-size:12.5px;margin-top:10px;font-family:sans-serif}
/* LAYOUT */
.main{max-width:1100px;margin:44px auto 0;padding:0 24px;display:grid;grid-template-columns:1fr 250px;gap:48px;align-items:start}
article{font-size:17px;color:#31353f;max-width:720px}
article h2{font-size:24px;margin:38px 0 14px;font-weight:800;padding-left:14px;border-left:4px solid var(--accent)}
article h3{font-size:19px;margin:26px 0 10px;font-weight:700}
article p{margin-bottom:18px}
article p.first::first-letter{float:left;font-size:58px;line-height:.9;padding:4px 10px 0 0;color:var(--accent);font-weight:800}
mark{background:var(--mark);padding:1px 3px;border-radius:3px}
blockquote{margin:26px 0;padding:18px 22px;background:var(--card);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;color:#4a505e;font-size:16.5px;box-shadow:0 4px 18px rgba(34,37,43,.05)}
blockquote footer{margin-top:8px;font-size:13.5px;color:var(--sub);font-family:sans-serif}
article ul,article ol{margin:0 0 18px 22px}
article li{margin-bottom:7px}
pre{background:#22252b;color:#e6e8ec;padding:18px 20px;border-radius:12px;overflow-x:auto;font-size:14px;line-height:1.7;margin-bottom:20px;font-family:Consolas,Monaco,monospace}
code{font-family:Consolas,Monaco,monospace;background:#f0eee8;padding:2px 6px;border-radius:5px;font-size:.9em}
pre code{background:none;padding:0;color:inherit}
hr{border:0;border-top:1px dashed var(--line);margin:34px 0}
.tags{display:flex;gap:9px;flex-wrap:wrap;margin:34px 0 0;font-family:sans-serif}
.tags a{font-size:13px;padding:5px 14px;border:1px solid var(--line);border-radius:999px;color:var(--sub);background:var(--card)}
.tags a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
/* SIDEBAR */
aside{position:sticky;top:86px;font-family:sans-serif}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px}
.box h4{font-size:13px;letter-spacing:2px;color:var(--sub);margin-bottom:12px}
.toc a{display:block;font-size:14px;color:#4a505e;padding:6px 0 6px 12px;border-left:2px solid var(--line)}
.toc a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.toc a.sub{padding-left:26px;font-size:13.5px;color:var(--sub)}
.author{text-align:center}
.author .av{width:58px;height:58px;font-size:22px;margin:0 auto 10px}
.author b{display:block;font-size:15.5px}
.author p{font-size:13px;color:var(--sub);margin-top:6px;line-height:1.7}
.author a.btn{display:block;margin-top:14px;padding:9px;border:1px solid var(--accent);border-radius:9px;color:var(--accent);font-size:14px;font-weight:600}
.author a.btn:hover{background:var(--accent);color:#fff;text-decoration:none}
/* NEXT */
.nextwrap{max-width:1100px;margin:50px auto 0;padding:0 24px 60px}
.next{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.nx{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;transition:.25s}
.nx:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(34,37,43,.09)}
.nx small{color:var(--accent);font-size:12.5px;letter-spacing:2px;font-family:sans-serif}
.nx b{display:block;margin-top:7px;font-size:16px}
.nx p{color:var(--sub);font-size:13.5px;margin-top:6px}
footer.site{border-top:1px solid var(--line);padding:30px 24px;text-align:center;color:var(--sub);font-size:13.5px;font-family:sans-serif}
@media(max-width:900px){.main{grid-template-columns:1fr}aside{position:static}}
</style>
</head>
<body>
<div class="prog" id="prog"></div>
<nav><div class="nb">
<span class="logo">慢读志</span>
<div class="lk"><a href="#">首页</a><a href="#">随笔</a><a href="#">书单</a><a href="#">关于</a></div>
</div></nav>
<div class="hero">
<span class="cat">生活随笔</span>
<h1>写给三年后的自己：<br>关于"慢下来"这件事</h1>
<div class="meta">
<span class="av">林</span><span>林晚舟</span><i>·</i><span>2026 年 7 月 31 日</span><i>·</i><span>约 9 分钟阅读</span><i>·</i><span>1,286 次浏览</span>
</div>
</div>
<div class="cover"><div class="img"></div><small>封面图 · 摄于清晨六点的窗台</small></div>
<div class="main">
<article>
<p class="first">很长一段时间里，我把"效率"当作衡量一天是否值得的唯一尺子。日历被填满，待办清单被划掉，可到了夜里躺下时，脑子里剩下的却常常是空的。直到某个加班到凌晨的周三，我在便利店门口站了十分钟，只是看着雨落在招牌上，忽然意识到——<mark>我已经很久没有认真看过任何一件事了。</mark></p>
<p>于是我开始做一个小实验：每天留出四十分钟，什么都不做。不刷手机，不听播客，不"顺便"回消息。刚开始的三天极其难熬，手指会条件反射地摸向口袋。但到第二周，某种久违的东西回来了：我能听见冰箱压缩机启动的声音，能想起上个月忘记回复的一封邮件，也能想清楚一个卡了很久的方案。</p>
<h2 id="s1">一、慢不是懈怠，是把注意力还给自己</h2>
<p>我们常把"慢"误解成产出更少。但真正的区别在于注意力的分配方式。碎片化的一小时里，注意力被切成十几段，每一段都在重新加载上下文；而完整的四十分钟，注意力只启动一次。<mark>前者消耗的是体力，后者积累的是判断力。</mark></p>
<blockquote>
我们以为自己在争分夺秒，其实只是在不停地重新开始。
<footer>—— 摘自读书笔记《深度工作》</footer>
</blockquote>
<h3>三个具体做法</h3>
<ul>
<li><b>物理隔离</b>：把手机放到另一个房间，而不是"扣在桌上"。距离比自制力可靠。</li>
<li><b>单一容器</b>：一天只留一个"杂事时段"，其余时间产生的琐事统一记到一张纸上。</li>
<li><b>结束仪式</b>：工作结束时写三行——今天完成了什么、卡在哪里、明天第一件事做什么。</li>
</ul>
<h2 id="s2">二、给时间做减法，比做加法难得多</h2>
<p>做加法很容易：报一门课、下一个 App、立一个 flag。做减法却要面对"万一错过了呢"的焦虑。我用了一个笨办法——把过去三个月做过的事全部列出来，然后问每一件："如果当时没做，今天的我会有实质损失吗？"结果超过一半的答案是"不会"。</p>
<p>如果你也想试试，可以用下面这段小脚本把你的待办清单按"实际收益"重新排序，它不聪明，但足够诚实：</p>
<pre><code>const tasks = [
{ name: '整理年度书单', gain: 8, cost: 2 },
{ name: '刷行业资讯', gain: 2, cost: 5 },
{ name: '写周复盘', gain: 9, cost: 1 },
];
tasks
.map(t => ({ ...t, roi: (t.gain / t.cost).toFixed(1) }))
.sort((a, b) => b.roi - a.roi)
.forEach(t => console.log(`${t.roi}\t${t.name}`));</code></pre>
<h2 id="s3">三、写给三年后的你</h2>
<p>如果三年后的你读到这里，我希望有几件事没有变：你还愿意为一顿好饭花两个小时；你还会在朋友难过时先问"发生了什么"而不是"你应该怎么做"；你依然记得，<mark>人生不是一个需要被优化的系统。</mark></p>
<p>也希望有几件事变了：你不再用忙碌回避真正重要的选择；你终于去了那趟一直推迟的旅行；你学会了在别人期待你加速的时候，坦然地说一句"我需要慢一点"。</p>
<hr>
<p style="color:var(--sub);font-size:15px">写于 2026 年 7 月 31 日，杭州，雨。如果这篇文字对你有一点点用，欢迎把它转给那个总是很累的朋友。</p>
<div class="tags">
<a href="#"># 生活随笔</a><a href="#"># 时间管理</a><a href="#"># 深度工作</a><a href="#"># 自我对话</a>
</div>
</article>
<aside>
<div class="box toc">
<h4>本文目录</h4>
<a href="#s1">一、慢不是懈怠</a>
<a href="#s1" class="sub">三个具体做法</a>
<a href="#s2">二、给时间做减法</a>
<a href="#s3">三、写给三年后的你</a>
</div>
<div class="box author">
<div class="av">林</div>
<b>林晚舟</b>
<p>产品设计师，写字爱好者。相信好的生活需要一点笨拙的坚持。</p>
<a class="btn" href="#">关注我</a>
</div>
<div class="box">
<h4>热门文章</h4>
<a href="#" style="display:block;font-size:14px;padding:7px 0;color:#4a505e">如何用一张纸管理一整年</a>
<a href="#" style="display:block;font-size:14px;padding:7px 0;color:#4a505e">我删掉了手机里的 32 个 App</a>
<a href="#" style="display:block;font-size:14px;padding:7px 0;color:#4a505e">关于早起，我说的其实是……</a>
</div>
</aside>
</div>
<div class="nextwrap">
<div class="next">
<div class="nx"><small>上一篇</small><b>在书店坐一整个下午</b><p>关于那些不产出任何东西的时间。</p></div>
<div class="nx"><small>下一篇</small><b>把周末还给自己的七个办法</b><p>不需要请假，也不需要旅行。</p></div>
</div>
</div>
<footer class="site">© 2026 慢读志 · 内容采用 CC BY-NC-SA 4.0 协议</footer>
<script>
window.addEventListener('scroll', function () {
var h = document.documentElement;
var p = h.scrollTop / (h.scrollHeight - h.clientHeight) * 100;
document.getElementById('prog').style.width = p + '%';
});
</script>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1747.html
微信扫一扫 
支付宝扫一扫 
