Khóa học fb - Duy Loi VN

Gợi ý chỉnh sửa 4: Sắp xếp theo cards masonry (hiển thị không đều chiều cao)
Nếu muốn phần bài viết xếp theo dạng "masonry" (giống Pinterest), bạn có thể dùng thư viện như Masonry.js, hoặc nhanh gọn:

blade
Copy
Edit
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
@foreach($posts as $post)
{{-- ... card như trên ... --}}
@endforeach
</div>
✅ Gợi ý nâng cao: Hiển thị ngày đăng + lượt xem
Nếu model Post có created_at và views, bạn có thể thêm:

blade
Copy
Edit
<p class="text-muted small mb-2">
{{ $post->created_at->format('d/m/Y') }} • {{ $post->views ?? 0 }} lượt xem
</p>
🔚 Kết luận
@extends('layouts.app')

@section('title', $post->title . ' - Duy Loi VN')

@section('content')
<div class="container py-5 mt-4"> {{-- Đẩy nội dung xuống dưới navbar --}}
<div class="row">
{{-- NỘI DUNG CHÍNH --}}
<div class="col-lg-9 mb-5 mb-lg-0">
<article class="bg-white p-4 p-md-5 rounded-4 shadow-sm animate__animated animate__fadeIn" style="position: relative; z-index: 2;">
{{-- Thông tin bài viết --}}
<header class="mb-4 border-bottom pb-3">
<a href="#" class="badge bg-gradient bg-primary-subtle text-primary-emphasis px-3 py-2 mb-3 rounded-pill text-decoration-none small">
{{ $post->category->name }}
</a>
<h1 class="fw-bold display-5 mt-3">{{ $post->title }}</h1>
<div class="text-muted small mt-2">
Đăng vào ngày {{ $post->created_at->format('d F, Y') }}
</div>
</header>

{{-- Ảnh đại diện --}}
<figure class="mb-5">
<img class="img-fluid w-100 rounded-4 shadow-sm" src="{{ asset('storage/' . $post->image) }}" alt="{{ $post->title }}">
</figure>

{{-- Nội dung bài viết --}}
<section class="article-content">
{!! nl2br(e($post->body)) !!}
</section>
</article>
</div>

{{-- SIDEBAR --}}
<div class="col-lg-3">
<div class="sticky-sidebar"> {{-- Thêm lớp bọc ngoài để sticky ổn định hơn --}}
<div class="p-4 bg-light rounded-4 shadow-sm">
<h5 class="fw-bold mb-3">Bài viết gần đây</h5>
<ul class="list-unstyled">
@foreach($recentPosts as $recentPost)
<li class="d-flex mb-3 align-items-start">
<a href="{{ route('blog.show', $recentPost) }}" class="text-decoration-none d-flex align-items-start recent-post-link">
<img src="{{ asset('storage/' . $recentPost->image) }}" alt="{{ $recentPost->title }}" class="me-3 rounded-3" style="width: 64px; height: 64px; object-fit: cover;">
<div>
<p class="mb-1 fw-semibold text-dark">{{ Str::limit($recentPost->title, 60) }}</p>
<small class="text-muted">{{ $recentPost->created_at->format('d/m/Y') }}</small>
</div>
</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>

{{-- Custom CSS --}}
<style>
body {
padding-top: 70px; /* Tránh bị navbar đè */
}

.article-content {
font-size: 1.1rem;
line-height: 1.8;
color: #343a40;
}

.recent-post-link:hover p {
color: var(--bs-primary);
}

.recent-post-link:hover img {
transform: scale(1.03);
}

.recent-post-link img {
transition: 0.3s;
}

/* Sticky sidebar cố định */
.sticky-sidebar {
position: sticky;
top: 90px;
z-index: 0;
}

@media (max-width: 768px) {
.article-content {
font-size: 1rem;
}

.sticky-sidebar {
position: static; /* Disable sticky trên mobile */
}
}
</style>
@endsection