آموزش وب سایت Astro & Strapi: قسمت 2 – Intro to Strapi

مقدمه

در قسمت قبلی این مجموعه آموزشی، با Astro آشنا شدیم، یک فریمورک frontend محبوب که برای وب سایت های مبتنی بر سرعت و محتوا طراحی شده است.

ما همچنین به بررسی ایجاد سایت ایستا، پیش رندر، طرح‌بندی و اجزای سازنده و پیوند بین صفحات پرداختیم. با توانایی تغییر رفتار Astro، ما از تولید سایت استاتیک به تولید سمت سرور منتقل شدیم.

در نهایت، ما همچنین به طور مختصر سایر ویژگی‌های جالب Astro را مورد بحث قرار دادیم، مانند مجموعه‌های محتوا، مشاهده انتقال، پیش‌فرض‌ها، ادغام‌های چارچوب CSS، Astro DB، Astro Islands و دستورالعمل‌های مشتری.

در قسمت 2، Strapi، یک CMS قوی را بررسی خواهیم کرد. همچنین نصب Strapi، سازنده نوع محتوای Strapi، نوع مجموعه، فعال کردن دسترسی API، بین‌المللی‌سازی، مناطق پویا و موارد دیگر را بررسی خواهیم کرد.

بیایید شروع کنیم!

طرح کلی آموزش

این پست قسمت 2 از مجموعه سه قسمتی آموزش Astro و Strapi ما است. طرح کلی پست بعدی را می توانید در اینجا پیدا کنید.

استراپی چیست؟

Strapi یک سیستم مدیریت محتوای بدون هد (CMS) منبع باز Node.js است که به توسعه دهندگان کمک می کند تا تجربیات غنی از محتوا را برای هر دستگاه دیجیتالی ایجاد و مدیریت کنند. Strapi را می توان برای توسعه وب سایت ها، برنامه های تلفن همراه، سایت های تجارت الکترونیک و API ها استفاده کرد.

این پیشرو CMS منبع باز بدون هد، کاملا قابل تنظیم، 100% جاوا اسکریپت/تایپ اسکریپت است.

برای کسب اطلاعات بیشتر در مورد Strapi، لطفاً به اسناد Strapi مراجعه کنید.

نصب استرپی

برای ایجاد یک برنامه Strapi CMS، دستور زیر را اجرا کنید و نام وبلاگ را به آن بدهید:

ضربه شدید
npx create-strapi-app@latest blog

مانند آنچه برای Astro در قسمت 1 انجام دادیم، از تنظیمات توصیه شده اما سفارشی پیروی نمی کنیم. بنابراین، ما حتما موارد زیر را انجام می دهیم:

• انتخاب کنید جاوا اسکریپت به عنوان زبان ترجیحی
• انتخاب خواهیم کرد Postgres به عنوان پایگاه داده برای برنامه ما. ما قبلاً یک نمونه Postgres داریم که توسط Docker راه اندازی شده است. با این حال، می توانید هر پایگاه داده دیگری را انتخاب کنید
• نام پایگاه داده را به عنوان وبلاگ ایجاد کنید.
• Host و PORT پیش فرض را انتخاب کنید.
• نام کاربری را به عنوان “postgres” تنظیم کنید.
• ترجیح ما را تنظیم کنید رمز عبور.
• و ما هیچ اتصال SSL را فعال نخواهیم کرد.

مهم: لزوماً نیازی به استفاده ندارید Postgres برای این آموزش شما می توانید استفاده کنید SQLite، که پایگاه داده پیش فرض Strapi است.

شروع برنامه

پس از نصب موفقیت آمیز، می خواهیم داشبورد Strapi Admin را راه اندازی کنیم. دستور زیر را اجرا کنید:

ضربه شدید
وبلاگ سی دی
توسعه npm اجرا شود

به یاد داشته باشید که ما نام پایگاه داده خود را به عنوان وبلاگ قرار دادیم. متاسفانه Strapi نمی تواند این پایگاه داده را برای ما ایجاد کند. به همین دلیل با خطای زیر مواجه خواهیم شد:

برای حل این مشکل، باید به PostgreSQL خود برویم و وبلاگ پایگاه داده را ایجاد کنیم.

از آنجایی که ما یک نمونه Postgres را از طریق Docker اجرا می کنیم و به نمونه وارد شده ایم، دستور زیر را اجرا می کنیم:

ضربه شدید
psql -U postgres -c “ایجاد وبلاگ پایگاه داده؛”

در دستور بالا، ما از psql استفاده کردیم، یک front-end مبتنی بر ترمینال که برای ارسال کوئری ها به PostgreSQL استفاده می شود.

در صورت موفقیت آمیز بودن، باید دستور و نتیجه زیر را مشاهده کنید:

ضربه شدید
docker exec -it f3e15d8dc7885bd7c55673aff91b4e02487f5ba000549311fbeee953c3c4a04b /bin/sh
/ # psql -U postgres -c “CREATE DATABASE Blog;”
ایجاد پایگاه داده
/ #

اکنون که پایگاه داده را ایجاد کرده‌ایم، بیایید با اجرای مجدد دستور، رابط کاربری Strapi Admin را بسازیم:

ضربه شدید
توسعه npm اجرا شود

پس از اجرای دستور بالا، باید موارد زیر را در ترمینال خود مشاهده کنیم:

علاوه بر این، پس از ساخت موفقیت آمیز داشبورد مدیریت Strapi، مرورگر ما URL http://localhost:1337/admin را به طور خودکار باز می کند. اگر باز نشد، مطمئن می شویم که به صورت دستی از آن بازدید می کنیم.

در نهایت، برای ورود به سیستم، اعتبارنامه مدیریت Strapi خود را وارد کنید.

ایجاد نوع مجموعه وبلاگ

نوع مجموعه Strapi چیست؟

در Strapi، یک نوع مجموعه، یک نوع محتوا است که می تواند چندین ورودی از یک نوع محتوا، مانند پست های وبلاگ، محصولات یا کاربران را مدیریت کند.

یک نوع و فیلدهای مجموعه Strapi ایجاد کنید

برای این آموزش، ما یک نوع محتوا ایجاد می کنیم تا نشان دهنده مقالات یا پست های وبلاگی باشد که در CMS خود ذخیره می کنیم. ما به این وبلاگ می گوییم.

مهمتر از همه، کلیک کنید “تنظیمات پیشرفته” را بزنید و فعال کنید بین المللی شدن. ما مدخل های مجموعه خود را به زبان های مختلف ترجمه خواهیم کرد.

روی دکمه “ادامه” کلیک کنید تا نوع Strapi Collection را تنظیم کنید. انواع مختلفی وجود دارد، مانند متن، JSON، تصویر، شماره و غیره. همیشه می توانید اسناد Strapi را بررسی کنید.

ایجاد فیلدهای نوع محتوا

برای اولین فیلد خود، نوع Text را انتخاب می کنیم و نام آن را tile می گذاریم. این عنوان پست های وبلاگ خواهد بود.

حال باید فیلدهای زیر را داشته باشیم:

دکمه های “پایان” و “ذخیره” را لیس می زنیم و منتظر می مانیم تا Strapi دوباره راه اندازی شود.

افزودن داده به مجموعه

ما نوع مجموعه را ایجاد کرده ایم. اجازه دهید چند ورودی ایجاد کنیم.

توجه داشته باشید که ما می توانیم آن را با هر داده ای که انتخاب می کنیم پر کنیم. همچنین توجه داشته باشید که محتوا از نوع نشانه گذاری است.

برای وارد کردن metaTitle و metaDescription ادامه دهید. همچنین توجه داشته باشید که یک دکمه کوچک برای تولید محتوای وبلاگ ما وجود دارد. تصویر زیر را ببینید:

برای اطلاعات تصویر، حتما روی نماد تصویر کلیک کنید. توجه داشته باشید که ما هیچ تصویری در کتابخانه رسانه خود نداریم.

بنابراین، روی دکمه “افزودن دارایی های جدید” کلیک کنید. این به ما امکان می دهد چندین فایل را انتخاب کرده و فقط آنها را به Strapi اضافه کنیم.

همانطور که در GIF بالا نشان داده شده است، 12 دارایی تصویر اضافه می کنیم. ما فقط یک تصویر را انتخاب می کنیم و روی دکمه های “پایان” و “ذخیره” کلیک می کنیم.

توجه: مطمئن شوید که روی آن کلیک کنید “انتشار” دکمه برای ذخیره ورودی؛ در غیر این صورت، هنوز یک پیش نویس است.

بین المللی شدن

در مرحله بعد، ما باید مطمئن شویم که بین المللی سازی را در Strapi فعال کرده ایم.

درونی سازی در استراپی چیست؟

بین‌المللی‌سازی (i18n) به شما امکان می‌دهد تا نسخه‌های زیادی از محتوا، که به آنها محلی‌ها نیز گفته می‌شود، به زبان‌های مختلف و برای کشورهای دیگر ایجاد کنید.

برای فعال کردن Internationalization، بر روی آن کلیک کنید تنظیمات > داخلی سازی > افزودن محلی جدید.

ساده “اسپانیایی (es)” را به عنوان محلی انتخاب کنید و نام نمایشی را همانطور که هست بگذارید.

اکنون که Internationalization را فعال کرده‌ایم، می‌توانیم یک منوی کشویی را در تصویر زیر ببینیم که می‌توانیم بین دو زبان یکی را انتخاب کنیم.

با فعال کردن بین المللی سازی، اکنون می توانیم یک مقاله جدید به زبان اسپانیایی یا انگلیسی ایجاد کنیم.

با این حال، ما می خواهیم مقاله اخیرا ایجاد شده (به تصویر بالا مراجعه کنید) را به اسپانیایی ترجمه کنیم. پس روی مقاله کلیک کنید.

هنگامی که همانطور که در بالا نشان داده شده است از انگلیسی به اسپانیایی تغییر می کنیم، توجه کنید که چگونه به طور خودکار اطلاعات را پر می کند. اگر روی «پر کردن از یک منطقه دیگر» درست در زیر منوی بازشو کلیک کنیم، می‌توانیم مستقیماً این پست وبلاگ خاص را ترجمه کنیم.

هنگامی که از انگلیسی به اسپانیایی تغییر می کنیم، همانطور که در بالا نشان داده شده است، توجه کنید که چگونه اطلاعات به طور خودکار پر می شوند. اگر روی “پر کردن از یک منطقه دیگر” درست در زیر منوی بازشو کلیک کنیم، می توانیم مستقیماً این پست وبلاگ خاص را ترجمه کنیم.

در نهایت روی دکمه های «ذخیره» و «انتشار» کلیک می کنیم. و با آن، ما دو مقاله منتشر شده داریم، یکی به زبان انگلیسی و دیگری به زبان اسپانیایی.

دسترسی عمومی API را فعال کنید

پست وبلاگی که ایجاد کرده ایم هنوز برای عموم قابل دسترسی نیست. به عنوان مثال، یک رابط کاربری Astro هنوز نمی تواند این اطلاعات را دریافت کند. به همین دلیل، باید اجازه دسترسی عمومی به وبلاگ خود را بدهیم.

حرکت به *تنظیمات > نقش > عمومی و روی * کلیک کنیدوبلاگ نوع مجموعه همانطور که در تصویر زیر نشان داده شده است، گزینه find و findOne را علامت بزنید تا دسترسی عمومی به واکشی یک پست و همه پست های وبلاگ را فعال کنید.

این یافته به ما اجازه می دهد تا درخواست های HTTP GET را به /api/blogs ارسال کنیم تا همه پست های وبلاگ را دریافت کنیم. و /api/blogs/id به ما اجازه می دهد تا درخواست های HTTP GET برای گرفتن پست وبلاگ واقعی از طریق تماس REST API از Strapi CMS داشته باشیم. پس از آن، دکمه “ذخیره” را می زنیم.

اکنون وقتی به http://localhost:1337/api/blogs?populate=* می رویم اطلاعات زیر را دریافت می کنیم:

توجه: ما ?populate=* را اضافه کردیم تا پاسخ را با هر چیزی که به پست وبلاگ تعلق دارد پر کنیم. درباره رمزگشایی جمعیت و فیلتر کردن استراپی بیاموزید

از پاسخ، ما تمام اطلاعات از جمله محلی، تصویر، و محلی سازی را دریافت می کنیم.

حالا بیایید به مرحله بعدی برویم. پر کردن مجموعه وبلاگ با پست های وبلاگ یک فرآیند ساده است که می توانید به راحتی آن را مدیریت کنید و به شما کنترل کامل بر محتوای خود می دهد.

ایجاد منطقه پویا در Strapi

با Content Builder در Strapi headless CMS، می توانیم یک نوع مجموعه جدید ایجاد کنیم. این مجموعه جدید یک منطقه پویا خواهد بود.

Strapi Dynamic Zones چیست؟

مناطق دینامیک Strapi به ما امکان می‌دهند مدل‌ها یا اجزای محتوای انعطاف‌پذیر، قابل تنظیم و قابل استفاده مجدد را در برنامه‌های Strapi خود بسازیم. به عنوان مثال، ما می توانیم به راحتی صفحات فرود را با استفاده از Strapi Dynamic Zones ایجاد کنیم.

ایجاد منطقه پویا صفحه فرود

در اینجا نحوه ایجاد یک صفحه فرود Dynamic Zone است.

• روی دکمه “ایجاد نوع مجموعه جدید” کلیک کنید.
• نام نمایشی را به عنوان Page وارد کنید.
• “ادامه” را بزنید و به پایین بروید و روی “منطقه پویا” کلیک کنید.

• با گذاشتن نام LandingPage، یک Zone Dynamic جدید اضافه کنید. و سپس بر روی دکمه “Add components to the zone” کلیک کنید تا یک جزء به Dynamic Zone اضافه شود.

• اولین کامپوننتی که به LandingPage Dynamic Zone اضافه می کنیم کامپوننت hero است. بنابراین، نام نمایشی را به عنوان قهرمان و دسته را نیز به عنوان قهرمان تنظیم کنید. و سپس روی دکمه “افزودن فیلد اول به جزء” کلیک کنید.

