分类话题列表

app/Http/Controllers/CategoriesController.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\Topic;
+use App\Models\Category;
+
+class CategoriesController extends Controller
+{
+    public function show(Category $category)
+    {
+        // 读取分类 ID 关联的话题，并按每 20 条分页
+        $topics = Topic::where('category_id', $category->id)->paginate(20);
+        // 传参变量话题和分类到模板中
+        return view('topics.index', compact('topics', 'category'));
+    }
+}

app/helpers.php

@@ -4,3 +4,8 @@ function route_class()
 {
     return str_replace('.', '-', Route::currentRouteName());
 }
+
+function category_nav_active($category_id)
+{
+    return active_class((if_route('categories.show') && if_route_param('category', $category_id)));
+}

composer.json

@@ -14,7 +14,8 @@
         "laravel/framework": "^6.0",
         "laravel/tinker": "^1.0",
         "mews/captcha": "~3.0",
-        "overtrue/laravel-lang": "~3.0"
+        "overtrue/laravel-lang": "~3.0",
+        "summerblue/laravel-active": "6.*"
     },
     "require-dev": {
         "barryvdh/laravel-debugbar": "~3.2",

public/css/app.css

@@ -16593,31 +16593,37 @@ body {
 
 /* Topic Index Page */
 
-.topics-index-page .topic-list .nav > li > a {
+.topics-index-page .topic-list .nav > li > a,
+.categories-show-page .topic-list .nav > li > a {
   position: relative;
   display: block;
   padding: 5px 14px;
   font-size: 0.9em;
 }
 
-.topics-index-page .topic-list a {
+.topics-index-page .topic-list a,
+.categories-show-page .topic-list a {
   color: #444444;
 }
 
-.topics-index-page .topic-list .meta {
+.topics-index-page .topic-list .meta,
+.categories-show-page .topic-list .meta {
   font-size: 0.9em;
   color: #b3b3b3;
 }
 
-.topics-index-page .topic-list .meta a {
+.topics-index-page .topic-list .meta a,
+.categories-show-page .topic-list .meta a {
   color: #b3b3b3;
 }
 
-.topics-index-page .topic-list .badge {
+.topics-index-page .topic-list .badge,
+.categories-show-page .topic-list .badge {
   background-color: #d8d8d8;
 }
 
-.topics-index-page .topic-list hr {
+.topics-index-page .topic-list hr,
+.categories-show-page .topic-list hr {
   margin-top: 12px;
   margin-bottom: 12px;
   border: 0;

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/app.js": "/js/app.js?id=01f14ce060780bc99e14",
-    "/css/app.css": "/css/app.css?id=16d82e49ff7ac8ed9451"
+    "/css/app.css": "/css/app.css?id=33cafa2f6e8467258195"
 }

resources/sass/app.scss

@@ -75,7 +75,7 @@ body {
 
 
 /* Topic Index Page */
-.topics-index-page {
+.topics-index-page, .categories-show-page {
   .topic-list {
     .nav>li>a {
       position: relative;

resources/views/layouts/_header.blade.php

@@ -11,7 +11,11 @@
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <!-- Left Side Of Navbar -->
       <ul class="navbar-nav mr-auto">
-
+        <li class="nav-item {{ active_class(if_route('topics.index')) }}"><a class="nav-link" href="{{ route('topics.index') }}">话题</a></li>
+        <li class="nav-item {{ category_nav_active(1) }}"><a class="nav-link" href="{{ route('categories.show', 1) }}">分享</a></li>
+        <li class="nav-item {{ category_nav_active(2) }}"><a class="nav-link" href="{{ route('categories.show', 2) }}">教程</a></li>
+        <li class="nav-item {{ category_nav_active(3) }}"><a class="nav-link" href="{{ route('categories.show', 3) }}">问答</a></li>
+        <li class="nav-item {{ category_nav_active(4) }}"><a class="nav-link" href="{{ route('categories.show', 4) }}">公告</a></li>
       </ul>
 
       <!-- Right Side Of Navbar -->

resources/views/topics/_topic_list.blade.php

@@ -21,7 +21,7 @@
 
           <small class="media-body meta text-secondary">
 
-            <a class="text-secondary" href="#" title="{{ $topic->category->name }}">
+            <a class="text-secondary" href="{{ route('categories.show', $topic->category_id) }}" title="{{ $topic->category->name }}">
               <i class="far fa-folder"></i>
               {{ $topic->category->name }}
             </a>

resources/views/topics/index.blade.php

@@ -1,11 +1,17 @@
 @extends('layouts.app')
 
-@section('title', '话题列表')
+@section('title', isset($category) ? $category->name : '话题列表')
 
 @section('content')
 
 <div class="row mb-5">
   <div class="col-lg-9 col-md-9 topic-list">
+    @if (isset($category))
+      <div class="alert alert-info" role="alert">
+        {{ $category->name }} ：{{ $category->description }}
+      </div>
+    @endif
+
     <div class="card ">
 
       <div class="card-header bg-transparent">

routes/web.php

@@ -24,4 +24,6 @@
 
 Route::resource('users', 'UsersController', ['only' => ['show', 'update', 'edit']]);
 
-Route::resource('topics', 'TopicsController', ['only' => ['index', 'show', 'create', 'store', 'update', 'edit', 'destroy']]);
+Route::resource('topics', 'TopicsController', ['only' => ['index', 'show', 'create', 'store', 'update', 'edit', 'destroy']]);
+
+Route::resource('categories', 'CategoriesController', ['only' => ['show']]);