上一篇文章聊了为什么要做 PaperUI，这篇我们逐一看看每个新增功能的设计思路和使用效果。

1. 首页轮播系统

功能说明

PaperUI 新增了 homeCarousel 配置项，可以在首页展示三栏图片导航：

[params.homeCarousel]
slides = [
  { image = '/images/hero-1.webp', url = '/posts/paperui-introduction/' },
  { image = '/images/hero-2.webp', url = '/posts/papermod-advantages/' },
  { image = '/images/hero-3.webp', url = '/posts/git-guide/' },
]
middle = [
  { image = '/images/square-1.webp', url = '/posts/python-tips/' },
  { image = '/images/square-2.webp', url = '/posts/linux-commands/' },
]
right = { image = '/images/portrait-1.webp', url = '/about/' }

设计细节

  • 左侧主轮播：16:9 比例，自动播放（4 秒间隔），支持前后导航按钮和指示点
  • 中部卡片：1:1 正方形图片，适合展示方形封面
  • 右侧竖图：3:4 比例，适合展示竖版图片或头像
  • 交互细节：鼠标悬停暂停轮播，焦点状态可访问，所有图片点击跳转到对应链接
  • 响应式：移动端自动切换为单列堆叠布局

这个设计灵感来自传统杂志的封面排版 —— 大图吸引注意力，小图提供更多入口。

2. 双栏布局系统

首页双栏

首页采用 home-layout 双栏布局：

  • 左侧（主内容区）：文章列表
  • 右侧（侧边栏）：搜索框、分类列表、标签云、随机文章、近期文章
[params]
# 首页显示文章数量
homePostCount = 8

侧边栏的每个小部件都有明确的用途：

  • 搜索框：方便读者直接搜索感兴趣的内容
  • 分类列表：按分类浏览文章
  • 标签云：彩色标签，点击跳转到对应标签页
  • 随机文章：增加内容曝光，降低跳出率
  • 近期文章：最新发布的几篇文章

内页侧边栏

分类页、标签页也采用侧边栏布局，左侧显示分类/标签的层级结构，右侧展示对应文章列表。

3. 彩色标签系统

PaperUI 引入了 8 色循环的标签配色方案：

  • 8 种颜色通过 CSS nth-child(8n+X) 自动循环分配
  • 深色/浅色模式各有独立的颜色映射，使用 CSS color-mix 混合背景色
  • 标签云中的标签大小根据文章数量动态调整
  • 分类和标签页面都有彩色标签展示

这个设计让标签不再千篇一律，视觉上更容易区分和记忆。

4. 搜索增强

PaperUI 在 PaperMod 的 fuse.js 搜索基础上做了三项增强：

搜索模态框

点击导航栏的搜索图标或按 Ctrl+K，弹出居中的搜索模态框，输入关键词即时显示结果。

首页侧边栏搜索

首页侧边栏的搜索框输入关键词后，自动跳转到搜索模态框并执行搜索，减少操作步骤。

快捷键

  • Ctrl+K / Cmd+K：打开搜索
  • Esc：关闭搜索

5. 移动端优化

汉堡菜单

移动端导航栏收缩为汉堡图标，点击展开侧滑菜单面板。

侧滑面板

菜单从屏幕左侧滑入，包含导航链接和主题切换、语言切换按钮。半透明遮罩层防止误触。

侧边栏隐藏

移动端屏幕空间有限，所有侧边栏（首页侧边栏、内页侧边栏）在移动端自动隐藏，内容区占满屏幕。

6. 顶部装饰条

页面顶部 2px 的彩色装饰条（.header-top-bar），颜色跟随主题 accent 色。这是一个微小的视觉细节，但能让页面看起来更精致。

7. Sticky Header 毛玻璃效果

页面滚动时，header 固定到顶部并产生半透明毛玻璃效果（backdrop-filter: blur），既保持了导航可见性，又不遮挡内容。

8. LLM 友好

新增 llms.txt 模板，按照 llmstxt 规范生成站点地图，方便 AI 搜索引擎和 LLM 工具索引博客内容。

小结

PaperUI 新增的每一项功能都来自实际使用中的需求，没有为了炫技而添加的功能。如果你正在使用 PaperMod，迁移到 PaperUI 几乎零成本 —— 下一篇我们来介绍具体的安装和配置方法。