2025年5月30日 星期五

laravel 12 Blade Templates 網頁模版

一、網頁模版
建立網頁模版指令：
php artisan make:view contactus 
php artisan make:view aboutus

檔案：routes/web.php
內容：
Route::get('about-us',function(){
    return view('aboutus');
});
Route::view('contact-us','contactus');

檔案：resources/views/aboutus.blade.php
內容：
<html>
    <body>
        <h1>About us</h1>
    </body>
</html>

檔案：resources/views/contactus.blade.php
內容：
<div>
    <h2>Contact us</h2>
</div>

測試結果：



二、傳送變數資料到網頁模版
檔案：routes/web.php
內容：
Route::get('about-us',function(){
    $name = 'tester';
    $id = 123456;
    //return view('aboutus')->with('name',$name)->with('id',$id);
    //return view('aboutus',compact($name,$id));
    return view('aboutus',['name'=>$name,'id'=>$id]);
});
Route::view('contact-us','contactus',['name'=>'tester','id'=>123456]);

檔案：resources/views/aboutus.blade.php
內容：
<html>
    <body>
        <h1>About us</h1>
        <h1>Name:{{ $name }}</h1>
        <h1>ID:{{ $id }}</h1>
    </body>
</html>

檔案：resources/views/contactus.blade.php
內容：
<div>
    <h2>Contact us</h2>
    <h1>Name:{{ $name }}</h1>
    <h1>ID:{{ $id }}</h1>
</div>

測試結果：

三、傳送網址資料到網頁模版
檔案：routes/web.php
內容：
Route::get('about-us/{name}/{id}',function($name,$id){
    return view('aboutus',compact('name','id'));
});
Route::view('contact-us/{name}/{id}','contactus');


檔案：resources/views/aboutus.blade.php
內容：
<html>
    <body>
        <h1>About us</h1>
        <h1>Name:{{ $name }}</h1>
        <h1>ID:{{ $id }}</h1>
    </body>
</html>

檔案：resources/views/contactus.blade.php
內容：
<div>
    <h2>Contact us</h2>
    <h1>Name:{{ request()->name }}</h1>
    <h1>ID:{{ request()->id }}</h1>
</div>


測試結果：

四、網頁模版註解
檔案：resources/views/contactus.blade.php
內容：
<div>
    {{--
        This is a comment
        This is a second comment
    --}}
    <!--
        This is a HTML comment
    -->
    <h2>Contact us</h2>
    <h1>Name:{{ request()->name }}</h1>
    <h1>ID:{{ request()->id }}</h1>

</div>
測試結果：


五、網頁模版的for、if的用法
        (一) for 的用法
檔案：routes/web.php
內容：
Route::view('contact-us/{name}/{id}','contactus');

檔案：resources/views/contactus.blade.php
內容：
<div>
    <h2>Contact us</h2>
    <h1>Name:{{ request()->name }}</h1>
    <h1>ID:{{ request()->id }}</h1>
    @for ($i = 0;$i<10;$i++)
        <p>{{ $i }}</p>
    @endfor
</div>

測試結果：
        (二) if 的用法
檔案：routes/web.php
內容：
Route::view('contact-us/{name}/{id}','contactus');

檔案：resources/views/contactus.blade.php
內容：
<div>
    <h2>Contact us</h2>
    <h1>Name:{{ request()->name }}</h1>
    <h1>ID:{{ request()->id }}</h1>
    @for ($i = 4;$i<7;$i++)
        <p>{{ $i }}</p>
        @if ($i == 5)
            <h1> Hi! This is {{ $i }}</h1>
        @endif
    @endfor
</div>

測試結果：
更多的寫法資源在3.Blade 模板

六、網頁子視圖與視圖快取
在resources/views 手動建立一個資料夾Subviews
在resources/views/Subviews 手動建立input.blade.php
或是指令：
mkdir resources/views/Subviews
touch resources/views/Subviews/input.blade.php

   (一)一般情況：
檔案：routes/web.php
內容：
Route::get('about-us/{name}/{id}',function($name,$id){
    return view('aboutus',compact('name','id'));
})

檔案：resources/views/Subviews/input.blade.php
內容：
<div>
    <label>Name</label>
    <input type="text" name="name" required>
</div>

檔案：resources/views/aboutus.blade.php

