前面的章节中，我们已经完成了创建博客逻辑，现在我们来实现博客主页逻辑。

博客 Logo

我们需要使用 $blog->logo 调用图片，但是我们数据库存储的数据是 public:*.* 这样的结构，所以，我们打开 src/Models/Blog.php 文件，在类内部添加下面的高亮代码：

  1. <?php
  3. declare(strict_types=1);
  5. namespace SlimKit\Plus\Packages\Blog\Models;
  7. use Illuminate\Database\Eloquent\Model;
  8. use Zhiyi\Plus\FileStorage\Traits\EloquentAttributeTrait as FileStorageEloquentAttributeTrait;
  10. class Blog extends Model
  11. {
  12.     use FileStorageEloquentAttributeTrait;
  14.     /**
  15.      * The table associated with the model.
  16.      *
  17.      * @var string
  18.      */
  19.     protected $table = 'blogs';
  21.     /**
  22.      * Get the route key for the model.
  23.      *
  24.      * @return string
  25.      */
  26.     public function getRouteKeyName()
  27.     {
  28.         return 'slug';
  29.     }
  31.     /**
  32.      * The blog has many articles.
  33.      */
  34.     public function articles()
  35.     {
  36.         return $this->hasMany(Article::class, 'blog_id');
  37.     }
  39.     /**
  40.      * Get the logo.
  41.      * @param null|string $logo
  42.      * @return null|mixed
  43.      */
  44.     protected function getLogoAttribute($logo)
  45.     {
  46.         if (! $logo) {
  47.             return null;
  48.         }
  50.         return $this->getFileStorageResourceMeta($logo);
  51.     }
  52. }

创建视图

我们在包里面创建一个 resources/views/blog-profile.blade.php 文件写入下面的内容：

  1. @extends('plus-blog::layout')
  2. @section('title', $blog->name)
  3. @section('head')
  4.     @parent
  5.     <meta name="keywords" content="{{ $blog->name }}" >
  6.     <meta name="description" content="{{ $blog->desc }}">
  7.     <style>
  8.         .blog-logo {
  9.             width: 140px;
  10.             height: 140px;
  11.             background-color: transparent;
  12.             border: 2px solid #fff;
  13.             border-radius: 50%;
  14.             position: relative;
  15.             top: -60px;
  16.         }
  17.         .blog-logo.text {
  18.             display: block;
  19.             font-weight: 500;
  20.             color: #fff;
  21.             text-align: center;
  22.             cursor: default;
  23.             font-size: 108px;
  24.             line-height: 140px;
  25.         }
  26.         .left-blog-box {
  27.             background-color: transparent;
  28.             margin-top: 70px;
  29.             padding: 0 20px 20px;
  30.             padding-bottom: 20px;
  31.         }
  32.         .left-blog-box.color-1 { background-color: #6f5499; }
  33.         .left-blog-box.color-2 { background-color: #d78a2f; }
  34.         .left-blog-box.color-3 { background-color: #9307db; }
  35.         .left-blog-box.color-4 { background-color: #07dbd4; }
  36.         .left-blog-box.color-5 { background-color: #41c13a; }
  37.         .left-blog-box.color-6 { background-color: #0785db; }
  38.         .left-blog-box.color-7 { background-color: #7cc67b; }
  39.         .blog-name {
  40.             font-size: 40px;
  41.             font-weight: 400;
  42.             color: #fff;
  43.             margin-top: 0;
  44.         }
  45.         .blog-desc {
  46.             display: inline-block;
  47.             margin-top: 5px;
  48.             font-size: 16px;
  49.             color: #bdb0d4;
  50.         }
  51.         .blog-state {
  52.             color: #fff;
  53.         }
  54.     </style>
  55. @endsection
  56. @section('container')
  57.     <div class="row">
  58.         <div class="col-md-5">
  59.             <div class="text-center left-blog-box">
  60.                 @if ($blog->logo)
  61.                     <img class="blog-logo" src="{{ $blog->logo->url() }}" alt="{{ $blog->name }}">
  62.                 @else
  63.                     <span class="blog-logo text center-block">{{ str_limit($blog->name, 1, '') }}</span>
  64.                 @endif
  65.                 <h2 class="blog-name">{{ $blog->name }}</h2>
  66.                 <p class="blog-desc">{{ $blog->desc ?: '😒这个用户太懒，还没有写博客描述！' }}</p>
  67.                 <div class="row blog-state">
  68.                     <div class="col-xs-6 text-left">
  69.                         {{ $blog->posts_count }}
  70.                         <span class="glyphicon glyphicon-stats"></span>
  71.                     </div>
  72.                     <div class="col-xs-6 text-right">
  73.                         {{ $blog->latest_post_sent_at }}
  74.                         <span class="glyphicon glyphicon-time"></span>
  75.                     </div>
  76.                 </div>
  77.             </div>
  78.         </div>
  79.         <div class="col-md-7">
  80.             @if (session('tip'))
  81.                 <div class="alert alert-{{ session('tip')['type'] }} text-center" role="alert">
  82.                     {{ session('tip')['message'] }}
  83.                 </div> 
  84.             @endif
  85.             @if($articles->count() > 0)
  86.                 <div class="list-group">
  87.                     @foreach($articles as $article)
  88.                         <a href="#" class="list-group-item active">
  89.                             <h4 class="list-group-item-heading">{{ $article->title }}</h4>
  90.                             <p class="list-group-item-text">{{ str_limit($article->contents, 255, '...') }}</p>
  91.                         </a>
  92.                     @endforeach
  93.                 </div>
  94.                 {{ $articles->links() }}
  95.             @else
  96.                 <div class="alert alert-warning text-center" role="alert">
  97.                     这个博客还没有文章，先去<a href="{{ route('home') }}">博客广场</a>看看吧！
  98.                 </div>
  99.             @endif
  100.         </div>
  101.     </div>
  102. @endsection
  103. @push('footer-scripts')
  104.     <script>
  105.         $(function () {
  106.             $('.left-blog-box').addClass('color-' + (Math.floor(Math.random() * 7) + 1));
  107.         });
  108.     </script>
  109. @endpush

我的博客跳转逻辑

在之前，我们开发了我的博客页面，这个页面假定用户没有博客，显示创建页面，现在，我们开发完了博客主页！所以，我们为之前页面检查用户有博客的情况下进行跳转处理！

打开 src/Web/Controllers/HomeController.php 找到 me 方法，将里面的内容修改为：

  1. if ($blog = $request->user()->blog) {
  2.     return redirect()->route('blog:profile', ['blog' => $blog]);
  3. }
  5. return view('plus-blog::create-blog');

页面预览

我们来看看我们创建完成的博客主页是什么样子的吧：

博客主页 - 图1