隨手扎

30天成爲Laravel萌新（第12天）- 簡易Blog頁面(上)

今天要來建立一個部落格文章的極簡陋顯示頁面。

建立路由

在routes/web.php檔案中添加以下內容:

Route::group(['prefix' => 'blog',
              'as' => 'blog/',
              'namespace' => 'Blog', ],

             function(){
                  Route::get('/post/{post_id}', function($post_id){
                      $title = "Example Title";
                      $content = "Example Content";
                      return view('blog.post', [
                          "title" => $title,
                          'content' => $content,
                      ]);
                  });
              });

儘管其實完全不需要用到group，不過未來可以像其他blog系統一樣，除了有文章頁面(post)，還可以有其他獨立頁面(page)。另外，添加blog的前綴，可以將其他前綴用於其他作用，或是最後在做個轉址。總之，先選了個靈活的寫法。

其中，好好注意$title和$content這兩個參數，這兩個參數隨後會在多次變動修改，今天主要先把頁面顯示出來。

部落格文章頁面模板

接者建立resources/views/blog/post.blade.php檔案(當然需要先建立resources/views/blog資料夾)。並且上頭原本路由區用的view也可以寫為blog/post。將這份檔案簡單填入以下內容：

@extends("base",['title'=>$title]) {{-- 第二個參數可以傳遞變數給父模板，但是父模板改用插槽方式，須改用以下方式 --}}

@section('title', $title)

@section('body')
    <h1>{{$title}}</h1>
    {{$content}}
@endsection

這個頁面模板繼承了基礎頁面(base)，並填入頁面內容。不過，還沒有基礎也面阿？現在來建立resources/views/base.blade.php，並寫下以下內容：

<!doctype html>
<html lang="zh-Hant-TW">
    <head>
        <meta charset="UTF-8"/>
        <title>@yield("titile", "Example  Blog of Laravel Tutorial")</title>
    </head>
    <body>
        @section('body')
            以下是亂文內容<br/><br/><br/>

            表族汽行市一人眼要下北發上歌方了色裡十美一供賽草。一道靜日加開動在生等朋標此好過字後年的當意在了首好打。的年有字？書勢施今一題食維知海著中結少出他不對果女滿點教員種時只兒家們得城團海中子上道基新就效說空的件治：回作存金滿開連居天化急有把：下職為海樣、生起位康太定能經有冷亞又畫小書好力意賽在界了，也為低觀個極後頭明市為樂安的年懷了門，爸充防表山位早我起在樣年。動面相同東、信就學以發護，分頭客？光務天得。

            總小書，寫在友臺那論的意不有士未一國高況的陸黨族得！
        @show
    </body>
</html>

@yield和@section/@show都是允許子頁面替換填入的內容。Laravel還有@component和@slot的用法，還請自行參考文檔。

瀏覽頁面

現在瀏覽http://localhost/blog/post/12（12可以改為任意數字）。能夠看到Example Title的頁面，並有Example Content的內容。也就是在Route裡的$title和$content內容。我喜歡用Markdwon來寫文章，明天同樣會修改內容為亂數文章，再加以嘗試顯示Markdown文件。

其實我更愛Org-mode。不過單純要產生HTML頁面，Markdown更為容易。

comments powered by Disqus