کپی کردن صفحه‌ی پروفایل اینستاگرام (1) - آشنایی با Laravel mix

در جلسه قبل با برخی از دستورات خاص blade برای استفاده از layout ها آشنا شدیم اما هنوز هیچ کاری را برای فایل home.blade.php نکرده ایم. اگر یادتان باشد گفتم که محتوای درون section این فایل را حذف کنید تا به شکل زیر در بیاید:

@extends('layouts.app')

@section('content')
<div class="container">

</div>
@endsection

بنابراین بیایید آن را ادامه بدهیم. همانطور که می دانید در بوت استرپ صفحات ما به 12 ستون تقسیم می شوند و بر اساس ظاهر اینستاگرام حدس من این است که لوگوی پروفایل (قسمت چپ) 3 از 12 و قسمت description (سمت راست) هم 9 از 12 ستون را اشغال می کنند:

بنابراین می توان گفت:

@section('content')
<div class="container" style="max-width: 850px">
    <div class="row">
        <div class="col-3 p-5">

        </div>
        <div class="col-9">

        </div>
    </div>
</div>
@endsection

من به container خود max-width داده ام تا ظاهر برنامه در صفحات بزرگ، کشیده نشود. همچنین یک padding برابر 5 را نیز به آن داده ام تا فاصله اش با بقیه عناصر حفظ شود. در حال حاضر پروفایل ما به صورت مربع ظاهر شده است که شبیه اینستاگرام نیست. در اینستاگرام پروفایل ها دایره ای شکل هستند بنابراین باید از بوت استرپ استفاده کرده و بگوییم:

<img class="rounded-circle" src="img/roxo-profile.jpg" alt="roxo profile picture">

اگر به تصویری که برایتان قرار دادم نگاه کنید متوجه می شوید که قسمت سمت راست یا توضیحات پروفایل را می توانیم به چندین div تقسیم کنیم که یکی مسئول نمایش یوزرنیم و دیگری مسئول نمایش فالوئر ها و پست ها و دیگری مسئول نمایش description پروفایل و در آخر هم div ای برای لینک به سایت اصلی باشند. من همین کار را می کنم:

@section('content')
<div class="container" style="max-width: 850px">
    <div class="row">
        <div class="col-3 p-5">
            <img class="rounded-circle" src="img/roxo-profile.jpg" alt="roxo profile picture">
        </div>
        <div class="col-9 p-5">
            <div>
                <h1>roxo_ir</h1>
            </div>
            <div class="d-flex">
                <div class="pr-5"><strong>164</strong> posts</div>
                <div class="pr-5"><strong>28k</strong> followers</div>
                <div class="pr-5"><strong>3038</strong> following</div>
            </div>
        </div>
    </div>
</div>
@endsection

من قصد توضیح دادن HTML را ندارم چرا که تمرکز این دوره روی لاراول است، همچنین شما باید HTML آشنا باشید و این دوره برای افراد مبتدی نیست. با نوشتن و ذخیره این کدها این شکل را در مرورگر می بینید:

بنابراین فقط باید لینک و توضیحات صفحه را اضافه کنیم:

@section('content')
<div class="container" style="max-width: 850px">
    <div class="row">
        <div class="col-3 p-5">
            <img class="rounded-circle" src="img/roxo-profile.jpg" alt="roxo profile picture">
        </div>
        <div class="col-9 p-5">
            <div>
                <h1>roxo_ir</h1>
            </div>
            <div class="d-flex">
                <div class="pr-5"><strong>164</strong> posts</div>
                <div class="pr-5"><strong>28k</strong> followers</div>
                <div class="pr-5"><strong>3038</strong> following</div>
            </div>
            <div class="pt-4 font-weight-bold">♾️ آکادمی آنلاین روکســـو ♾️</div>
            <div>روکسو یک وبسایت آموزش آنلاین است که در آن هم می‌توانید مهارت موردنیازتان را یاد بگیرید و هم تخصصِ خود
                را به دیگران یاد بدهید 👇👇
            </div>
            <div><a href="https://www.roxo.ir/home/" class="font-weight-bold">www.roxo.ir</a></div>
        </div>
    </div>
