گام 22: زیباسازی رابط کاربری با Webpack
زیباسازی رابط کاربری با 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/styles/app.css assets/styles/app.scss
|
1 2 3 4 5 6 7 8 9 10 11 | --- a/assets/app.js
+++ b/assets/app.js
@@ -6,7 +6,7 @@
*/
// any CSS you import will output into a single css file (app.css in this case)
-import './styles/app.css';
+import './styles/app.scss';
// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
// import $ from 'jquery';
|
بارگیرندهی Sass را نصب کنید:
1 | $ yarn add node-sass sass-loader --dev
|
و بارگیرندهی Sass را در webpack فعال کنید:
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) کنید (ما همچنین فایل را تمیزکاری کردهایم):
1 2 3 4 5 6 7 | --- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -1,3 +1 @@
-body {
- background-color: lightgray;
-}
[email protected] '~bootstrap/scss/bootstrap';
|
همین کار را برای فایل JS انجام دهید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | --- a/assets/app.js
+++ b/assets/app.js
@@ -7,8 +7,7 @@
// any CSS you import will output into a single css file (app.css in this case)
import './styles/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/app.js');
+bsCustomFileInput.init();
|
سیستم فرم سیمفونی به صورت بومی از Bootstrap به همراه یک پوستهی ویژه پشتیبانی میکند. آن را فعال کنید:
1 2 | twig:
form_themes: ['bootstrap_4_layout.html.twig']
|
زیباسازی HTML¶
حالا آماده هستیم تا اپلیکیشن را زیباسازی کنیم. فایل فشردهی را بارگیری کرده و آن را در پوشهی اصلی پروژه از حالت فشرده خارج کنید:
1 2 3 | $ php -r "copy('https://symfony.com/uploads/assets/guestbook-5.0.zip', 'guestbook-5.0.zip');"
$ unzip -o guestbook-5.0.zip
$ rm guestbook-5.0.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.