前台页面配置

「页面管理」决定用户在前台看到什么、怎么排版。所有配置保存后都需要刷新前台页面才能看到效果。

菜单下的 11 个页面可以分成三层来理解:

区块设置 #

路径:页面管理 → 区块设置。把它当成「模块库」:这里负责准备内容来源,真正展示在哪个页面由首页或自定义页面决定。

基本流程 #

1. 选择视图:「分组视图」按用途整理,「全部列表」快速查看;
2. 先新增分组(如「首页常用」「活动页」「广告入口」),分组只用于后台整理,不会显示给前台;
3. 在分组里新增区块:选区块类型,填写区块名称、备注与参数。类型创建后不能切换,要换就重新新增;
4. 点击页面顶部「保存配置」;
5. 到「首页配置」或「自定义页面」引用区块。

区块名称建议一眼能看懂用途,如「首页热门视频」「首页轮播图」「底部横幅广告」。删除分组只会把组内区块移到「未分组」,不会删除区块。

区块类型 #

视频列表的「视频类型」 #

选择「指定……」「关键词搜索」「指定视频」时,条件必须填完整,否则区块可能没有内容。

复合模块的常用搭配:首页重点推荐 = 主「热门视频」+ 副「标签列表」/「自定义 HTML」;专题聚合 = 主「指定分类/标签」+ 副「演员列表」/「合辑列表」;活动入口 = 主「指定视频」+ 副「自定义 HTML」。

链接模式与自定义 HTML #

走马灯、横幅、图标广告都要配置点击跳转:

自定义 HTML 区块在前台只显示你写的内容,不显示区块标题、描述、图标和「查看更多」。常用标签(h1-h6、p、a、img、ul/ol、blockquote、code、pre、table)都会自动套用站点主题样式,图片默认最大宽度 100% 并带圆角。跳转站内页面可在链接里使用 to 属性,站外使用标准 href:

<a to="/custom/vip">进入会员专区</a>
<a href="https://example.com" target="_blank">合作站点</a>
<img src="https://example.com/banner.png" style="border-radius:12px" />

手机端出现横向滚动,多半是自定义 HTML 或内嵌页面写了过大的固定宽度,图片请使用自适应宽度。

首页配置 #

路径:页面管理 → 首页配置。只能从「区块设置」里已保存的区块中选择并排序,不会创建新内容。

按区块类型的展示选项:

首页没有可选区块 → 先到区块设置新增并保存;添加后没显示 → 检查是否保存、所选区块本身是否有内容。

自定义页面 #

路径:页面管理 → 自定义页面。用来新增专题页、活动页、会员页、公告页。需要订阅(页面运营)。

1. 新增页面,填写:页面标题(简体中文必填)、页面描述(用于 SEO)、路由标识、是否要求会员等级、会员类型;
2. 页面先出现在列表中,进入编辑,在「区块管理」添加区块并设置各区块展示样式;
3. 列表里的开关打开,前台才能访问;
4. 点击「保存配置」。

访问地址:/custom/路由标识。例如标识 hot-topic → /custom/hot-topic。路由标识必须唯一,只能用小写字母、数字、连字符(如 vip、new-user、hot-topic)。

开启「要求会员等级」后,用户进入页面会看到会员遮罩,需登录并开通/升级会员后继续访问;此时必须选择会员类型。想先准备但暂不公开,保持开关关闭即可。可以把自定义页面链接放进导航配置。

播放页配置 #

路径:页面管理 → 播放页配置。采用「画布 + 组件工具栏」:左侧画布显示区块顺序(可拖拽排序),右侧工具栏开关区块。保存后刷新前台播放页。

可配置区块:播放器、视频价格、视频简介、分类、标签、演员、分集选择(分集数 > 1 才显示)、发行商、所属专辑、推荐视频、自定义 HTML(可多个)、内嵌页面(可多个)。分类/标签/演员/发行商/专辑区块只控制是否展示区域,视频本身没有关联数据就不会显示。

