动态管理
1. 访问动态管理
在管理后台左侧菜单中进入 「动态管理」,即可查看当前所有动态列表,并进行新增、编辑、删除等操作。
动态管理适用于维护博客中的短内容、碎片化表达以及包含图片、链接、音乐、视频等多媒体内容的动态信息。
2. 动态列表
2.1 列表功能
动态列表页面提供以下常用功能:
| 功能 | 说明 |
|---|---|
| 分页展示 | 每页显示 20 条数据 |
| 新增动态 | 创建新动态 |
| 刷新 | 重新加载动态列表 |
| 快速操作 | 编辑、删除动态 |
通过这些功能,你可以快速浏览现有动态内容,并进行日常维护。
2.2 列表字段
动态列表主要展示以下基础信息:
| 字段 | 说明 |
|---|---|
| 内容 | 动态文本内容,支持状态标签显示 |
| 状态 | 显示「已发布」或「草稿」标签 |
| 发布时间 | 动态的发布时间 |
这些字段用于帮助管理员快速判断一条动态的内容、状态以及发布时间信息。
2.3 内容展示
在列表中,动态内容区域通常会展示以下元素:
| 内容元素 | 说明 |
|---|---|
| 文本内容 | 动态的文字描述,最多显示前几行 |
| 图片 | 显示最多 3 张缩略图,超出显示「+N」数量 |
| 标签 | 显示分类标签(如:日常、学习、技术等) |
| 视频 | 显示视频平台标签(哔哩哔哩、YouTube、本地视频) |
| 音乐 | 显示音乐平台和类型标签 |
| 链接 | 显示链接标题或 URL |
| 位置 | 显示位置信息 |
这种展示方式可以在不进入详情的情况下,快速了解动态内容的构成与类型。
2.4 状态标识
动态状态通过标签进行区分,便于管理和筛选:
| 状态 | 标签样式 | 说明 |
|---|---|---|
| 已发布 | 绿色标签 | 动态已发布,前台可见 |
| 草稿 | 橙色标签 | 动态未发布,前台不可见 |
3. 新增动态
3.1 打开表单
点击动态列表页面中的 「新增动态」 按钮后,会弹出动态编辑对话框。
该对话框用于填写动态内容、添加多媒体信息以及设置发布时间和状态。
3.2 表单布局
动态编辑对话框采用 工具栏 + 内容区 + 底部设置 的整体布局,结构清晰,便于逐步完成内容配置:
- 顶部工具栏:包含链接、图片、音乐、视频四个功能按钮
- 中间内容区:上方为文本输入区域,下方为图片预览和链接 / 音乐 / 视频预览卡片
- 底部工具栏:包含发布位置、分类标签、发布时间和发布状态设置
这种布局能够兼顾内容编辑和多媒体配置,适合动态这种内容较为灵活的场景。
3.3 功能工具栏
顶部工具栏提供以下功能按钮:
| 按钮 | 功能 | 说明 |
|---|---|---|
| 链接 | 添加链接 | 分享外部网站链接 |
| 图片 | 添加图片 | 上传或输入图片 URL |
| 音乐 | 添加音乐 | 嵌入音乐播放器 |
| 视频 | 添加视频 | 嵌入视频内容 |
当某个按钮处于激活状态时,表示该类型的内容已经被添加到当前动态中。
3.4 文本内容
动态文本内容支持多行输入,并具备基础输入限制:
| 配置项 | 说明 |
|---|---|
| 输入框 | 多行文本输入,最多 1000 字符 |
| 字数统计 | 实时显示已输入字符数 |
适合发布短文本、心情记录、状态说明以及配合图片、链接等媒体内容进行表达。
3.5 添加图片
点击 图片 按钮后,会打开图片配置弹窗。
添加方式
| 方式 | 说明 |
|---|---|
| 输入 URL | 输入在线图片地址,点击添加 |
| 本地上传 | 点击上传按钮选择本地图片文件 |
图片支持 JPG、PNG、GIF、WebP 等常见格式,并支持批量添加多张图片。
预览与删除
- 添加后的图片会显示在主编辑区中进行预览
- 点击图片右上角的删除按钮,可以将该图片移除
这种方式便于用户在提交前检查图片是否正确添加。
3.6 添加链接
点击 链接 按钮后,会打开链接配置弹窗。
| 字段 | 类型 | 说明 |
|---|---|---|
| 网站地址 | 输入框 | 必填,合法 URL 格式 |
| 网站标题 | 输入框 | 选填,链接显示标题 |
| 网站图标 | 输入框 | 选填,URL 地址 |
点击 「解析」 按钮后,系统可自动获取链接标题和网站图标,减少手动填写成本。
3.7 添加音乐
点击 音乐 按钮后,会打开音乐配置弹窗。
| 配置项 | 类型 | 说明 |
|---|---|---|
| 音乐平台 | 下拉选择 | 2 个平台支持 |
| 音乐类型 | 下拉选择 | 4 种类型 |
| 音乐 ID | 输入框 | 对应平台的歌曲 / 歌单 / 专辑 ID |
| 解析按钮 | 按钮 | 点击解析获取音乐信息 |
| 搜索按钮 | 按钮 | 搜索网易云音乐 |
支持的音乐平台
| 平台 | 平台标识 |
|---|---|
| 网易云音乐 | netease |
| QQ音乐 | tencent |
支持的音乐类型
| 类型 | 类型标识 |
|---|---|
| 单曲 | song |
| 歌单 | playlist |
| 艺术家 | artist |
| 专辑 | album |
解析成功后,系统会显示音乐预览信息,包括封面、歌曲名和艺术家信息,便于确认配置是否正确。
3.8 添加视频
点击 视频 按钮后,会打开视频配置弹窗。
添加方式
| 方式 | 说明 |
|---|---|
| 输入 URL | 输入网络视频链接,自动识别平台 |
| 本地上传 | 上传本地视频文件 |
支持的视频平台
| 平台 | 平台标识 | URL 示例 |
|---|---|---|
| 哔哩哔哩 | bilibili | https://www.bilibili.com/video/BVxxxx |
| YouTube | youtube | https://www.youtube.com/watch?v=xxxx |
| 本地视频 | local | 上传的本地视频文件 |
对于网络视频,系统会自动识别平台和视频 ID,并生成可嵌入的播放器内容。
3.9 添加音频
点击 音频 按钮后,会打开音频配置弹窗。
添加方式
| 方式 | 说明 |
|---|---|
| 输入 URL | 输入网络音频链接 |
| 本地上传 | 上传本地视频文件 |
3.10 底部工具栏
动态编辑对话框底部提供以下设置项:
| 配置项 | 说明 |
|---|---|
| 发布位置 | 文字输入,如:上海、北京 |
| 分类标签 | 文字输入,如:日常、学习 |
| 发布时间 | 日期时间选择器,可设置定时发布 |
| 发布状态 | 草稿 / 发布 单选按钮 |
这些设置项用于补充动态的上下文信息,并控制动态的发布时间与可见状态。
3.11 表单验证
在提交表单前,系统会对部分字段进行基础校验:
| 字段 | 验证规则 |
|---|---|
| 文本内容 | 最多 1000 字符 |
| 发布位置 | 最多 100 字符 |
| 分类标签 | 最多 20 字符 |
| 网站地址 | 合法的 URL 格式(添加链接时) |
通过表单验证可以有效避免因格式错误导致的提交失败。
3.12 提交保存
点击 「确定」 按钮提交表单后,系统通常会按以下流程完成保存:
- 表单验证通过后
- 如果有本地图片,先上传图片到服务器
- 如果有本地视频,先上传视频到服务器
- 构建动态内容数据
- 调用创建接口
- 显示成功提示
- 关闭对话框并刷新列表
4. 编辑动态
4.1 打开表单
在动态列表中点击某条动态的 「编辑」 按钮,即可弹出编辑动态表单。
4.2 表单预填
编辑表单会自动填充当前动态已有的信息,通常包括:
- 文本内容
- 已添加的图片(显示缩略图)
- 已添加的视频(显示预览)
- 已添加的音乐(显示预览)
- 已添加的链接(显示标题和图标)
- 位置、标签、发布时间、发布状态
预填机制可以帮助管理员直接基于原有内容进行修改,而无需重新配置全部信息。
4.3 更新提交
点击 「确定」 按钮后,系统会执行动态更新流程:
- 表单验证通过后
- 如果有新添加的本地图片 / 视频,先上传
- 如果删除了原有的图片 / 视频,清理关联数据
- 构建更新数据
- 调用更新接口
- 显示成功提示
- 关闭对话框并刷新列表
5. 删除动态
5.1 删除操作
在动态列表中点击某条动态对应的 「删除」 按钮,即可发起删除操作。
5.2 确认提示
删除前系统会弹出确认框,提示内容:确定要删除这条动态吗?
5.3 删除说明
删除动态时需要注意以下几点:
- 动态删除为永久删除
- 删除后会清理关联的图片、视频等资源引用
- 已发布的动态删除后,前台将不再显示
因此,在执行删除前,建议确认该动态是否仍有保留价值。
6. 前台展示
6.1 动态页面
博客前台的动态页面主要用于展示已发布的动态内容,通常具备以下特性:
- 采用瀑布流布局(响应式:桌面端 3 列,平板端 2 列,移动端 1 列)
- 图片支持点击放大查看
- 仅显示最近 30 条已发布动态
这种展示形式更适合承载图片、短文本、多媒体等轻量内容。
6.2 动态卡片
每条动态通常以卡片形式进行展示,卡片结构如下:
| 区域 | 内容 |
|---|---|
| 头部 | 头像、作者、发布时间 |
| 内容区 | 文本、图片、视频、音乐、链接等 |
| 底部 | 位置、标签、评论按钮 |
6.3 图片布局
前台会根据图片数量自动调整展示布局:
| 图片数量 | 布局方式 |
|---|---|
| 1 张 | 100% 宽度,高度自动 |
| 2 张 | 2 列等分 |
| 3 张 | 3 列等分 |
| 4 张 | 2x2 结构 |
| 5 张 | 2+3 结构(2 张一行,3 张一行) |
| 6 张 | 3x2 结构 |
| 更多 | 显示前 6 张 + 数量遮罩 |
通过自动布局,页面可以在不同数量图片下保持较好的视觉秩序。
6.4 音乐播放器
前台动态中的音乐播放器通常具备以下能力:
- 显示歌曲封面、名称、艺术家
- 支持播放 / 暂停控制
- 显示播放进度条
- 支持歌词显示(逐行高亮)
- 支持播放列表(歌单、专辑类型时)
- 自动播放下一首
如果动态中包含音乐内容,用户可以直接在前台卡片内进行播放与查看。
6.5 动态小组件
博客首页还可以添加动态小组件,用于展示最新动态:
- 自动轮播显示最新动态
- 鼠标悬停时暂停轮播
- 显示动态文本和内容类型图标
- 点击后跳转到动态页面
该组件适合作为首页内容补充,用于提升动态内容的曝光度和互动感。