演示站   更多作品   主题更新日志（26/09/11）

浮光（floatlee）是一套为 Z-BlogPHP 打造的现代化主题，把「被搜索收录好、打开快、手机上好看、既能写个人博客又能撑起门户站」作为核心设计目标。它不是又一套只在内核里堆视觉的主题，而是在模板层就把 SEO 结构化数据、移动适配声明、性能优化做成了默认行为。

浮光（floatlee）把「被搜得到、打开快、手机上好看、个人站门户站都能用」做成了主题出厂默认值，而不是事后补丁。如果你的目标是让内容在搜索引擎与 AI 搜索里都有稳定、准确的曝光，同时兼顾访问速度与移动体验，它会省掉你大量「怎么没收录 / 怎么又慢了」的排查成本。

一句话定位

• SEO/GEO 友好：模板内置双JSON-LD结构化数据 + 全页型 Open Graph + 分页面类型精准 Meta。

• 响应快：图片懒加载、零重型前端依赖、静态资源带版本戳缓存。

• 移动优先：viewport-fit=cover 适配刘海屏、响应式抽屉导航、评论区移动端深度适配。

• 一主题两形态：后台可配首页精选、完善分类/标签体系，个人博客与门户网站通用。

SEO / GEO 优化

浮光在 header-seo.php 中对每个页面类型输出对应的 SEO 元信息，而不是全站套用同一套。这让百度、Google、微信/微博分享卡片、以及 ChatGPT / 文心一言 / 豆包等生成式引擎都能拿到准确、结构化的页面信息。

双结构化数据（JSON-LD）

每篇文章页同时输出两份 JSON-LD：

• 百度熊掌号/搜索结构化数据（ziyuan.baidu.com/contexts/cambrian.jsonld）：含 title、images、description、pubDate、upDate，直接服务百度结果页富摘要。

• schema.org 标准结构化数据：@type 随页面类型变化（文章/列表/页），含 headline、mainEntityOfPage、image、datePublished、dateModified、author，是 Google 与各 AI 搜索引擎理解页面语义的通用语言。

结构化数据可被 AI 搜索直接解析，这正是 GEO（Generative Engine Optimization，生成式引擎优化） 的关键——让机器读懂你的内容，从而在 AI 回答中被准确引用。

全页型 Open Graph

首页、分类页、标签页、文章页、搜索页、独立页均输出 og:type / og:title / og:description / og:image / og:url，并额外带 og:release_date、og:updated_time、og:article:author。社交分享与即时搜索结果都能拿到规范的标题、摘要与封面图。

分页面类型的精准 Meta

后台可为文章、分类、标签单独填写自定义关键词与描述，不配则自动回退到标签 / 简介，运营无需改模板。

移动适配声明（利于百度移动/GEO）

头部输出 <meta name="applicable-device" content="pc,mobile">，明确告知搜索引擎本站 PC 与移动端同源适配，避免移动搜索被降权，也利于生成式引擎做设备维度判断。

语义化结构与规范标题层级

模板保持语义化 HTML（header / main / article / section 等）与规范的 h1-h3 层级，便于爬虫与 AI 解析内容主题与从属关系。

响应速度快

图片懒加载

原生 loading="lazy" 在浏览器里往往「预取 2.5 屏 + HTTP 缓存」，F12 看到的全是「已加载」，等于没懒。浮光改用真正的 data-src 懒加载：

• 列表封面初始只放 1×1 透明占位图，data-src 存真实地址；

• 用 IntersectionObserver（提前 200px）在滚到视口附近才换回真实 src；

• 每个懒加载 img 后都带 <noscript><img src="真实图"></noscript>，不执行 JS 的爬虫也能拿到真实 URL；

• 首屏主图（首页精选、列表大图）直接用真实 src + 原生 loading="lazy"，保证搜索引擎结果页主图必被抓取。

零重型前端依赖

主题不引入 jQuery、Bootstrap 等大型框架，交互脚本按需加载（如图片灯箱 lightbox.js 仅文章/独立页加载），首屏 JS 量极小。

静态资源缓存策略

CSS / JS 引用带 ?v={主题修改时间} 版本戳，主题更新自动刷新、平时走浏览器强缓存，减少重复请求。

移动端自适应

刘海屏适配

<meta name="viewport" content="...viewport-fit=cover"> 适配 iPhone 刘海/灵动岛的安全区。

响应式导航 + 抽屉

桌面端横排导航 + 悬停展开的分类专题面板；移动端（≤640px）切换为左侧抽屉，分类在抽屉内以折叠面板呈现，不挤占正文宽度。

评论区移动端深度适配

• 头像在 ≤400px 全隐藏，≤640px 下二层以上评论隐藏头像，避免窄屏被头像挤占；

• 昵称/邮箱/网址三栏在窄屏整行堆叠，验证码独占一行，提交按钮撑满；

• 嵌套评论缩进随层级收紧，多层回复不再吃掉正文宽度。

流体化排版

正文、标题、间距使用 clamp() 与相对单位做流体缩放，同一套模板从手机到大屏都保持舒适阅读节奏。

个人博客 & 门户网站双场景

后台可配首页精选

首屏精选位支持在主题配置里填写文章 ID，由后台指定推荐内容；未配置时自动回退到最新文章。运营零模板改动即可换推荐。

完善分类 / 标签体系

每个分类、标签都拥有独立的 SEO Meta 与结构化数据，门户级的多频道内容也能被搜索引擎逐频道收录。

多模板覆盖

内置列表页、详情页、独立页等多套模板，配合分类/标签体系，一套主题既能是极简个人博客，也能撑起内容密集的门户站。

一主题多形态

从单作者日记到多栏目资讯站，切换只需后台配置，无需更换主题或重写模板。

• 个人博客：开箱即用的文章流 + 精选 + 评论，SEO 该有的都有。

• 门户网站 / 资讯站：分类/标签全量收录、移动适配声明、结构化数据，利于频道级搜索曝光。

• AI 搜索时代的内容站：JSON-LD + 语义化结构让内容更易被生成式引擎理解引用（GEO）。

部分场景演示

首页效果展示：

默认列表分类效果：

图文瀑布流分类效果：

文章页显示效果：