Прочитайте попередню статтю, "Перелік постів і перегляд деталей окремого поста (Створення простої сторінки блогу — Частина 3)", а також цей матеріал для Створення простого адміністратора блогу за допомогою Filament, перш ніж перейти до цього!
Для фінальної частини нашої простої сторінки блогу, ми створюємо сторінку категорій, на якій відображаються всі категорії, і користувачі можуть досліджувати пости на основі вибраної категорії. Це допоможе краще організувати наш контент і полегшить навігацію для читачів.
Не втрачайте часу! Давайте одразу перейдемо до створення нового компонента Livewire для категорій за допомогою наступної команди:
php artisan make:livewire Category/Index
Заповніть файл Category/Index.php наступним кодом для отримання всіх категорій з бази даних:
use App\Models\Category;
class Index extends Component
{
public $page = 1;
public function setPage($page)
{
$this->page = $page;
}
public function previousPage()
{
$this->page--;
}
public function nextPage()
{
$this->page++;
}
public function render()
{
$categories = Category::orderBy('created_at', 'desc')->paginate(6, ['*'], 'page', $this->page);
return view('livewire.category.index', [
'categories' => $categories
])->extends('layouts.app');
}
}
Ми все ще використовуємо ту саму техніку, яку застосовували для списку постів, підтримуючи консистентність і простоту. Також ми використаємо той самий кастомний компонент пагінації, щоб зберегти єдиний вигляд сайту.
Тепер давайте перейдемо до додавання файла blade для перегляду категорії. Ось як це зробити:
@foreach ($categories as $category)
{{ $category->name }}
{{ Str::limit($category->description, 100) }}
Total Posts: {{ $category->posts->count() }}
View All Posts
@endforeach
``` В файлі `resources/views/livewire/category/index.blade.php` ми структуруємо макет для включення списку категорій. Ось так виглядає сторінка категорій:  Це створить необхідні файли для компонента `Category/Show`. Тепер ми можемо зосередитися на отриманні та відображенні постів, пов'язаних з вибраною категорією. Не забудьте оновити файл `web.php`, щоб додати маршрути для сторінки категорії.
Додайте наступні рядки:
use App\Livewire\Category\Index as CategoryIndex;
use App\Livewire\Category\Show as CategoryShow;
Route::get('/category', CategoryIndex::class)->name('category');
Route::get('/category/{slug}', CategoryShow::class)->name('category.show');
```
З маршрутами, налаштованими в додатку, тепер можна переходити до списку категорій або переглядати пости за певною категорією на основі її slug.
Тепер давайте заповнимо файл Category/Show.php необхідною логікою для отримання та відображення постів, пов'язаних з вибраною категорією. Це забезпечить безперебійну роботу користувача під час перегляду постів за категорією.
use App\Models\Post;
use App\Models\Category;
class Show extends Component
{
public $slug;
public $category;
public $page = 1;
public function setPage($page)
{
$this->page = $page;
}
public function previousPage()
{
$this->page--;
}
public function nextPage()
{
$this->page++;
}
public function mount($slug)
{
$this->slug = $slug;
$this->category = Category::where('slug', $slug)->firstOrFail();
}
public function render()
{
$posts = Post::whereHas('category', function ($query) {
$query->where('slug', $this->slug);
})->paginate(6, ['*'], 'page', $this->page);
return view('livewire.category.show', [
'posts' => $posts
])->extends('layouts.app');
}
}
Тепер давайте перейдемо до додавання файла blade для відображення списку постів категорії, основаного на вибраній категорії:
Category : {{ Str::title($category->name) }}
@foreach ($posts as $post)
{{ $post->title }}
{{ Str::limit($post->body, 100) }}
Read More
@endforeach
``` І фінальний вигляд списку постів на основі вибраної категорії виглядає ось так: ; } ``` А для `about.blade.php` можна додати контент ось так: ```
About Our Blog
Welcome to our simple blog! Here, we share our thoughts, ideas, and updates on various topics.
Whether you're here for inspiration, learning, or just browsing, we're glad you stopped by.
Цей блог створений з урахуванням простоти та зручності використання, на основі Filament, Tailwind CSS та Livewire.
Це проєкт, з яким ми прагнемо рости, вчитися та з’єднуватися. Дякуємо, що ви частина нашої подорожі!
сторінка "Про нас"
```
І ось, сторінка "Про нас" готова! Чудовий спосіб завершити наш проєкт простого блогу та додати йому трохи особистості.
Перед тим як завершити, давайте додамо останній штрих для покращення взаємодії з користувачем: хлібні крихти. Хлібні крихти роблять навігацію зручною та допомагають користувачам орієнтуватися, де вони знаходяться на блозі. Це дрібний, але важливий елемент, який значно покращує зручність використання.
Ми реалізуємо хлібні крихти як багаторазовий компонент, щоб легко включати їх на різних сторінках. Почнемо з створення компонента хлібних крихт у директорії resources/views/components/.
Створіть файл з назвою breadcrumb.blade.php і додайте наступну структуру:
Home
@foreach ($breadcrumbs as $breadcrumb)
@if ($breadcrumb['url'])
{{ $breadcrumb['label'] }}
@else
{{ $breadcrumb['label'] }}
@endif
@unless ($loop->last)
@endunless
@endforeach
Цей компонент приймає змінну $breadcrumbs, яка містить масив посилань хлібних крихт з url та label. Наприклад, щоб використовувати його у вашому компоненті Livewire, ви можете передати дані таким чином:
public $breadcrumbs;
public function mount()
{
$this->breadcrumbs = [
['label' => 'About', 'url' => null]
];
}
_хлібні крихти на попередній сторінці_
Тепер, коли хлібні крихти на місці, навігація стала більш інтуїтивно зрозумілою, і користувачі можуть легко досліджувати ваш блог, не відчуваючи себе загубленими. Саме ці маленькі штрихи завершують проєкт і створюють довершений досвід для вашої аудиторії!
І нарешті, наша Проста сторінка блогу для Адміністратора блогу за допомогою Filament офіційно завершена! 🎉 Цей проєкт є чудовою основою, але на цьому не все. Ви можете розширити блог ще більш захоплюючими функціями, такими як розділ коментарів для взаємодії з користувачами, лайки постів для відображення популярності або навіть форму зворотного зв'язку для читачів, щоб вони могли звертатися безпосередньо.
Можливості безмежні, і з інструментами та структурою, які ми побудували, додавання нових функцій буде простим і цікавим.
Це завершує нашу серію Проста сторінка блогу, але це ще не кінець. Залишайтеся з нами, щоб дізнатися про інші серії, де ми детально розглянемо створення ще більш динамічних та складних функцій для ваших проєктів. 🚀
Перекладено з: Organizing Content with Categories and Telling Your Story on the About Page (Create Simple Blog Landing Page — Part 4)