Flutter内容提供插件vyuh_plugin_content_provider_sanity的使用

Vyuh框架

构建模块化、可扩展的CMS驱动Flutter应用

文档 | 网站

Vyuh内容提供插件for Sanity 🔌 #

一个强大的内容提供插件，无缝集成Sanity.io到Vyuh框架。此插件使您的Vyuh应用程序能够以最小的配置从Sanity.io获取、缓存和管理内容。

特性 ✨ #

• 内容管理 📝

  • 获取单个或多个文档
  • 支持所有Sanity内容类型
  • 自动内容类型映射
  • 内置缓存，可配置持续时间

• 资产支持 🖼️

  • 带变换的图像资产
  • 带元数据的文件资产
  • 引用处理
  • 资产缓存

• 路由集成 🛣️

  • 从内容自动生成路由
  • 支持Vyuh框架模式
  • 动态路由参数
  • 嵌套路由处理

• 性能 ⚡

  • 高效的缓存内容
  • CDN支持
  • 优化的网络请求
  • 并行内容获取

安装 📦 #

在您的包的pubspec.yaml文件中添加以下内容：

dependencies:
  vyuh_plugin_content_provider_sanity: ^1.0.0

使用 💡 #

基本设置 #

创建并配置Sanity内容提供插件：

import 'package:vyuh_core/vyuh_core.dart' as vc;
import 'package:sanity_client/sanity_client.dart';
import 'package:vyuh_plugin_content_provider_sanity/vyuh_plugin_content_provider_sanity.dart';

final contentProvider = SanityContentProvider.withConfig(
  config: SanityConfig(
    projectId: '<project-id>',
    dataset: 'production',
    perspective: Perspective.published,  // 或者previewDrafts用于草稿内容
    useCdn: true,                       // 启用CDN以提高性能
  ),
  cacheDuration: const Duration(minutes: 5),
);

void main() async {
  vc.runApp(
    features: () => [
      // 您的功能在此
    ],
    plugins: [
      contentProvider,
      // 其他插件
    ],
  );
}

获取内容 #

// 获取单个文档
final post = await contentProvider.fetchSingle<Post>(
  '*[_type == "post" && _id == $id][0]',
  fromJson: Post.fromJson,
  queryParams: {'id': 'post-123'},
);

// 获取多个文档
final posts = await contentProvider.fetchMultiple<Post>(
  '*[_type == "post" && category == $category]',
  fromJson: Post.fromJson,
  queryParams: {'category': 'tech'},
);

// 通过ID获取
final author = await contentProvider.fetchById<Author>(
  'author-123',
  fromJson: Author.fromJson,
);

处理资产 #

// 获取用于Image小部件的ImageProvider
final imageProvider = contentProvider.image(
  ImageReference(
    asset: Asset(ref: 'image-Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000-jpg'),
  ),
  width: 800,
  height: 600,
  devicePixelRatio: 2,
  quality: 80,
  format: 'webp',
);

// 在Image小部件中使用
if (imageProvider != null) {
  Image(image: imageProvider);
}

// 获取文件URL
final fileUrl = contentProvider.fileUrl(fileRef);

路由处理 #

// 通过路径获取路由
final route = await contentProvider.fetchRoute(
  path: '/blog/my-post',
);

// 通过ID获取路由
final route = await contentProvider.fetchRoute(
  routeId: 'route-123',
);

if (route != null) {
  // 处理路由内容
}

配置 🔧 #

内容提供器可以配置多种选项：

final provider = SanityContentProvider.withConfig(
  config: SanityConfig(
    projectId: '<project-id>',
    dataset: 'production',

    // 内容交付选项
    useCdn: true,                    // 使用CDN以提高性能
    perspective: Perspective.published, // 内容视角

    // 缓存配置
    cacheDuration: Duration(minutes: 5),

    // 可选认证
    token: '<your-token>',           // 用于访问私有数据集
  ),

  // 额外选项
  debug: true,                       // 启用调试日志
  retryOptions: RetryOptions(        // 配置重试行为
    maxAttempts: 3,
    delayFactor: Duration(seconds: 1),
  ),
);

错误处理 🚨 #

提供器包括各种场景下的适当错误处理：

try {
  final post = await contentProvider.fetchSingle<Post>(
    '*[_type == "post" && _id == $id][0]',
    fromJson: Post.fromJson,
    queryParams: {'id': 'post-123'},
  );
  // 处理文章
} on InvalidResultTypeException catch (e) {
  print('类型不匹配: 预期 ${e.expectedType}, 实际为 ${e.actualType}');
} on SanityError catch (e) {
  print('Sanity API 错误: ${e.message}');
} on Exception catch (e) {
  print('意外错误: $e');
}

// 当获取路由时
try {
  final route = await contentProvider.fetchRoute(path: '/blog/my-post');
  if (route == null) {
    print('未找到路由');
    return;
  }
  // 处理路由
} on SanityError catch (e) {
  print('获取路由时发生错误: ${e.message}');
}