نمای کلی

پوسته‌های ویترو بلاگ کاملاً قابل سفارشی‌سازی هستند. اگر با HTML، CSS و JavaScript آشنا باشید، می‌توانید پوستهٔ خود را از ابتدا بسازید. کد پوسته‌های رسمی پروژه را در مخزن hyvor-blogs-themes بررسی کنید.

در اینجا برخی از اصطلاحات رایج در این اسناد آورده شده است:

• توسعه‌دهندهٔ پوسته — کسی که پوسته را طراحی و توسعه می‌دهد.
• وبلاگ‌نویس — صاحب وبلاگ که می‌تواند پوسته را نصب و از طریق پنل ویرایش کند.
• زیردامنه — شناسهٔ اختصاصی وبلاگ در نشانی نمونهٔ {subdomain}.example.com.
• مسیر — تعیین می‌کند هر نشانی وبلاگ چگونه پردازش شود. راهنمای مسیرها را ببینید.
• HB - ویترو بلاگ
• رندر — ترکیب قالب پوسته با داده‌های وبلاگ و تولید خروجی HTML؛ تصویر زیر را ببینید.

مبانی

• زبان قالب Twig 3.0است
• برای استایل‌دهی می‌توانید از SCSS یا CSS استفاده کنید.
• فایل های پیکربندی و زبان در آن نوشته شده است YAML.

مسیرها

برای شروع توسعه پوسته، درک نحوه عملکرد مسیرها در ویترو بلاگ ضروری است. مسیرها تنظیماتی در سطح وبلاگ هستند، به این معنی که توسط وبلاگ نویس پیکربندی می شوند. ویترو بلاگ دارای مسیرهای پیش فرض است که معمولاً برای یک وبلاگ ساده کافی است.

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

یک فایل CSS

تنها یک فایل CSS در وبلاگ وجود دارد، styles.css.

Flashload

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

چرا Flashload ؟ بارگیری مجدد مرورگر کند است. آنها منابع یکسان CSS/JS را چندین بار بارگذاری می کنند که باعث کندتر شدن رندر صفحه می شود. Flashload حتی قبل از اینکه کاربر روی پیوند کلیک کند، شروع به بارگیری صفحات دیگر می کند. ناوبری را روان تر می کند. این به سادگی وبلاگ را به یک برنامه تک صفحه ای (SPA)تبدیل می کند!

قبلاً یاد گرفتیم که فقط یک styles.css برای وبلاگی وجود دارد که شامل تمام CSS وبلاگ است. این styles.css باید در <head> صفحه بارگذاری شود. هنگامی که کاربر به صفحه دیگری هدایت می شود، Flashload یک درخواست AJAX را به آن مسیر ارسال می کند و صفحه HTML را از قبل واکشی می کند. سپس، فقط <body> قسمترا به روز می کند. (به یاد داشته باشید، ما قبلاً همه CSS را در اولین درخواست بارگذاری کرده ایم، بنابراین نمی خواهیم دوباره آن را بارگیری کنیم).

قانون ساده این است که منابع مشترک وبلاگ را به <head> اضافه کنید.

کش

یکی دیگر از رفتارهای مهم HB این است که ما به طور گسترده از کش استفاده می کنیم. ما از تکنیکی به نام اولین درخواست ذخیره سازیاستفاده می کنیم.

• شخصی مسیر /hello-world یک وبلاگ را درخواست می کند.
• ما هیچ خروجی کش برای این مسیر نداریم. ما داده ها را از پایگاه داده خود واکشی می کنیم، آن را با الگو ترکیب می کنیم و خروجی HTML را تولید می کنیم و پاسخ را برای کاربر ارسال می کنیم. در پشت صحنه، خروجی HTML تولید شده را در حافظه پنهان ذخیره می کنیم.
• هنگامی که شخص دیگری همان مسیر را درخواست می کند، خروجی HTML مستقیماً از کش ارسال می شود. فرآیند رندرینگ را طی نمی کند.

هنگام استفاده از کش، پاک کردن کش مهمترین چیز است. ما باید مطمئن شویم که وقتی چیزی تغییر می کند، محتوای قدیمی ارائه نمی شود. در اینجا رویدادهایی وجود دارد که حافظه پنهان را برای هر محدوده پاک می کنیم.

• هر زمان که هر داده در وبلاگ تغییر کند
• هر زمان که پوسته ویرایش می شود
• در 1 ژانویه

و،

• مسیرهای /search و /p/{hash} (پیش نمایش صفحات) همیشه پویا هستند و هرگز در حافظه پنهان ذخیره نمی شوند.

شروع توسعه

بیایید محیط توسعه محلی شما را راه اندازی کنیم.

• ابتدا به یک وبلاگ DEV نیاز دارید. یکی در /console/new/devایجاد کنید. وبلاگ‌های DEV مشابه وبلاگ‌های معمولی در ویترو بلاگ هستند، با این حال رایگان هستند و فقط برای توسعه پوسته قابل استفاده هستند.
• شما یک زیر دامنه با فرمت dev-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx دریافت خواهید کرد. ما بعداً به این نیاز خواهیم داشت.

برای مراحل بعدی، شما نیاز دارید Node.js (و npm). به عنوان یک توسعه دهنده فرانت اند، امیدواریم قبلاً آن را نصب کرده باشید :)

• بعد، ابزار CLI ما را از طریق npm نصب کنید

npm install -g hyvor-blogs-cli

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

mkdir my-theme

• cd به پوشه پوسته و اجرای hyvor-blogs-cli init

cd my-theme
hyvor-blogs-cli init

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

/
    /assets
    /lang
        en.yaml
    /styles
        index.scss
    /templates
        @base.twig
        author.twig
        index.twig
        post.twig
        tag.twig
    .env
    config.def.yaml
    config.yaml

همچنین در صورت تمایل می توانید این ساختار پوشه را به صورت دستی ایجاد کنید.

• سپس، فایل .env را باز کنید و SUBDOMAIN را با زیر دامنه وبلاگ DEV خود (که قبلا ایجاد کرده بودید) به روز کنید.

SUBDOMAIN=dev-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

• سپس دستور hyvor-blogs-cli را اجرا کنید تا به وبلاگ شما سرویس دهد

hyvor-blogs-cli

• وبلاگ خود (dev.example.com) را در مرورگر خود باز کنید تا پوسته را مشاهده کنید.

ساختار پوشه‌ها

همانطور که می بینید، چهار پوشه در یک پوشه پوسته HB وجود دارد. پوشه های تودرتو پشتیبانی نمی شوند.

/
    /templates
    /styles
    /assets
    /lang
    config.yaml

• قالب ها: همه Twig فایل های قالب به اینجا بروید. ببینید قالب ها.
• سبک ها: همه SCSS فایل ها به اینجا بروید ببینید یک ظاهر طراحی شده.
• دارایی ها: می توانید SVG، PNG، فایل فونت یا Javascript فایل های اینجا همه فایل‌های این فهرست از طریق /assets در دسترس عموم هستند /{file_name} مسیر هر نوع فایلی پشتیبانی می شود.
• زبان: همه فایل های زبان به اینجا میروند. ببینید بین المللی شدن.

پوشه ریشه حاوی فایل های پیکربندی است. ببینید پیکربندی.