Rumah > rangka kerja php > Laravel > Laravel menetapkan tema secara dinamik

Laravel menetapkan tema secara dinamik

WBOY
Lepaskan: 2023-05-29 11:06:37
asal
574 orang telah melayarinya

Tema ialah konsep penting dalam pembangunan aplikasi web. Tema boleh digunakan untuk menukar rupa dan rasa aplikasi web, termasuk skema warna, imej latar belakang, fon dan reka letak. Banyak aplikasi web mempunyai pelbagai tema untuk dipilih, dan tema yang berbeza boleh menyesuaikan diri dengan keperluan pengguna yang berbeza dan senario yang berbeza. Laravel, sebagai rangka kerja aplikasi web PHP yang popular, secara semula jadi menyediakan sokongan untuk penukaran tema.

Tema Laravel merujuk kepada satu set gaya dan gaya yang disesuaikan oleh pereka laman web atau pembangun tapak web untuk mempersembahkan penampilan dan reka letak tapak web. Tema Laravel boleh membantu aplikasi web mencapai rupa unik dan pengalaman pengguna mereka dengan lebih mudah. Banyak aplikasi web menyokong penukaran tema, dan pengguna boleh memilih tema kegemaran mereka mengikut keutamaan mereka.

Tema Laravel boleh dilaksanakan dalam pelbagai cara. Kaedah paling asas ialah mencipta folder paparan berbeza untuk setiap tema, termasuk fail sumber yang berbeza seperti CSS, JS dan imej. Setiap tema mempunyai direktori yang berasingan untuk memuatkan fail CSS, JS dan imej mengikut pilihan pengguna. Walau bagaimanapun, kaedah ini akan menambah banyak kerja berulang, kerana setiap tema perlu mencipta direktori bebas dan fail sumber. Selain itu, apabila pengguna ingin menukar tema, mereka perlu mengubah suai kod secara manual dan mengemas kini laluan tema dan laluan fail sumber.

Untuk menyelesaikan masalah ini, pasukan pembangunan Laravel menyediakan penyelesaian untuk menetapkan tema secara dinamik. Dengan skema ini, aplikasi Laravel boleh melaksanakan penukaran tema tanpa memuatkan semula halaman. Khususnya, penyelesaian ini ialah mekanisme storan berdasarkan Sesi atau Kuki, yang digunakan untuk menyimpan pemilihan tema pengguna. Apabila pengguna memilih tema yang berbeza, nama tema akan disimpan dalam Sesi atau Kuki dan nilai ini akan dikekalkan dalam permintaan halaman berikutnya.

Berikut ialah contoh tema Laravel mudah yang menunjukkan cara melaksanakan penukaran tema melalui mekanisme Sesi atau Kuki:

1 Buat direktori tema

Pertama, anda perlu untuk menggunakannya dalam Laravel Cipta direktori tema dalam direktori awam program untuk menyimpan semua direktori tema dan fail sumber.

public/
└── themes/
    ├── theme_1/
    │   ├── css/
    │   ├── js/
    │   └── images/
    └── theme_2/
        ├── css/
        ├── js/
        └── images/
Salin selepas log masuk

Setiap direktori tema mengandungi subdirektori untuk menyimpan fail sumber seperti CSS, JS dan imej. Setiap subdirektori mengandungi fail sumber dengan nama yang sama Contohnya, direktori css dalam direktori theme_1 mengandungi fail theme_1.css.

2. Tentukan laluan

Dalam direktori laluan aplikasi Laravel, tentukan laluan untuk mengendalikan permintaan penukaran tema. Penghalaan boleh diproses dengan sewajarnya mengikut kaedah HTTP yang berbeza, seperti GET, POST, dll. Apabila pengguna memilih tema, aplikasi Laravel akan menyimpan pemilihan tema dalam Sesi atau Kuki, dan kemudian memperoleh tema yang ditetapkan pada masa ini melalui laluan ini.

// 主题切换路由
Route::get('/theme/{name}', function ($name) {
    // 将主题名称保存到 Session 或 Cookie 中
    if (request()->hasCookie('theme')) {
        return response()->cookie('theme', $name);
    } else {
        session(['theme' => $name]);
    }
    return redirect()->back();
});
Salin selepas log masuk

3. Tentukan perisian tengah

Untuk melaksanakan mekanisme penukaran tema dalam aplikasi Laravel, perisian tengah perlu ditakrifkan. Perisian tengah memuatkan fail sumber yang sepadan seperti CSS, JS dan imej berdasarkan nilai dalam Sesi atau Kuki. Berikut ialah contoh kod middleware:

namespace AppHttpMiddleware;

use Closure;
use IlluminateSupportFacadesCookie;
use IlluminateSupportFacadesStorage;

class LoadTheme
{
    /**
     * Handle an incoming request.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        // 检查 Session 或 Cookie 中是否存在 theme 选项
        if ($request->session()->has('theme')) {
            $theme = $request->session()->get('theme');
        } elseif ($request->hasCookie('theme')) {
            $theme = $request->cookie('theme');
        } else {
            $theme = 'default';
        }

        // 尝试加载主题 CSS 文件
        $css = public_path(sprintf('themes/%s/css/%s.css', $theme, $theme));
        if (file_exists($css)) {
            $css = asset(sprintf('themes/%s/css/%s.css', $theme, $theme));
            echo '<link rel="stylesheet" href="'.$css.'">';
        }

        // 尝试加载主题 JS 文件
        $js = public_path(sprintf('themes/%s/js/%s.js', $theme, $theme));
        if (file_exists($js)) {
            $js = asset(sprintf('themes/%s/js/%s.js', $theme, $theme));
            echo '<script src="'.$js.'"></script>';
        }

        // 尝试加载主题图片文件
        $image_path = public_path(sprintf('themes/%s/images/', $theme));
        if (is_dir($image_path)) {
            Storage::disk('public')->makeDirectory(sprintf('themes/%s/images/', $theme));
        }
        $images = Storage::disk('public')->files(sprintf('themes/%s/images/', $theme));
        foreach ($images as $image) {
            $image_url = Storage::disk('public')->url($image);
            echo '<img src="'.$image_url.'">';
        }

        return $next($request);
    }
}
Salin selepas log masuk

Middleware ini akan menyemak sama ada terdapat atribut tema dalam Sesi atau Kuki dan cuba memuatkan fail sumber yang sepadan seperti CSS, JS dan imej. Jika fail yang sepadan tidak ditemui, tema lalai akan dimuatkan.

4. Daftar middleware

Daftar perisian tengah tersuai dalam aplikasi Laravel untuk mendayakan mekanisme penukaran tema untuk semua permintaan. Mekanisme pendaftaran middleware Laravel boleh digunakan untuk middleware global dan tempatan.

// 注册全局中间件
// 在 app/Http/Kernel.php 中找到 $middlewareGroups 数组,加入中间件
'web' => [
    AppHttpMiddlewareLoadTheme::class,
    // 其它中间件
],
Salin selepas log masuk

Dengan cara ini, semua permintaan yang masuk ke dalam apl akan mendayakan penukaran tema secara automatik.

Di atas ialah contoh penggunaan Laravel untuk menetapkan tema secara dinamik. Mekanisme perisian tengah Laravel menjadikannya mudah dan fleksibel untuk melaksanakan penukaran tema. Dengan cara ini, anda bukan sahaja boleh meningkatkan pengalaman pengguna aplikasi anda, tetapi juga menjadikan pengguna lebih berpuas hati dan meningkatkan penggunaan aplikasi web anda.

Atas ialah kandungan terperinci Laravel menetapkan tema secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan