Laravel 博客开发｜｜视图优化

前面已经完成了博客前端所有页面的开发，现在需要对页面视图做一些优化。

抽离公共视图

在博客中有一些重复的视图，为了后面的维护，现在需要单独抽离出来。

1. 右侧

在博客中许多页面的右边栏都是一样的，现在要把右边栏单独抽离出来。运行如下命令创建components目录：

mkdir resources/views/components

运行如下命令创建 aside.blade.php文件：

touch resources/views/components/aside.blade.php

添加如下内容：
resources/views/components/aside.blade.php

<div class="box">
    <p class="has-text-centered">站长：<a href="{{url('/contact')}}" target="_blank">SevDot</a></p>
    <hr>
    <div class="is-flex is-justify-content-center">
        <figure class="image is-96x96">
            <img class="is-rounded" style="" src="{{asset('images/sevdot_avatar.jpg')}}" alt="SevDot 的头像">
        </figure>
    </div>
    <hr>
    <div class="has-text-centered">
        <a href="https://github.com/sevdot" target="_blank" class="button is-light">
            <span class="icon"><i class="fa fa-github"></i></span>
        </a>
        <a href="https://www.weibo.com/sevdot" target="_blank" class="button is-info">
            <span class="icon"><i class="fa fa-weibo"></i></span>
        </a>
        <a href="{{url('/contact')}}" target="_blank" class="button is-success">
            <span class="icon"><i class="fa fa-weixin"></i></span>
        </a>
    </div>
</div>
<div class="box">
    <h2 class="title is-5 has-text-centered has-text-success">微信公众号</h2>
    <hr>
    <img src="{{asset('images/sevdots.png')}}" alt="">
</div>

使用如下方式引入：

<aside class="column is-3">
  @include('components/aside')
</aside>

修改相关页面，包括首页、博客页、文章详情页、项目页、项目详情等页面。

2. 文章列表

在首页和博客页都有文章列表展示，这两处有重复的视图代码，现在需要单独抽离出来。
运行如下命令创建 aside.blade.php文件：

touch resources/views/components/article_list.blade.php

添加如下内容：

@foreach($articles as $key=>$value)
    <div class="box is-flex">
        <time>{{$value->created_at->toDateString()}}</time>
        <span class="ml-1 mr-1">|</span>
        <a class="is-flex" href="{{route('article.show',$value->id)}}" title="{{$value->title}}">
            {{$value->title}}
        </a>
    </div>
@endforeach

分别修改首页和博客页，使用如下方式引入抽离的视图：

@include('components/article_list',$articles)

页面美化

导航栏下有一根白线不太好看，另外项目的封面图加弧度感觉好一点。，修改 app.scss文件，内容如下：
resources/scss/app.css

@import "~bulma";
@import "~font-awesome/css/font-awesome.css";
@import "~bulma-timeline";

.navbar {
    &.has-shadow {
        box-shadow: 0 2px 3px rgb(10 10 10 / 10%);
    }
}
.cover{
    .is-rounded-2{
        border-radius: 0.5rem;
    }
}

重新编译app.scss文件：

npm run prod

添加链接

底部和导航都没有添加跳转链接，现在加上链接，修改 header.blade.php文件，内容如下：
resources/views/layouts/header.blade.php

<nav id="navbar" class="navbar is-link has-shadow">
    <div class="container is-max-widescreen">
        <div class="navbar-brand">
            <a class="navbar-item" href="">
                <span class="logo title is-3 has-text-white">SevDot</span>
            </a>
            <div id="navbarBurger" class="navbar-burger burger" data-target="navMenu">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="navbar-menu" id="navMenu">
            <div class="navbar-start">

            </div>
            <div class="navbar-end">
                <a href="{{url('/')}}" class="navbar-item">首页</a>
                <a href="{{url('projects')}}" class="navbar-item">项目</a>
                <a href="{{url('blog')}}" class="navbar-item">博客</a>
                <a href="{{url('about')}}" class="navbar-item">关于</a>
            </div>
        </div>
    </div>
</nav>

修改 footer.blade.php文件，内容如下：
resources/views/layouts/footer.blade.php

<footer class="footer">
    <div class="has-text-centered">
        <a class="has-text-link" href="{{url('projects')}}">项目</a>
        <a class="has-text-link" href="{{url('blog')}}">博客</a>
        <a class="has-text-link" href="{{url('about')}}">关于</a>
    </div>
    <div class="has-text-centered">
        <span>©SevDot 2022. All rights reserved.</span>
        <a href="http://www.miitbeian.gov.cn/" target="_blank">滇ICP备17004667号-3</a>
    </div>
</footer>

项目页项目列表加上查看项目详情的链接：

.
.
.  
<h2 class="is-size-4">
  <a href="{{route('projects.show',$value->id)}}">{{$value->name}}</a>
</h2>
.
.
.

首页、博客页和项目页的联系加上链接：

<a href="{{url('/contact')}}" class="button is-outlined is-info">联系</a>