我们已经设计好了数据表，创建的 Blog 已经安装到了 Plus 程序上，这一章，我们来编写前台所需要的 UI 和逻辑部分。注意，这里不是去拓展 PC 的 UI，而是使用 Bootstrap 3 编写 Blog 的页面，因为我这里拟定你是使用开源版的 Plus 程序。

从这里开始，需要用到的 Laravel 知识👉Blade 模板引擎创建页面 - 图1

布局设计

在编写页面前，我们先来设计一下页面大体布局，我们先设想一下我们需要哪些页面：

  • 博客广场：用于浏览全部人的 Blogs，按照最新发布排序。页面顶部始终提醒用户创建自己的 Blog。
  • 博客主页：和「博客广场」类似，但是需要展示 Blog 信息以及这个 Blog 下的博客列表。
  • 投稿页面：共用页面，博主操纵是发布文章，其他用户是投稿文章
  • 文章阅读：文章阅读页面，底部还有评论列表。
  • 审核页面：博主审核他人文章投稿。

Layout 编写

首先，我们的前台 UI 应该有一个总图布局，所以我们在应用的 resources/views 目录下新建下面的文件并写入内容：

layout.blade.php

  1. @extends('layouts.bootstrap')
  2. @section('head')
  3.     @parent
  4.     <style>
  5.         .blog-container {
  6.             margin-top: 70px;
  7.         }
  8.     </style>
  9. @endsection
  10. @section('body')
  11.     @include('plus-blog::header')
  12.     <main class="container blog-container">
  13.         @yield('container')
  14.     </main>
  15.     @include('plus-blog::footer')
  16.     @parent
  17.     @stack('footer-scripts')
  18. @endsection

header.blade.php

  1. <header class="navbar navbar-inverse navbar-fixed-top">
  2.     <div class="container">
  3.         <div class="navbar-header">
  4.             <a class="navbar-brand" href="#">Blog</a>
  5.         </div>
  6.         <ul class="nav navbar-nav">
  7.             <li class="{{ Route::currentRouteName() === 'home' ? 'active' : '' }}">
  8.                 <a href="{{ route('home') }}">博客广场</a>
  9.             </li>
  10.             <li class="{{ Route::currentRouteName() === 'blog:me' ? 'active' : '' }}">
  11.                 <a href="{{ route('blog:me') }}">我的博客</a>
  12.             </li>
  13.         </ul>
  14.         @include('plus-blog::headers.user')
  15.     </div>
  16. </header>

footer.blade.php

  1. @section('head')
  2.     @parent
  3.     <style>
  4.         .blog-footer {
  5.             width: 100%;
  6.             background-color: #2a2730;
  7.             color: #99979c;
  8.             margin-top: 100px;
  9.             padding: 50px 0;
  10.         }
  11.     </style>
  12. @endsection
  14. <footer class="blog-footer text-center">
  15.     The Blog package MIT Licensed | Copyright © 2018-Present <a href="https://github.com/medz" target="_blank">Seven Du</a> All rights reserved.
  16. </footer>

home.blade.php

  1. @extends('plus-blog::layout')
  2. @section('title', '博客广场')

然后我们打开 routes/web.php 文件，将其默认生成的路由前缀进行修改，默认生成的是 plus-blog 我们修改为 blogs：

  1. <?php
  3. use Illuminate\Support\Facades\Route;
  4. use SlimKit\Plus\Packages\Blog\Web\Controllers as Web;
  5. use Illuminate\Contracts\Routing\Registrar as RouteRegisterContract;
  7. /*
  8. |--------------------------------------------------------------------------
  9. | Web Routes
  10. |--------------------------------------------------------------------------
  11. |
  12. | Here is where you can register web routes for your application. These
  13. | routes are loaded by the RouteServiceProvider within a group which
  14. | contains the "web" middleware group. Now create something great!
  15. |
  16. */
  18. Route::group(['prefix' => 'blogs'], function (RouteRegisterContract $route) {
  20.     // Home Router.
  21.     $route->get('/', Web\HomeController::class.'@index');
  22. });

接着我们打开包中 src/Web/Controllers/HomeController.php 文件，修改为下面的内容：

  1. <?php
  3. declare(strict_types=1);
  5. namespace SlimKit\Plus\Packages\Blog\Web\Controllers;
  7. class HomeController
  8. {
  9.     public function index()
  10.     {
  11.         return view('plus-blog::home');
  12.     }
  13. }

顶栏用户图标

我们上面创建玩基础模板了，我们来处理下顶部用户状态吧，当用户没有登录的时候我们显示「登录按钮」，登录成功后我们显示用户头像和名字。

现在我们打开包的 resources/views/header.blade.php 文件，修改为下面的内容：

  1. <header class="navbar navbar-inverse navbar-fixed-top">
  2.     <div class="container">
  3.         <div class="navbar-header">
  4.             <a class="navbar-brand" href="#">Blog</a>
  5.         </div>
  6.         <ul class="nav navbar-nav">
  7.             <li class="{{ Route::currentRouteName() === 'home' ? 'active' : '' }}">
  8.                 <a href="{{ route('home') }}">博客广场</a>
  9.             </li>
  10.             <li class="{{ Route::currentRouteName() === 'blog:me' ? 'active' : '' }}">
  11.                 <a href="{{ route('blog:me') }}">我的博客</a>
  12.             </li>
  13.         </ul>
  14.         @include('plus-blog::headers.user')
  15.     </div>
  16. </header>

然后我们创建一个 resources/views/headers/user.blade.php 文件内容如下：

  1. <ul class="nav navbar-nav navbar-right">
  2.     @if (Auth::guest())
  3.     <li><a href="{{ route('login') }}">登入</a></li>
  4.     @else
  5.     <li class="dropdown">
  6.         <a
  7.             href="#"
  8.             class="dropdown-toggle"
  9.             data-toggle="dropdown" 
  10.             role="button" 
  11.             aria-haspopup="true" 
  12.             aria-expanded="false"
  13.         >
  14.             @if (Auth::user()->avatar instanceof \Zhiyi\Plus\FileStorage\FileMetaInterface)
  15.                 @php
  16.                     $avatarUrl = Auth::user()->avatar->url();
  17.                     switch (Auth::user()->avatar->getVendorName()) {
  18.                         case 'local':
  19.                             $avatarUrl .= '?rule=h_50,w_50';
  20.                             break;
  21.                         case 'aliyun-oss':
  22.                             $avatarUrl .= '?rule=image/resize,h_50,w_50';
  23.                             break;
  24.                     }
  25.                 @endphp
  26.                 <img
  27.                     src="{{ $avatarUrl }}"
  28.                     alt="{{ Auth::user()->name }}的头像"
  29.                     style="
  30.                         width: 20px;
  31.                         height: 20px;
  32.                     "
  33.                 >
  34.             @else
  35.                 {{ Auth::user()->name }}
  36.             @endif
  37.             <span class="caret"></span>
  38.         </a>
  39.         <ul class="dropdown-menu">
  40.             @if (Auth::user()->ability('admin: login'))
  41.                 <li><a href="{{ url('/admin') }}">进入后台</a></li>
  42.             @endif
  43.             <li><a href="{{ route('logout') }}">退出登录</a></li>
  44.         </ul>
  45.     </li>
  46.     @endif
  47. </ul>

然后保存，我们就完成了用户的登录与退出（因为 Plus 自带登录页面，所以无需再写登录页面）

开源版设置 Blog 默认进入

我们的开发教程是在开源版本的 Plus 程序上进行的，是不是觉得每次都要在 URL 输入 /blogs 进入很麻烦？我们现在就来设置默认用户打开就进入 Blog 首页即可！

我们打开拓展包的 routes/web.php 文件：

  1. <?php
  3. use Illuminate\Support\Facades\Route;
  4. use SlimKit\Plus\Packages\Blog\Web\Controllers as Web;
  5. use Illuminate\Contracts\Routing\Registrar as RouteRegisterContract;
  7. Route::get('/', Web\HomeController::class.'@index');
  8. Route::group(['prefix' => 'blogs'], function (RouteRegisterContract $route) {
  9.     // TODO
  10. });

后台入口

我们覆盖了默认首页，我们自定义的页面没有了默认首页的提供的后台入口，所以我们在顶部用户图标下拉菜单中增加后台入口吧！

我们先打开包的 resources/views/headers/user.blade.php 中。在「退出登录」的 li 标签前面增加：

  1. @if (Auth::user()->ability('admin: login'))
  2.     <li><a href="{{ url('/admin') }}">进入后台</a></li>
  3. @endif

页面预览

我们这一步就开发完成了所有页面公用的 Layout 部分，我们来看看效果吧！

创建页面 - 图2