一款液态玻璃风格Typecho主题

简约风格：本站
社交风格：https://wz.robes.xin

布局设置

社交风格：文章卡片带头像、用户名、图片网格，类似社交媒体信息流。

简约风格：文章卡片只有标题、摘要、元数据，类似传统博客列表。

功能开关

首页

首页自动显示文章列表，支持两种卡片风格（在主题配置中切换）。

功能特性：

• 一言随机显示（可关闭）
• 最新/热度/评论排序切换（可关闭）
• 移动端搜索框
• 瀑布流入场动画
• 分页导航

友情链接

创建一个「友链」页面，选择模板为「友情链接」。

前提条件： 需要安装「寒泥友情链接」插件。

页面内容：

• 友链卡片网格（头像 + 名称 + 描述）
• 站长信息卡（可在主题配置中自定义）
• 申请友链弹窗

朋友圈

创建一个「朋友圈」页面，选择模板为「朋友圈」。

功能说明：

• 自动抓取友链的 RSS 获取最新文章
• 按最新文章时间排序
• 缓存 2 小时，避免频繁请求
• 每个好友显示 3 篇最新文章

前提条件： 需要安装「寒泥友情链接」插件，且好友站点有 RSS 输出。

相册

创建一个「相册」页面，选择模板为「相册」。

功能说明：

• 自动从指定分类的文章中提取图片
• 瀑布流布局展示
• 点击可查看大图（灯箱）
• 默认分类 ID 为 6，可在主题配置中修改

自定义 CSS 示例

/* 修改文章标题颜色 */
.article-title { color: #ff6b6b; }

/* 修改侧边栏宽度 */
:root { --sidebar-w: 280px; }

/* 隐藏底部栏 */
.bottom-bar { display: none; }

技术特性

• 液态玻璃风格：backdrop-filter 毛玻璃效果
• 深色模式：完整的深色适配，平滑过渡动画
• PJAX：页面无刷新切换，预加载提速
• 响应式：桌面端 / 平板 / 手机完整适配
• 图片灯箱：支持多图切换、键盘导航
• 瀑布流动画：内容依次淡入，视觉层次分明
• 代码高亮：玻璃风格代码块，带复制按钮
• 点赞系统：Cookie 防刷，动画反馈
• 通知面板：最新评论通知，已读状态持久化
• 滚动进度：环形进度条，一键回到顶部/底部

兼容性

• Typecho：1.3.0+
• 浏览器：Chrome 80+、Firefox 80+、Safari 14+、Edge 80+
• PHP：7.4+