檔案：resources/views/contactus.blade.php
內容：
<html>
    <body>
        <h1>About us</h1>
        <h1>Name:{{ $name }}</h1>
        <h1>ID:{{ $id }}</h1>
        @include('subviews.input')
    </body>
</html>

測試結果：

   (二)內定變數傳值情況：
檔案：routes/web.php
內容：
Route::get('about-us/{name}/{id}',function($name,$id){
    return view('aboutus',compact('name','id'));
})

檔案：resources/views/Subviews/input.blade.php
內容：
<div>
    <label>Name</label>
    <input type="text" name="name" required value="{{ $myName }}" />
</div>

檔案：resources/views/contactus.blade.php
內容：
<html>
    <body>
        <h1>About us</h1>
        <h1>Name:{{ $name }}</h1>
        <h1>ID:{{ $id }}</h1>

        @include('subviews.input',[
            'myName'=>'this is my name',
        ])
    </body>
</html>

測試結果：

   (三)網頁參數傳值情況：
檔案：routes/web.php
內容：
Route::get('about-us/{name}/{id}',function($name,$id){
    return view('aboutus',compact('name','id'));
})

檔案：resources/views/Subviews/input.blade.php
內容：
<div>
    <label>Name</label>
    <input type="text" name="name" required value="{{ $myName }}" />
</div>

檔案：resources/views/contactus.blade.php
內容：
<div>
    <h2>Contact us</h2>
    <h1>Name:{{ request()->name }}</h1>
    <h1>ID:{{ request()->id }}</h1>
    @include('subviews.input',[
        'myName'=>request()->name,
    ])

</div>


檔案：resources/views/aboutus.blade.php
內容：
<html>
    <body>
        <h1>About us</h1>
        <h1>Name:{{ $name }}</h1>
        <h1>ID:{{ $id }}</h1>

        @include('subviews.input',[
            'myName'=>$name,
        ])
    </body>
</html>

測試結果：

七、完成之後，利用指令建立視圖快取與視圖快取清除
指令：php artisan view:cache
指令：php artisan view:clear

八、建立可重複使用的視圖模版
檔案：resources/views/aboutus.blade.php
內容：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Basic HTML5 Template</title>
        <link rel="stylesheet" href="style.css">
        <style>
            body {
                font-family: Arial, sans-serif;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                min-height: 100vh;
            }
            nav ul {
                list-style-type: none;
                padding: 0;
                background: #005bb5;
                overflow: hidden;
                display: flex;
                justify-content: center;
            }
            nav ul li {
                padding: 14px 20px;
            }
            nav ul li a {
                color: white;
                text-decoration: none;
            }
            .container {
                display: flex;
                flex: 1;
            }

            .sidebar {
                width: 250px;
                background: #f4f4f4;
                padding: 15px;
            }
            .main-content {
                flex: 1;
                padding: 20px;
            }
            footer {
                background: #004080;
                color: white;
                text-align: center;
                padding: 10px;
                position: relative;
                bottom: 0;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <div class="container">
            <aside class="sidebar">
                <h2>Sidebar</h2>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                </ul>
            </aside>
            <main class="main-content">
                <section>
                    <h2>About Us</h2>
                    <p>This is simple HTML and CSS template to start your project.</p>
                </section>
            </main>
        </div>
        <footer>
            <p>&copy; 2025 My Website. All rights reserved.</p>
        </footer>
    </body>
</html>

(一)、在views 建立子資料夾layouts，在layouts內建立app.blade.php
將aboutus.blade.php的內容複製到app.blade.php
接下來調整app.blade.php的內容如下：
檔案：resources/views/layouts/app.blade.php
內容：
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Basic HTML5 Template</title>
        <link rel="stylesheet" href="style.css">
   </head>
   @yield('style')
    <body>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <div class="container">
            <aside class="sidebar">
                <h2>Sidebar</h2>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                </ul>
            </aside>
            <main class="main-content">
                @yield('content')
            </main>
        </div>
        <footer>
            <p>&copy; 2025 My Website. All rights reserved.</p>
        </footer>
    </body>
    @yield('scripts')
</html>





於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

Laravel 12 圖片上傳與刪除記錄及文件

相關系列文章： 01. 在 windows 10 安裝 laravel 12 studentManagement環境與設定 02. laravel 12 route 路由 03. laravel 12 Blade Templates 網頁模版 04. laravel 12 Con...