profound-logoProfound CMS
⌘K
Admin
Theme
Docsبرنامج تعليميBlogPhilosophy
Docsبرنامج تعليميBlogPhilosophy

Hybrid

التوجيه البارامتريTypes of Componentsإس إس إيInstall Profound CMS as a proxyالبرمجة النصية في منشئ القوالبProject Scaffoldingمكتبة الوسائط

بلا رأس

البدء السريعJSON و Claude CodeComponent Zod Pull

واجهة برمجة تطبيقات REST

نظرة عامة على واجهة RESTgetربط موقع الويب بواجهة برمجة التطبيقاتgetالحصول على المساراتgetالحصول على مسارgetالحصول على الكتلgetجلب الكتل مع ذاكرة CEL المؤقتةgetGET /blocks/generatedgetالحصول على المكوناتgetGET /components/{name}getالحصول على اسم مخطط مجموعة البياناتgetالحصول على تغييرات المحتوى (SSE)patchPATCH /dataset/{schema_name}postترجمة المنشورpatchPATCH /translationsgetالحصول على الاستخدامpostPOST /csvpatchPATCH /csv
All Systems Operational
Powered Byprofound-logo
Theme

Component Zod Pull

اسحب وصف zod لمكوّناتك في وقت الترجمة باستخدام برنامج نصي

تتيح لك هذه الميزة الحصول على وصف المكوّن الخاص بك في صورة وصف «Zod» آمن من ناحية الأنواع، والذي يوفّر تحققًا من المخططات يعتمد TypeScript أولًا واستدلالًا ساكنًا للأنواع لمحتواك.

https://zod.dev

لسحب مخطط Zod الخاص بنا، سنحمّل بعض الاعتمادات وننشئ برنامجًا نصيًا يستخدم بعض الأدوات من cms-renderer

لنبدأ ببنية مشروعنا

apps/
 web/
 app/
   page.tsx
 scripts/
   generate-schemas.ts // هنا يعيش البرنامج النصي الخاص بنا

سنقوم الآن بتعديل ملف generated-schema.ts

import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // استيراد الإعدادات الخاصة بي

async function main() {
  const { cmsUrl, websiteId, apiKey } = cmsConfig;

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] لم يتم تعيين NEXT_PUBLIC_CMS_API_URL. عيّنه في بيئتك أو في ملف .env.'
    );
  }
  if (!websiteId) {
    throw new Error(
      '[generate-schemas] لم يتم تعيين NEXT_PUBLIC_PROFOUND_WEBSITE_ID. عيّنه في بيئتك أو في ملف .env.'
    );
  }
  if (!apiKey) {
    throw new Error(
      '[generate-schemas] لم يتم تعيين PROFOUND_API_KEY. عيّنه في بيئتك أو في ملف .env.'
    );
  }

  const schemas = await fetchAllCustomSchemaFields({ cmsUrl, websiteId, apiKey });

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] لم تُرجع الواجهة البرمجية أي مكوّنات. تحقّق من أنّ PROFOUND_API_KEY صالح ويشير إلى الموقع الصحيح.'
    );
  }

  await saveZodSchemaCode(schemas, './generated/cms-schemas.ts');

  console.log('[generate-schemas] تم.');
}

main().catch((err) => {
 console.error('[generate-schemas] فشل:', err);
  process.exit(1);
});

يجب أن يبدو ملف CmsConfig الخاص بك هكذا

export const cmsConfig = {
  cmsUrl: process.env.NEXT_PUBLIC_CMS_API_URL,
  apiKey: process.env.CMS_API_KEY,
  websiteId: '...',
};

داخل ملف package.json لدينا، نحدد كيفية تشغيل البرنامج النصي وبعض الاعتمادات.

ملاحظة: إذا لم يكن لديك ملف tsconfig، فيمكنك إزالة العلم --tsconfig وقيمته

{
  "name": "web",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "scripts": {
    "generate-schemas": "tsx --tsconfig tsconfig.json scripts/generate-schemas.ts",
    "...": "..."
  },
  "dependencies": {
    "cms-renderer": "0.3.1",
    "zod": "^4.3.6",
    "...": "..."
  },
  "devDependencies": {
    "tsx": "^4.21.0",
 "object-hash": "^3.0.0",
    "...": "..."
  }
}

الآن، بعد أن نُشغّل

$ bun run generate-schemas
tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] تم.

يجب أن نحصل على مخرجات مشابهة، ويمكننا رؤية ملف جديد في بنية مشروعنا

apps/
 web/
 app/
   page.tsx
 scripts/
   generated-schema.ts // هنا يوجد برنامجنا النصي
 generated/
   cms-schema.ts // مخطط zod مُولَّد

يمكنك تفحّص ما بداخل الملف لترى كيف يبدو المخطط الخاص بك. لتحديث هذا الملف، عليك تشغيل أمر bun run generate-schemas مرة أخرى، ويمكنك ربطه بتدفق عمل dev أو build لديك.

يمكننا بعد ذلك سحب كائنات zod هذه إلى ملف page.tsx كما يلي

import type { PetFoodPost, SiteConfig } from '@/generated/cms-schemas';
import { petFoodPostSchema } from '@/generated/cms-schemas';

// استدعِ petFoodPostSchema.parse(obj) لتحليل الكائنات بطريقة آمنة من ناحية الأنواع

يمكنك تحديث المكوّن الخاص بك من لوحة التحكم الإدارية وسحب المخطط المحدّث مرة أخرى لتسهيل التطوير

Continue Reading
Previous‹JSON و Claude Code