• برای اولین فیلد مولفه hero، یک فیلد Text به نام heroText ایجاد می کنیم. از نوع Short text خواهد بود.
• فیلد دوم heroDescription نامیده می شود و Short text را نیز تایپ کنید.
• سپس در نهایت روی دکمه “پایان” کلیک می کنیم.

پس از ایجاد موفقیت آمیز منطقه پویا برای صفحه فرود خود، باید چیزی شبیه به زیر را مشاهده کنیم:

درباره مؤلفه ایجاد کنید

در تصویر بالا فقط مولفه hero را داریم. ما همچنین می خواهیم یک کامپوننت about داشته باشیم که مشابه مولفه hero ایجاد می کنیم.

• یک جزء جدید به نام about ایجاد کنید
• فیلدهای زیر را به آن بدهید:
  1. aboutText: این باید متن کوتاه باشد.
  2. aboutPhoto: این باید یک رسانه واحد باشد زیرا ما از آن به عنوان آواتار استفاده خواهیم کرد.

پس از ایجاد کامپوننت about، اکنون باید موارد زیر را مشاهده کنیم.

یک ورودی ایجاد کنید

پس از ایجاد موفقیت آمیز صفحه فرود Dynamic Zone، توجه کنید که در سمت چپ ادمین Strapi، اکنون ما صفحه نوع مجموعه بنابراین، بیایید یک ورودی ایجاد کنیم!

را کلیک کنید صفحه > ایجاد ورودی جدید > افزودن یک جزء به LandingPage برای افزودن یک ورودی

تصویر بالا که قهرمان و اجزای آن را نشان می دهد به ما ارائه خواهد شد. برای افزودن متن و توضیحات آن، مؤلفه hero را کلیک کنید.

همین کار را برای مولفه about با اضافه کردن یک متن و یک تصویر انجام دهید.

صرف نظر از رابط کاربری که استفاده می کنیم، وقتی شروع به درخواست API می کنیم، می توانیم اطلاعات بالا را دریافت کنیم.

دسترسی عمومی به نوع مجموعه صفحه را فعال کنید

در نهایت، مطمئن شوید که دسترسی عمومی را برای نوع مجموعه Page با تیک زدن find فعال کنید.

هدف ما از فعال کردن دسترسی عمومی این است که بتوانیم با استفاده از نقطه پایانی /api/pages به صفحاتی که داریم دسترسی داشته باشیم. فراموش نکنید که برای اعمال این تغییرات دکمه “ذخیره” را بزنید.

حالا وقتی به localhost:1337/api/pages?populate می رویم[LandingPage][populate]=* در مرورگر ما، اطلاعات مربوط به مولفه hero، در مورد کامپوننت و سایر اطلاعات را دریافت می کنیم:

در پست وبلاگ Populate & Filtering's Demystifying Strapi درباره جمعیت بیشتر بیاموزید.

خوبی در مورد Dynamic Zone این است که ما می‌توانیم موارد استفاده زیادی به جز صفحه فرود داشته باشیم. آنها می توانند بخش بررسی، بخش فراخوان برای اقدام، اشتراک نامه خبری و غیره باشند.

همه این بخش ها را می توان به عنوان مناطق پویا در داخل Strapi مدیریت کرد. سپس، با استفاده از هر فریم ورک فرانت‌اند محبوبی که انتخاب می‌کنیم، مانند Astro، می‌توانیم محتوا را از Strapi بگیریم و آن را به رابط کاربری خود اضافه کنیم.

نتیجه گیری

در قسمت 2 از مجموعه آموزش، ما به معرفی Strapi، نصب Strapi، سازنده نوع محتوای Strapi، نوع مجموعه، فعال کردن دسترسی API، بین المللی سازی، مناطق پویا و موارد دیگر پرداخته ایم. این گواهی بر ویژگی های جالب CMS هدلس Strapi است!

در قسمت بعدی نحوه ساخت رابط کاربری با استفاده از کامپوننت های ایجاد شده در این صفحه فرود Dynamic Zone را خواهیم دید. علاوه بر این، نحوه نمایش پست های وبلاگ را خواهیم دید. برویم

منابع

برای رویداد جریانی آینده ما با بن هلمز از Astro ثبت نام کنید

ما هیجان زده هستیم که بن هولمز از Astro با ما در مورد اینکه چرا Astro عالی و بهترین راه برای ساخت سریع وب سایت های محتوا محور است، صحبت می کند.

موضوعات

• چه چیزی در Astro جدید است
• لایه محتوا
• وب هوک ها

به ما بپیوندید تا بیشتر بدانید چرا Astro می‌تواند انتخابی عالی برای پروژه بعدی شما باشد.