文章编辑和媒体管理

一、文章分类

在撰写文章前，需要先预定义好自己文章分类，撰写文章保存的基础，分类是必选项。

二、文章标签

博客的设计，分类就是需要提前规划好的，所以需要在文章撰写前就设置好。

文章标签会比分类多很多，所以可以在文章撰写的时候再添加也可以。当然也可以在标签管理中添加，类似上述文章分类的效果。这里就不单独演示了。将在文章撰写的时候去写实时的追加文章标签。

文章标签不是必选项。

三、编辑器全貌

打开后台 → 文章 → 写文章，看到的是一个双栏 Markdown 编辑器：

• 左：编辑区（支持完整 GFM 语法 + 项目自定义标签）
• 右：实时预览（与前台样式 1:1 一致）
• 顶栏：工具按钮（标题 / 粗体 / 引用 / 代码 / 表格 / 插入媒体 / 复制为微信公众号格式 …）

完整在线文档：https://jiaopengzi.com/page/editor-docs

🚀点击我！体验在线编辑器

四、写一篇文章必填的字段

1、编辑器

在编辑器图片中，从上到下依次是编辑页功能按键，文章标题、编辑器主体，编辑器主体中，上半部分是编辑器的功能按钮，下半部分的左侧为编辑栏右侧为实时预览栏，都可以通过按钮来实现开启和关闭。

2、基本信息

基本信息中，文章分类是必选项，也在前序描述中提过到，需要事先预设。

标签管理，可以点击新标签写入新的标签，同时点击选择标签按钮，可以看到 TOPN 的热门标签供选择。

文章缩略图，非必选项，如果没有则会使用文章标题的首字来代替，但是强烈建议添加，对于前端的视图展示要友好很多。提供通过媒体库去选择图片，如果当前文章里面有图片，还提供在从文章中选择的选项。

如果文章中没有图片，从文章中选择 按钮是不会显示的。

3、更多设置

更多设置，开关可以展开和折叠。针对普通的非知识付费用户，建议折叠。

评论管理、和 SEO 相关的主要正对对外发布站点，根据自身需求开启。

视频合集也是本项目的核心点，将在媒体库后重点描述

4、付费与定价

可以看到当前付费管理里面，列出了所有的默认角色和商城中的 VIP 角色。

只有设定了有效的价格才会显示对应的付费模块。

支付策略如字面意思，目的是为了区分哪些是单独可以购买，哪些是和会员角色共享，哪些是只能通过会员才能使用的。

5、发布设置

发布设置中没有特别的要说明的，根据字面意思都可以理解。文章置顶 和 推荐阅读 需要在发布状态才会显示。

五、媒体库

1、媒体上传

媒体库 = 你博客的"图床 + 文件库"。功能：

• 上传图片 / 视频 / zip压缩文件
• 视频可勾选是否收费；加密上传 (HLS)

• 视频收费： 可以通过媒体文件编辑后期调整
• 视频加密： 由于文件加密需要单独处理文件，所以只能通过文件上传时修改，不支持后期修改。

2、视频：加密上传与播放原理

1. 媒体库->上传视频->选择加密
2. 系统将原视频转为 HLS（m3u8 + ts 切片），并对切片做加密
3. 前台播放时，播放器需要先向后端请求 token，token 校验通过才能拿到解密 key
4. 即使有人拷走 m3u8 地址，没有有效 token 也播不出
5. 配合 <pay-video> 标签即可形成完整付费视频闭环

在媒体列表中，可以对媒体文件进行增删改查等操作，可以分类和关键字进行搜索查找。

3、媒体编辑

在上述视频编辑图片中，注意我们将视频已经修改为免费状态，同时增加了简体中文的字幕示例。

六、写作神器：复制为微信公众号格式

现在也有很多优秀的 markdown 转微信公众号的格式的编辑器。但是有些细节还是不能满足，这也是我开发这个项目的初衷之一。

1. 顶栏->微信公众号->复制
2. 打开公众号编辑器，粘贴
3. 样式（标题颜色、引用块、代码块、行距）全部带过去

七、自定义标签（项目独家）

下面这些仅在本系统的编辑器里有效，纯写笔记可以完全不用。但如果你以后要做付费 / 视频 / 数据嵌入，需要知道使用。

7.1 付费阅读 <pay-read>

<pay-read>
 
这段文字只有付费用户能看到。
支持完整 Markdown。
 
</pay-read>

把它放在文章中, 会自动渲染成"立即解锁"按钮。如果没有渲染出来的话，需要设置对应的价格。

7.2 付费下载 <pay-download>

<pay-download>
 
## 下载内容
 
下载链接：[点击下载](替换为您的链接)
 
提取码：您的提取码
 
</pay-download>

将下来链接放到标签中, 会自动渲染成"立即解锁"按钮。如果没有渲染出来的话，需要设置对应的价格。

7.3 付费视频 <pay-video>

<pay-video>
 
除视频外的其他隐藏内容，如附件下载等；若没有则将标签设置为一行
 
</pay-video>

配合媒体库的"HLS 加密上传"，视频流被加密，普通用户拿到地址也播不了，只有正确购买并获取 token 的客户端能解密。

在编辑器中设置了标签后，还需要在更多设置里面添加视频才能生效。

根据需要，可以自行设置章节和视频，视频可以拖拽顺序，双击可以修改标题。

此时再看渲染出来的效果。

这里需要注意观察，如果是付费的视频则会显示小锁的标识。

7.4 付费会员 <pay-membership>

<pay-membership></pay-membership>

在前序示例文章《网站初始设置》中添加的会员角色就渲染出来了。

7.5 卡密分发 <pay-key>

<pay-key id="2" title="您的标题" description="您的说明"></pay-key>

在前序示例文章《网站初始设置》中我们设置了6个测试的账号，在这里看到库存是6个。

需要关注：id、title、description 几个属性对应在右侧渲染的内容。

7.6 视频播放器 <video-player>

<video-player video-type="hls" id="m-5-8e72860c"></video-player>

单独的视频播放，可以使用视频播放器。可以将视频上传到媒体库后，通过编辑器中的添加媒体按钮来添加单个视频。和pay-video的区别是，单独的播放器不收费，同时也支持 MP4 格式。

7.7 Power BI 嵌入 <power-bi>

<power-bi src="Power BI 嵌入地址" maskcolor="#ffffff"></power-bi>

Power BI 嵌入到 markdown 中，其中 maskcolor 遮罩的颜色，可以根据 Power BI 报告的主题自行调整。

7.8 微信公众号验证 <wechat-captcha>

一些不需要付费，又想增加一些微信公众号互动，可以使用。

可以通过设置，提前设置微信公众号的预设信息，减少重复输入。

7.9 登录查看 <login-view>

文章编辑是需要登录后台的，所以查看的效果是已登录的状态。

回到前台，退出登录再次查看。

完整文档：https://jiaopengzi.com/page/editor-docs

八、文章管理

前面介绍的都是编辑器功能，文章编写好了，记得保存。

文章管理提供了丰富的文章筛选功能。

• 点击统计分类
• 点击分类标签
• 点击标签
• 点击作者头像
• 按照日期
• 自定义筛选

同时也提供了批量修改文章状态的功能，便于文章的批量状态管理。

配套教程导航

本文是『自建博客系统教程』系列第 7 篇，配套教程共 13 篇。