哈囉大家好～
這兩天雨都下好大啊！雖然沒辦法出去曬太陽，但還是可以在家裡看電影
昨天處理完在dashboard顯示resume list的部分，今天要完成單筆resume 顯示的頁面。
那就馬上開始吧！

先透過cookie killer這個帳號創建一筆resume資料，創建按下儲存後會回到dashboard頁面，這時候archive區域裡面就會有剛剛創建的資料按鈕：(上面有顯示創建的時間）

按下按鈕後就可以預覽撰寫的resume內容：

（做完後發現這不太像resume，比較像business card，整個大離題XD只能將錯就錯了

大致介紹完介面的設計後就來看看程式碼吧！

先補上對應單筆resume預覽的路徑：(web.php)

Route::get('/resume/{id}', ResumePreview::class);

以及dashboard中resume按鈕的處理：

<a class="btn btn-dark" type="button" href="/resume/{{ $resume->id }}">
                                <h5 style="float: left;">Resume</h5>  
                                <small>
                                     <span style="float: right;">created at {{ $resume->created_at}}</span>
                                </small>
                            </a>

因為要在單筆resume頁面顯示之前撰寫的resume資料，所以會把讀取資料的邏輯寫在controller的render() function中：

public function render(Request $request)
    {
    $id = $request->route('id'); #讀取路徑中的id
    
    if (!$id) {
        dd('invalid id');
    }

    $resumeContent = Resume::find($id); #利用id讀取資料庫中對應資料（獨一無二）

    if (!$resumeContent) {
        dd('Resume not found!');
    }

    $githubUser = Auth::user();
        return view('livewire.resume-preview', 
        ['resumeContent' =>  $resumeContent, 'githubUser' => $githubUser]);
    }

這裡會import Request Object來幫忙讀取dynamic route中的"id"(路徑：/resume/{id}")，
因為每筆resume提交時都有一個auto increment的id欄位，所以這裡撈資料時只有有id作為條件判斷，並且使用find()function 來撈取確定只有一筆的資料。
因為想要在頁面顯示使用者的GitHub大頭照作為resume大頭照使用，所以也把使用者github資訊一起傳送。

再來創建顯示單筆resume頁面的component:(resume-preview.blade.php)，並將resume的內容放到對應欄位：
（因為傳送的資料是array型態，所以access特定attribute時要透過箭頭，
例如姓名：{{ $resumeContent->name }}

<div>
    <livewire:Navbar />
    <div class="card mb-3" 
            style="max-width: 800px; margin: auto auto;margin-top: 5em;">
        <div class="row g-0">
            <div class="col-md-4">
                <img src="{{ $githubUser->avatar_url }}" class="img-fluid rounded-start" alt="...">
                
                <div>
                    <div class="card-body">
                        <h4 class="card-title">
                                Contact
                        </h4>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">📧{{ $resumeContent->email }}</li>
                            <li class="list-group-item">📞{{ $resumeContent->phone }}</li>
                        </ul>
                    </div>
                </div>
                
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <h1 class="card-title">
                        {{ $resumeContent->name }}
                    </h1>
                    <p class="card-text">
                        {{ $resumeContent->selfIntro }}
                    </p>
                    <h4 class="card-title">
                        Education
                    </h4>
                    <p class="card-text">{{ $resumeContent->education }}</p>
                    <h4 class="card-title">
                        Skills
                    </h4>
                    <p class="card-text">{{ $resumeContent->skills }}</p>
                    <h4 class="card-title">
                        Languages
                    </h4>
                    <p class="card-text">{{ $resumeContent->language }}</p>
                    
                    <h4 class="card-title">
                        Reach out
                    </h4>
                    <p class="card-text">find me here👉<a href="{{ $resumeContent->social }}">My Social Media</a></p>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

最下面的社群連結直接放到a標籤裡面，透過點擊就可以直接切換到使用者輸入的社群連結。
這樣就大概完成了resume card的預覽頁面！

今天簡單介紹完頁面預覽的處理，明天想要在這個頁面新增編輯內容的功能，讓使用者可以修改並且按下儲存後直接預覽更新後的結果～
那就明天見啦 byebye