Directus中使用Flow和脚本自动生成Slug的方法

在Directus 10.8.2版本中，我们可以利用Flow功能和自定义脚本实现自动生成Slug的功能。Slug是URL友好的字符串，通常用于创建简洁、可读的网页地址。

实现原理

Directus的Flow功能允许我们在数据操作前后插入自定义逻辑。通过结合"Filter (blocking)"类型的Flow和"run script"操作，我们可以在数据创建时自动生成Slug值。

具体实现步骤

1. 创建新Flow：在Directus后台中创建一个新的Flow，选择适当的事件触发器（如items.create）。

2. 设置Filter类型：选择"Filter (blocking)"类型，这样可以拦截数据操作并在处理完成后继续。

3. 配置响应体：选择"Data of last operation"作为响应体，确保我们能获取到完整的数据。

4. 添加脚本操作：在Flow中添加"run script"操作，并插入以下JavaScript代码：

module.exports = async function (data) {
    // 从触发数据中获取需要转换为Slug的文本
    const text = data.$trigger.payload.name;
    
    // Slug转换逻辑
    const slug = text
        .toLowerCase()  // 转换为小写
        .trim()         // 去除首尾空格
        .replace(/[^\w\s-]/g, '')  // 移除非单词字符
        .replace(/[\s_-]+/g, '-')  // 将空格和下划线替换为连字符
        .replace(/^-+|-+$/g, '');  // 去除首尾的连字符
    
    // 返回修改后的数据
    return { 
        ...data.$trigger.payload, 
        slug  // 添加生成的Slug字段
    }
};

代码解析

这段脚本实现了以下功能：

1. 从触发事件的数据中提取需要转换的文本（通常是标题或名称字段）
2. 执行多步转换：
   • 统一为小写字母
   • 去除首尾空白字符
   • 移除非字母数字字符
   • 将连续的空格或下划线转换为单个连字符
   • 确保Slug不以连字符开头或结尾
3. 将生成的Slug合并回原始数据中

应用场景

这种方法特别适用于：

• 博客文章系统，自动为文章标题生成URL友好的Slug
• 产品目录，为产品名称创建简洁的URL标识符
• 任何需要将用户输入的文本转换为规范化格式的场景

注意事项

1. 确保目标集合中存在Slug字段，且字段类型为字符串
2. 根据实际需求调整脚本中的字段名称（将name改为实际使用的字段）
3. 对于多语言项目，可能需要额外的处理逻辑
4. 考虑Slug唯一性要求，可能需要添加唯一性检查逻辑

通过这种方法，我们可以实现完全自动化的Slug生成，提高数据一致性和用户体验。