• 推荐视频:按当前视频的第一个分类随机取;侧栏推荐 1-12 个、底部推荐区块 1-100 个,底部可选横向/竖向卡片。
• 操作栏(控制「视频简介」里显示什么):点赞按钮、收藏按钮、描述文本、时长、浏览量、地区、年份。
• 视频价格:开启并在画布中,且用户没有完整观看权限时,按情况显示「购买视频」「开通会员」「升级会员」入口;已有完整权限不显示。
• 自定义内容:HTML 建议只写 HTML+CSS;内嵌页面以 iframe 展示,需允许被嵌入,高度单位 px,建议 200-2000。
• 默认布局:没保存过配置时,前台使用默认布局(播放器、视频简介、分类、标签、演员、分集选择、发行商、所属专辑等)。区块 ID 必须唯一、类型必须受支持,否则保存被拒绝。

「详情页配置」(/page/detailPage)用于详情页的展示方式,同属「页面运营」订阅功能。

列表页配置 #

路径:页面管理 → 列表页配置。

视频卡片通用配置(所有列表页共用):显示时长、显示日期、显示点赞、显示浏览、显示权限角标、标题行数(单行/双行)。

视频列表页:最新视频、热门视频、分类视频、标签视频、演员详情、专辑视频、厂商视频、搜索结果。可配置:是否启用(带开关的页面关闭后前台无法访问)、每页数量、列表布局(网格/瀑布流)、卡片方向、默认排序、是否显示排序栏。

入口列表页:标签列表、专辑列表、厂商列表、演员列表(另有显示模式),可配置启用、每页数量、布局、默认排序、排序栏。

横版封面为主 → 卡片选横版;竖版封面为主 → 选竖版并调整图片对齐;页面加载慢 → 降低每页数量。

导航配置 #

路径:页面管理 → 导航配置。

1. 「添加导航项」新增一级导航;需要下拉菜单时点一级导航右侧「添加子导航」;
2. 填名称(简体中文必填,其他语言可选)、图标(选择/上传/删除图标库图片)、链接类型;
3. 上移/下移调整同级顺序,点击「保存配置」。

一级导航有子导航时,它只负责展开,本身不跳转;删除一级导航会连同子导航一起删除。

导航展示效果由「外观配置」决定:PC 单行(直接显示/抽屉菜单)、双行、多行;移动端单行(抽屉)、双行、多行。菜单过多时单行直接显示会把多余项收进「更多」。

底部菜单 #

路径:页面管理 → 底部菜单,主要用于手机端。

前台显示需要同时满足:(1)至少有一个菜单项;(2)「外观配置」里对应端(PC/移动)的「底部菜单栏」已开启;(3)前台刷新。

每项:标题(简体中文必填)、图标、选中图标(当前路径命中该菜单时显示)、链接类型、地址。注意底部菜单的站内路由与导航不同:最新视频是 /latest,热门视频是 /popular(导航里是 /videos/latest、/videos/popular),使用下拉选项时系统会自动填好。路由跳转才参与选中判断,外部链接不参与。菜单高度、图标大小、字体大小在「外观配置」调整。建议手机端放 4-5 个常用入口。

页脚配置 #

路径:页面管理 → 页脚配置。

站内页面地址示例:/latest、/popular、/me/vip。上移/下移调整显示顺序,删除前有确认框,最后「保存配置」。

弹窗配置 #

路径:页面管理 → 弹窗配置,用于首页公告、会员活动、海报、规则确认、更新提示。

多个弹窗同时启用时按列表顺序逐个展示,最重要的放最上面。关闭默认关闭按钮时,必须在 HTML 里放一个带 data-popup-close 属性的按钮或链接,否则用户无法关闭:

<div style="padding:24px;text-align:center">
  <h3>站点公告</h3>
  <p>今晚 02:00 - 03:00 系统维护。</p>
  <button data-popup-close>我知道了</button>
</div>

不想展示就关闭「启用弹窗」并保存,不必删除。

外观配置 #

外观配置(颜色主题、快速主题、页面宽度、头部结构、底部菜单样式、抽屉菜单)已独立成章,请阅读主题配置。

与本章相关的两点:

• 导航的展示效果(PC 单行/双行/多行、移动端抽屉)由外观配置里的「头部结构」决定;
• 底部菜单要在外观配置里开启对应端的「底部菜单栏」,前台才会显示。