</div>
@endsection

نتیجه این کد تصویر زیر خواهد بود:

بنابراین قسمت اول پروفایل را به طور کامل پیاده کرده ایم.

سوال: ما تا اینجای کار از فونت های عادی و پیش فرض لاراول استفاده کرده ایم که خیلی برای زبان فارسی جالب نیست. چطور می توانیم فونت های خود را تغییر دهیم؟ همچنین تا به حال تمام کدهای CSS را درون خود فایل HTML نوشته ایم. چطور می توانیم از فایل های CSS خارجی استفاده کنیم؟

برای تغییر فونت ها و به طور کل استفاده از CSS خارجی راه های مختلفی داریم. بهترین راه مراجعه به پوشه resources و سپس پوشه sass است. در این پوشه فایلی به نام app.scss را خواهید دید که محتوای زیر را دارد:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

یعنی یک فونت را از گوگل import و کتابخانه بوت استرپ را نیز به همراه فایلی به نام variables وارد (import) کرده است. در همان پوشه sass فایل variables.scss_ را پیدا می کنید که محتویات زیر را دارد:

// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

اگر می توانید با sass کار کنید پیشنهاد اکید دارم که تمام استایل های خودتان را در فایل های sass به همین شکل بنویسید. این فایل ها در نهایت توسط Laravel mix (با اجرای دستور npm run dev که در جلسات قبل دیدیم) به همراه تمام کتابخانه های بوت استرپ و غیره به شکل یک فایل app.css در پوشه public/css کامپایل خواهند شد. Sass قابلیت های بسیار بهتری از css دارد که کار استایل دهی را برای شما راحت تر می کند و یادگیری آن اصلا سخت نیست چرا که تقریبا هیچ تفاوتی با CSS ندارد و فقط قابلیت هایی را به خود اضافه کرده است.

در عین حال اگر نمی توانید این کار را انجام دهید باید از روش دیگری جلو برویم. در مسیر اصلی پروژه ما فایلی به نام webpack.mix.js وجود دارد که محتوای زیر را دارد:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

به عبارتی mix.js به دنبال فایل app.js در پوشه resources/js می گردد و آن را به فایل app.js در پوشه public کامپایل می کند. همچنین قسمت sass فایل app.scss را به فایل app.css در مسیر public/css کامپایل می کند. ما می توانیم دستور دیگری به نام styles را به آن اضافه کنیم:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .styles([
        'resources/css/someStyles.css',
        'public/css/app.css'
    ], 'public/css/app.css');

در اینجا من یک آرایه را به styles پاس داده ام تا چندین فایل css را برایش مشخص کنم. من گفته ام در مسیر resources/css دو فایل css به نام های someStyles.css و app.css وجود دارند. من می خواهم تو هر دو را گرفته و در قالب یک فایل به نام app.css در مسیر public/css کامپایل کنی! به همین راحتی می توانیم چندین و چند فایل Css جداگانه (مثلا برای header و footer و تصاویر و غیره) داشته باشیم و در نهایت همه را در قالب یک فایل ترکیب کنیم. یادتان باشد که اگر از چند فایل sass استفاده کردید اما آن ها را در app.scss وارد یا import نکرده باشید، باید آن ها را در این قسمت به Laravel mix پاس بدهید تا در نسخه نهایی حضور داشته باشند. در نهایت همین فایل ساده CSS را در صفحات HTML خود قرار می دهید.

به زبان ساده تر Laravel mix از webpack استفاده می کند تا چندین فایل را در قالب یک فایل minify و بهینه شده کامپایل کند و همان چیزی است که با دستور npm run dev اجرا می شود. در جلسه بعد با استفاده از sass فونت فارسی را بهتر خواهم کرد.