گام 22: زیباسازی رابط کاربری با Webpack

5.0 version
Maintained

زیباسازی رابط کاربری با Webpack

ما هیچ زمانی را صرف طراحی رابط کاربری نکرده‌ایم. برای زیباسازی حرفه‌ای، ما از یک پشته‌ی مدرن و مبتنی بر Webpack استفاده می‌کنیم. بیایید برای افزودن حال‌وهوای سیمفونی و تسهیل ادغام با اپلیکیشن، Webpack Encore را نصب کنیم:

1
$ symfony composer req encore

یک محیط کامل Webpack برای شما ایجاد شده است: package.json و webpack.config.js تولید شده حاوی پیشفرض‌های خوبی است. webpack.config.js را باز کنید، این فایل از انتزاعی‌سازی Encore برای پیکربندی Webpack بهره می‌برد.

فایل package.json تعدادی فرمان دلپذیر تعریف می‌کند که همیشه از آن‌ها استفاده خواهیم کرد.

پوشه‌ی assets حاوی مدخل‌های اصلی برای دارایی‌های پروژه است: css/app.css و js/app.js.

استفاده از Sass

به جای استفاده از CSS خام، بیایید از Sass بهره بگیریم:

1
$ mv assets/css/app.css assets/css/app.scss
patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -6,7 +6,7 @@
  */

 // any CSS you import will output into a single css file (app.css in this case)
-import '../css/app.css';
+import '../css/app.scss';

 // Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
 // import $ from 'jquery';

بارگیرنده‌ی Sass را نصب کنید:

1
$ yarn add node-sass "[email protected]^7.0.1" --dev

و بارگیرنده‌ی Sass را در webpack فعال کنید:

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -54,7 +54,7 @@ Encore
     })

     // enables Sass/SCSS support
-    //.enableSassLoader()
+    .enableSassLoader()

     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()

از کجا می‌دانستم که باید چه بسته‌هایی را نصب کنم؟ اگر سعی می‌کردیم که دارایی‌ها را بدون این بسته‌ها بسازیم، Encore پیغام خطای مناسبی به ما می‌داد که پیشنهاد می‌کرد، فرمان yarn add برای نصب وابستگی‌های لازم برای بارگرفتن فایل‌های .scss الزامی است.

بهره‌گیری از Bootstrap

برای شروع با پیشفرض‌های خوب و ساخت یک وب‌سایت واکنشی، یک چارچوب CSS همچون Bootstrap می‌تواند بسیار مفید باشد. آن را به عنوان یک بسته نصب کنید:

1
$ yarn add bootstrap jquery popper.js bs-custom-file-input --dev

Bootstrap را در فایل CSS الزام (require) کنید (ما همچنین فایل را تمیزکاری کرده‌ایم):

patch_file
1
2
3
4
5
6
7
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -1,3 +1 @@
-body {
-    background-color: lightgray;
-}
[email protected] '~bootstrap/scss/bootstrap';

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

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -7,8 +7,7 @@

 // any CSS you import will output into a single css file (app.css in this case)
 import '../css/app.scss';
+import 'bootstrap';
+import bsCustomFileInput from 'bs-custom-file-input';

-// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
-// import $ from 'jquery';
-
-console.log('Hello Webpack Encore! Edit me in assets/js/app.js');
+bsCustomFileInput.init();

سیستم فرم سیمفونی به صورت بومی از Bootstrap به همراه یک پوسته‌ی ویژه پشتیبانی می‌کند. آن را فعال کنید:

config/packages/twig.yaml
1
2
twig:
    form_themes: ['bootstrap_4_layout.html.twig']

زیباسازی HTML

حالا آماده هستیم تا اپلیکیشن را زیباسازی کنیم. فایل فشرده‌ی را بارگیری کرده و آن را در پوشه‌ی اصلی پروژه از حالت فشرده خارج کنید:

1
2
3
$ php -r "copy('https://symfony.com/uploads/assets/guestbook.zip', 'guestbook.zip');"
$ unzip -o guestbook.zip
$ rm guestbook.zip

به قالب‌ها نگاهی بیاندازید، ممکن است یکی‌دو حقه در مورد Twig بیاموزید.

ساخت دارایی‌ها

یک تغییر اساسی هنگام استفاده از Webpack این است که فایل‌های CSS و JS به صورت مستقیم در اپلیکیشن قابل استفاده نیستند. آن‌ها ابتدا نیاز دارند که «compile» شوند.

در محیط توسعه، کامپایل‌کردن دارایی‌ها می‌تواند از طریق فرمان encore dev انجام شود:

1
$ symfony run yarn encore dev

به جای اینکه با هربار تغییر، فرمان را اجرا کنیم، آن را به پس‌زمینه بفرستید و اجازه دهید تا تغییرات JS و CSS را دنبال کند:

1
$ symfony run -d yarn encore dev --watch

برای کشف تغییرات بصری، زمان بگذارید. در مرورگر نگاهی به طراحی جدید داشته باشید.

حالا فرم ورود به سایتِ تولیده‌شده، زیباسازی شده است چرا که باندل Maker به صورت پیشفرض از کلاس‌های CSS موجود در Bootstrap استفاده می‌کند:

در محیط عمل‌آوری، SymfonyCloud به صورت خودکار تشخیص می‌دهد که شما از Encore استفاده می‌کنید و در طول فاز ساخت، دارایی‌ها را برای شما کامپایل می‌کند.


  • « Previous گام 21: نهان‌سازی به منظور افزایش کارایی
  • Next » گام 23: تغییر اندازه‌ی تصاویر

This work, including the code samples, is licensed under a Creative Commons BY-NC-SA 4.0 license.