FIRE生活家博客：三栏布局文章详情页演示

前言

这是一篇演示文章，用来展示新的三栏布局效果。文章详情页被分成三个主要区域：

1. 左侧：文章目录导航，自动提取 h2、h3、h4 标题
2. 中间：文章正文，支持 Markdown 格式
3. 右侧：作者信息、文章元数据、相关链接等

什么是 FIRE？

FIRE 是 Financial Independence, Retire Early 的缩写，意思是「财务独立，提前退休」。

核心理念

FIRE 运动的核心思想很简单：

• 高储蓄率：把收入的 50%+ 储蓄起来
• 低消费：控制欲望，极简生活
• 投资增值：让钱生钱，达到 4% 法则

4% 法则

只要你的投资资产达到年支出的 25 倍，那么每年提取 4%，理论上这笔钱永远花不完。

年支出 × 25 = FIRE 目标金额

比如你每年花 10 万，那么存到 250 万就可以 FIRE 了。

三栏布局的优势

左侧目录导航

• 自动提取文章标题生成目录
• 点击可以快速跳转到对应章节
• 滚动时保持固定位置（sticky）
• 支持 h2、h3、h4 多级标题

中间正文区域

• 最大化利用屏幕空间展示内容
• 支持代码高亮、图片、表格等
• 舒适的阅读行高和字体大小

右侧信息栏

• 作者头像和简介
• 文章发布日期、分类、阅读时间
• 快捷链接入口
• 同样支持固定位置滚动

代码演示

def calculate_fire_number(yearly_expense):
    """计算 FIRE 目标金额"""
    return yearly_expense * 25

def calculate_years_to_fire(current_savings, monthly_savings, yearly_expense):
    """计算达到 FIRE 需要的年数"""
    target = calculate_fire_number(yearly_expense)
    annual_return = 0.07  # 假设年化收益 7%
    
    years = 0
    while current_savings < target:
        current_savings = current_savings * (1 + annual_return) + monthly_savings * 12
        years += 1
    
    return years

# 例子
yearly_expense = 100000
monthly_savings = 8000
current_savings = 500000

fire_number = calculate_fire_number(yearly_expense)
years_needed = calculate_years_to_fire(current_savings, monthly_savings, yearly_expense)

print(f"FIRE 目标: {fire_number:,} 元")
print(f"预计需要: {years_needed} 年")

响应式设计

这个布局完全支持响应式设计：

在手机上的表现

在移动设备上，布局会自动切换为单列：

1. 文章标题和元数据
2. 文章目录（可折叠）
3. 正文内容
4. 作者信息和其他边栏内容

未来扩展计划

右侧边栏可以添加

• 热门文章推荐
• 最新文章列表
• 标签云
• 社交媒体链接
• 订阅按钮
• 打赏功能
• 评论数统计

左侧目录可以优化

• 当前阅读位置高亮
• 随滚动自动高亮对应章节
• 展开/折叠功能
• 回到顶部按钮

总结

这个三栏布局提供了专业博客网站的阅读体验：

• ✅ 清晰的目录导航，快速定位内容
• ✅ 宽敞的正文阅读区域，专注于内容
• ✅ 丰富的侧边栏信息，不打扰阅读
• ✅ 完善的响应式设计，适配各种设备

希望你喜欢这个新的布局设计！