Rumah > Artikel > rangka kerja php > Terokai cara memperkenalkan gaya dalam Laravel
Terokai cara memperkenalkan gaya dalam Laravel
- PHPzasal
- 2023-04-21 10:12:18983semak imbas
Laravel ialah salah satu rangka kerja PHP paling popular hari ini, menyediakan pembangun cara untuk membangunkan aplikasi web moden dengan cepat. Berbanding dengan cara tradisional menulis PHP, banyak ciri Laravel adalah automatik, jadi kami boleh mencipta aplikasi berkuasa dengan lebih pantas. Dalam artikel ini, kami akan meneroka cara memperkenalkan gaya dalam Laravel.
- Menggunakan fail CSS
Dalam Laravel, kami boleh menggunakan fail CSS tradisional sebagai helaian gaya kami. Buat direktori css di bawah direktori awam dan letakkan fail CSS anda di dalamnya. Contohnya, jika fail anda dipanggil style.css, struktur direktori anda akan kelihatan seperti ini:
public/ └── css/ └── style.css
Untuk menggunakan lembaran gaya ini pada paparan anda, anda perlu menggunakan HTML dalam teg pautan paparan. Teg ini terletak di bahagian kepala (<head>) teg paparan. Dengan mengandaikan paparan anda terletak dalam resources/views/index.blade.php, kod anda akan kelihatan seperti ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Laravel App</title>
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<!-- your html code here -->
</body>
</html>
Perhatikan bahawa dalam teg pautan kami menggunakan fungsi pembantu aset Laravel untuk menentukan Laluan ke fail CSS. Kaedah ini mengembalikan laluan penuh ke URL aplikasi anda supaya ia boleh dimuatkan dalam halaman web.
- Menggunakan CDN
Selain menggunakan fail tempatan dalam aplikasi Laravel anda, anda juga boleh menggunakan CDN (Rangkaian Penghantaran Kandungan) untuk membawa masuk helaian gaya. CDN ialah sistem untuk menyampaikan perkhidmatan rangkaian untuk meningkatkan prestasi dan ketersediaan dengan menggunakan pelayan di berbilang lokasi geografi.
Berikut ialah contoh kod untuk memperkenalkan pautan CDN helaian gaya Bootstrap dalam paparan Laravel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Laravel App</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
</head>
<body>
<!-- your html code here -->
</body>
</html>
Dalam kod di atas, kami menggunakan CDN Bootstrap untuk memperkenalkan helaian gaya . Ini menjadikan halaman dimuatkan lebih cepat dan kami tidak perlu risau sama ada pelayan kami boleh menyokong permintaan fail.
- Menggunakan SASS atau LESS
Menggunakan pautan CSS atau CDN ialah cara yang berkesan untuk melaksanakan lembaran gaya, tetapi dalam projek yang lebih besar, anda mungkin memerlukan alat yang lebih maju untuk mengurus dan mengaturnya helaian gaya anda.
Dalam kes ini, anda boleh menggunakan SASS atau LESS, dua prapemproses CSS popular yang menawarkan ciri yang lebih maju seperti sarang, campuran dan pembolehubah.
Untuk SASS atau LESS, anda perlu memasang pemalam yang berkaitan untuk menyusun helaian gaya anda. Untuk SASS, anda perlu memasang pakej laravel/sass dan untuk KURANG, anda perlu memasang pakej laravel/less.
Sebagai contoh, jika anda menggunakan SASS, lakukan yang berikut Jalankan arahan berikut dalam terminal:
composer require laravel/sass
Setelah pakej ini dipasang, anda boleh menggunakan fail sumber statik Laravel. direktori sass dalam folder. Di dalam direktori sass ini akan terdapat fail SASS anda (.scss). Anda kemudiannya boleh menyusun fail SASS anda ke dalam fail CSS dengan menjalankan arahan berikut:
npm run dev
Arahan ini akan menggunakan Laravel Mix untuk menyusun dan membungkus fail sumber statik anda.
Akhir sekali, helaian gaya SASS boleh digunakan dengan memasukkan fail CSS yang disusun dalam paparan, seperti yang ditunjukkan dalam bahagian pertama artikel ini.
Ringkasan
Memperkenalkan helaian gaya dalam Laravel boleh menggunakan fail CSS tradisional, pautan CDN atau menggunakan SASS atau LESS untuk prapemprosesan CSS. Kita boleh menggunakan tag <link> HTML atau alat Aset Laravel untuk memperkenalkan fail CSS. Walau apa pun kaedah yang anda pilih, anda harus memperkenalkan helaian gaya anda untuk memberikan pengalaman pengguna yang lebih baik. Semoga artikel ini bermanfaat kepada anda, terima kasih!
Atas ialah kandungan terperinci Terokai cara memperkenalkan gaya dalam Laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!