Write the Code. Change the World.

1月 19

构建 bootstrap 框架,并定制好基本布局

composer require laravel/ui --dev

php artisan ui bootstrap

以上命令做了以下事情:

  1. 在 npm 依赖配置文件 package.json 中引入 bootstrap、jquery、popper.js 作为依赖;
  2. 修改 resources/js/bootstrap.js ,在此文件中初始化 Bootstrap UI 框架的 JS 部分;
  3. 修改 resources/sass/app.scss 以加载 Bootstrap 的样式文件;
  4. 新增 resources/sass/_variables.scss 样式配置文件。

运行 Laravel Mix

Laravel Mix 一款前端任务自动化管理工具,使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API,让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器,通过简单的调用,你可以轻松地管理前端资源。

使用 Mix 很简单,首先你需要使用以下命令安装 npm 依赖即可。我们将使用 Yarn 来安装依赖,在这之前,因为国内的网络原因,我们还需为 NPM 和 Yarn 配置安装加速:

npm config set registry=https://registry.npm.taobao.org
yarn config set registry https://registry.npm.taobao.org

# 查看镜像
npm get registry 
yarn config get registry

yarn install

yarn run watch-poll

下边进行基础布局

基础布局

先规划好好路由

vim route/web.php

Route::namespace('Web')->group(function() {

    Route::get('/', 'PageController@home')->name('home');

    Route::get('search', 'PageController@search')->name('search');

});

// Auth::routes();

// vendor/laravel/framework/src/Illuminate/Routing/Router.php
// 用户身份验证相关的路由
Route::get('login', 'Auth\LoginController@showLoginForm')->name('login');
Route::post('login', 'Auth\LoginController@login');
Route::post('logout', 'Auth\LoginController@logout')->name('logout');

// 用户注册相关路由
Route::get('register', 'Auth\RegisterController@showRegistrationForm')->name('register');
Route::post('register', 'Auth\RegisterController@register');

// 密码重置相关路由
Route::get('password/reset', 'Auth\ForgotPasswordController@showLinkRequestForm')->name('password.request');
Route::post('password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail')->name('password.email');
Route::get('password/reset/{token}', 'Auth\ResetPasswordController@showResetForm')->name('password.reset');
Route::post('password/reset', 'Auth\ResetPasswordController@reset')->name('password.update');

// Email 认证相关路由
Route::get('email/verify', 'Auth\VerificationController@show')->name('verification.notice');
Route::get('email/verify/{id}', 'Auth\VerificationController@verify')->name('verification.verify');
Route::get('email/resend', 'Auth\VerificationController@resend')->name('verification.resend');

Route::get('start_gee', 'Auth\RegisterController@start_gee')->name('start_gee');

再创建控制器

php artisan make:controller Web/PageController

# PageController 中添加
public function home()
{
    return view('pages.home');
}

public function search()
{
    return 'will search';
}

再构建基础布局

layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1">

  <!-- CSRF Token -->
  <meta name="csrf-token" content="{{ csrf_token() }}">

  <title>@yield('title', '约拍宝')</title>
  <meta name="keywords" content="@yield('keywords', '约拍宝,约拍,爱约拍,同城约拍,摄影,摄影爱好,摄影分享,摄影交流')" />
  <meta name="author" content="vini123" />
  <meta name="email" content="vini123@live.cn" />
  <meta name="web" content="https://vini123.com" />
  <meta name="description" content="@yield('description', '约拍宝,是一个为摄影师和模特提供一个交流,促成创作的一个平台。爱摄影,爱约拍宝')" />
  <meta name="baidu-site-verification" content="约拍宝,约拍, 爱约拍,同城约拍,摄影,摄影爱好,摄影分享,摄影交流" />
  <meta name="baidu_union_verify" content="约拍宝,约拍,爱约拍,同城约拍,摄影,摄影爱好,摄影分享,摄影交流" />

  <link rel="icon" href="{{ asset('favicon.ico') }}" mce_href="{{ asset('favicon.ico') }}" type="image/x-icon" />

  <!-- Styles -->
  <link href="{{ mix('static/style/css/app.css') }}" rel="stylesheet">
  <link rel="stylesheet" href="{{ asset('static/style/css/nprogress.min.css') }}">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1357077_b5i2v8i3jyj.css">

  @yield('style')
</head>

<body>
  <div id="app" class="{{ route_class() }}-page">
    @if(\Route::currentRouteName() != 'login' && \Route::currentRouteName() != 'register')
    @include('layouts._header')
    @endif

    @include('shared._messages')

    @yield('content')

    @if(\Route::currentRouteName() != 'login' && \Route::currentRouteName() != 'register')
    @include('layouts._footer')
    @endif
  </div>

  <!-- Scripts -->
  <script src="{{ mix('static/style/js/app.js') }}"></script>
  <script src="{{ asset('static/style/js/nprogress.min.js') }}"></script>
  @yield('script')
</body>
</html>

shared/_message.blade.php

@foreach (['danger', 'warning', 'success', 'info'] as $msg)
  @if(session()->has($msg))
    <div class="flash-message text-center">
      <p class="alert alert-{{ $msg }}">
        {{ session()->get($msg) }}
      </p>
    </div>
  @endif
@endforeach

layouts/_header.blade.php

<nav class="container-fluid header">
    <div class="navbar-translate">
        <a class="logo" href="{{ route('home') }}">
            <img title="约拍宝" src="{{ url('static/image/common/logo.png') }}" />
        </a>
    </div>

    <div class="navbar-collapse">
        <button class="navbar-toggler" type="button" data-toggle="navbar-collapse">
            <span class="navbar-toggler-icon"></span>
            <span class="navbar-toggler-icon"></span>
            <span class="navbar-toggler-icon"></span>
        </button>

        <ul class="navbar-nav">
            <li class="nav-item {{is_activity(['home'])}}">
                <a href="{{route('home')}}" class="nav-link">首页</a>
            </li>
        </ul>

        <ul class="navbar-user">
            <li class="search">
              <form method="GET" action="{{ route('search') }}" accept-charset="UTF-8" class="navbar-form navbar-left">
                <div class="input-group">
                    <input class="form-control" placeholder="搜索" name="q" type="text" value="">
                    <i class="iconfont icon-sousuo"></i>
                </div>
              </form>
              <div class="line-father">
                  <div class="line"></div>
              </div>
            </li>

            <!-- 登录或用户信息 -->
            @guest
            <li class="nav-item">
                <a class="login-btn" href="{{ route('login') }}">登录</a>
            </li>
            <li class="nav-item">
                <a class="register-btn" href="{{ route('register') }}">注册</a>
            </li>
            @else
            <li class="nav-item avatar-item">
                <img  class="avatar" src="{{Auth::user()->avatar}}" />
            </li>
            <div class="user-box">
                <div class="box-header">
                    <img class="avatar" src="{{Auth::user()->avatar}}" />
                    <div class="name-id">
                        <span class="line-clamp-1">{{Auth::user()->nickname}}</span>
                        <span>id:{{Auth::user()->viewid}}</span>
                    </div>
                </div>

                <div class="box-body">
                    <a href="{{ route('users.show', Auth::id()) }}"><i class="iconfont icon-gerenzhongxin"></i><span>个人中心</span></a>
                    <a href="{{ route('users.edit', Auth::id()) }}"><i class="iconfont icon-bianjiziliao"></i><span>编辑资料</span></a>
                    @if(count(Auth::user()->getAllPermissions()) > 0)
                    <a href="{{ route('admin.home') }}"><i class="iconfont icon-kongzhitai"></i><span>后台管理</span></a>
                    @endif
                </div>

                <div class="box-footer">
                    <a href="{{ route('logout') }}" onclick="event.preventDefault();document.getElementById('logout-form').submit();">
                        退出
                    </a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                        {{ csrf_field() }}
                    </form>
                </div>
            </div>
            @endguest
        </ul>
    </div>
</nav>

layouts/_footer.blade.php

<div class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4 d-none d-md-block">
        <ul>
          <li>友情链接</li>
          <li><a target="_blank" href="https://www.rhbody.com">稀有血型的人们网</a></li>
          <li><a target="_blank" href="https://www.mlxiu.com">美丽秀</a></li>
          <li><a target="_blank" href="https://www.zeipan.com">贼盘</a></li>
        </ul>
      </div>

      <div class="col-md-4 d-none d-md-block">
        <ul>
          <li>联系与合作</li>
          <li><a target="_blank" href="https://www.yueqiubao.net">联系我们</a></li>
        </ul>
      </div>

      <div class="col-md-4">
        <ul>
          <li>关注我们</li>
          <li><img class="wechat" src="{{ url('static/image/common/wx-qrcode.jpg') }}" /></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="container">
    <a target="_blank" href="http://beian.miit.gov.cn/">沪ICP备13044131号</a>
  </div>
</div>

创建 home.scss

vim sass/pages/home.scss

# 添加样式
.home-page {
  margin-top: 30px;
}

修改

mix.js('resources/js/app.js', 'public/static/style/js')
   .sass('resources/sass/app.scss', 'public/static/style/css')
   .sass('resources/sass/pages/home.scss', 'public/static/style/css/pages/home.css')
   .version();

创建 home.blade.php

touch resouces/pages/home.blade.php

编辑 home.blade.php

@extends('layouts.app')
@section('title', '约拍宝')

@section('style')
<link href="{{ mix('static/style/css/pages/home.css') }}" rel="stylesheet">
@endsection

@section('content')
  <div class="container">
      <div style="font-size: 14px; line-height: 30px; color: #666; margin-bottom: 30px;">烟花飞腾的时候,火焰掉入海中。遗忘就和记得一样,是送给彼此最好的纪念。爱从来都不是归宿,也不是彼此最好的救赎。</div>
      <div style="font-size: 14px; line-height: 30px; color: #666; margin-bottom: 30px;">仿佛有痛楚。如果我晕眩。那是因为幻觉丰盛,能量薄弱。足以支持我对你的迷恋,不过支持我们的快乐。</div>
      <div style="font-size: 14px; line-height: 30px; color: #666; margin-bottom: 30px;">天没有边,没有界。心是花园也是荒野。光阴在花绽开中消亡,歌舞却永不停下。将一片云纱与你。敢不敢,愿不愿,一起飞越长空。</div>
      <div style="font-size: 14px; line-height: 30px; color: #666; margin-bottom: 30px;">一道电光劈开天幕。苍穹间有笔疾书,叫做战胜脆弱。</div>
      <div style="font-size: 14px; line-height: 30px; color: #666; margin-bottom: 30px;">虚幻之物对应着冥冥之路。</div>
      <div style="font-size: 14px; line-height: 30px; color: #666; margin-bottom: 30px;">舞低杨柳楼心月,歌尽桃花扇底风。从别后,忆相逢,几回魂梦与君同。</div>
      <div style="font-size: 14px; line-height: 30px; color: #666; margin-bottom: 30px;">风乍起,吹皱一池春水。闲引鸳鸯香径里,手挼红杏蕊。斗鸭阑干独倚,碧玉搔头斜坠。终日望君君不至,举头闻鹊喜。</div>
      <div style="font-size: 14px; line-height: 30px; color: #666; margin-bottom: 30px;">多少恨,昨夜梦魂中。还似旧时游上苑,车如流水马如龙。花月正春风。</div>
      <div style="font-size: 14px; line-height: 30px; color: #666; margin-bottom: 30px;">一百年前,你不是你,我不是我。眼泪是真的,悲哀是假的。本来没因果。一百年后,没有你,也没有我。</div>
  </div>
@stop

编辑辅助函数,增加下边的函数

vim app/helpers.php

<?php

function dda($model)
{
    if (method_exists($model, 'toArray')) {
        dd($model->toArray());
    } else {
        dd($model);
    }
}

function route_class()
{
    return str_replace('.', '-', Route::currentRouteName());
}

function is_activity(Array $array)
{
    if (in_array(Route::currentRouteName(), $array, true)) {
        return 'active';
    }

    return '';
}

最后,yarn run watch-poll 。 成功后,打开首页看看效果。发现一团糟。下边修改样式。

增加样式

修改 sacss/app.scss

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

/**
 * ---------------------开始------------------------------- 
 **/ 
$mine-color:#ECB34D;

html, body {
    height: 100%;
    color: #636b6f;
    background: #f4f4f4;
    font-family: "PingFang SC","微软雅黑","Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,Arial,sans-serif;
    font:14px/1.5 "PingFang SC","微软雅黑","Microsoft YaHei",Helvetica,"Helvetica Neue",Tahoma,Arial,sans-serif;
}


.pusher {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: 100%;

    .main {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
    }
}

a, a:link, a:active, a:hover, a:visited, a:focus{
    text-decoration: none;
    list-style: none;
    outline: none;
    cursor: pointer;
}

ul{
    list-style: none;
    list-style-type: none;
}

button:focus,
button:active:focus,
button.active:focus,
button.focus,
button:active.focus,
button.active.focus {
    outline: none;
}

.btn-primary {
  color: #fff !important;
}

// 进度条颜色
/*Loading 颜色*/
#nprogress .bar{
  background: $mine-color !important;
}

/**
 * ---------------------结束------------------------------- 
 **/ 

/*定义浏览器下拉条样式*/
body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

body::-webkit-scrollbar-button {
  display: none;
}

body::-webkit-scrollbar-track {
  background-color: black;
}

body::-webkit-scrollbar-track-piece {
  background: #ffffff;
}

body::-webkit-scrollbar-thumb {
  background-color: #8E8E8E;
  border-radius: 3px;
}

body::-webkit-scrollbar-thumb:hover {
  background-color: #3b3b3b;
}

body::-webkit-scrollbar-resizer {
  background-color: $mine-color;
}

/* header begin */
.header{
  display: flex;
  height: 72px;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,.12), 0 4px 7px -4px rgba(0,0,0,.15);

  .navbar-translate{
    display: flex;
    align-items: center;
    transition: all .5s cubic-bezier(.685,.0473,.346,1);
  }

  .logo{
    display:inline-block;
    margin: 0 60px 0 30px;

    img{
      width: 60px;
      height: 60px;
    }
  }

  .navbar-collapse{
    display: flex;
    justify-content: space-between;

    .navbar-toggler{
      position: absolute;
      top: 20px;
      left: -50px;
      display:flex;
      flex-direction: column;
      justify-content: space-around;
      height: 30px;
      display:none;

      .navbar-toggler-icon {
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background-color: #555;
      }
    }

    .navbar-toggler:hover > .navbar-toggler-icon{
      background-color: $mine-color;
    }

    // 导航
    .navbar-nav{
      flex-direction: row;

      .nav-item{
        padding: 9px 15px;
        border-radius: 4px;
        color: #383838;
        margin-right: 12px;

        .nav-link{
          padding: 0 !important;
          background-color:inherit !important;
          font-weight: 300 !important;
          font-size: 16px !important;
          line-height: 20px !important;
          color: #383838;
        }
      }

      .nav-item.active{
        background-color: $mine-color;
      }

      .nav-item.active >.nav-link{
        color: #fff;
      }

      .nav-item:not(.active):hover{
        background-color: $mine-color;
      }

      .nav-item:not(.active):hover >.nav-link{
        color: #fff;
      }
    }

    // 用户信息
    .navbar-user{
      display: flex;
      height: 72px;
      padding:0 20px 0 0;
      margin-bottom: 0;
      position: relative;

      .search{
        display: inline-block;
        height: 48px;
        margin-right: 50px;
        margin-top: 12px;
        position: relative;

        .line-father {
          display: flex;
          justify-content: center;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;

          .line {
            width: 100%;
            height: 1px;
            background-color: #D9DDE1;
          }
        }

        i{
          width: 24px;
          cursor: pointer;
        }

        input{
          width: 180px;
          height: 48px;
          line-height: 48px;
          border: none;
          color: #71777d;
          background-color: transparent!important;
        }

        input:focus{
          box-shadow: none;
        }

        .input-group{
          height: 48px;
          line-height: 48px;
        }
      }

      @keyframes inputFocus {
        0%   {width: 100%; background-color: #D9DDE1;}
        25%  {width: 40%; background-color: #D9DDE1;}
        50%  {width: 0%; background-color: #D9DDE1;}
        75%  {width: 40%; background-color: $mine-color;}
        100% {width: 100%; background-color: $mine-color;}
      }

      .search:hover {
        .line { 
          animation:inputFocus 0.6s;
          animation-fill-mode: forwards;
        }

        i{
          color: $mine-color;
        }
      }

      .nav-item {
        display: flex;
        align-items: center;
      }

      .login-btn {
        margin-right: 20px;
      }

      // 头像
      .avatar {
        width:44px;
        height: 44px;
        border-radius: 50%;
        margin-right: 20px;
        cursor: pointer;
      }

      .avatar-item:hover + .user-box{
        opacity: 1;
        top: 72px;
        visibility: visible;
      }

      .user-box:hover{
        opacity: 1;
        top: 72px;
        visibility: visible;
      }

      // 用户
      .user-box {
        display: flex;
        flex-direction: column;
        width: 280px;
        box-sizing: border-box;
        padding: 20px;
        background-color: #fff;
        border-radius: 0 0 6px 6px;
        position: absolute;
        right: 0;
        top: 60px;
        z-index: 9999;
        opacity: 0;
        visibility:hidden;
        transition: 0.6s opacity, 0.4s top;
        box-shadow: 0 8px 16px 0 rgba(7,17,27,0.2);

        .box-header {
          display: flex;
          align-items: center;

          .avatar{
            width: 64px;
            height: 64px;
            margin-right: 10px;
            margin-top: 0;
          }

          .name-id {
            display: flex;
            flex-direction: column;

            span:first-child {
              margin-bottom: 10px;
              max-width: 200px;
            }

            span:last-child {
              font-size: 12px;
              color: #93999F;
            }
          }
        }

        .box-body {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          margin-top: 20px;

          a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 118px;
            height: 32px;
            margin-top: 4px;
            font-size: 13px;
            color: #383838;
            background-color: #F8FAFC;
            border-radius: 4px;

            i {
              margin-right: 5px;
              font-size: 12px;
            }
          }

          a:hover {
            color: #fff;
            background-color: $mine-color;
          }
        }

        .box-footer {
          margin-top: 20px;

          a {
            color: #93999F;
            font-size: 12px;
          }

          a:hover {
            color: #383838;
          }
        }

      }
    }
  }
}
/* header end */

// footer
.footer{
  width: 100%;
  background-color:#353535;
  padding: 20px 0;

  .col-md-4 {
    text-align: center;

    ul {
      display: inline-block;
    }

    li {
      font-size: 16px;
      color: #ddd;
      margin-top: 15px;
      text-align: left;

      a {
        color: #bbb;
        font-size: 14px;
      }

      a:hover{
        color: #ddd;
      }
    }

    li:first-child {
      margin: 0 0 20px 0;
    }

    .wechat{
      width: 150px;
      height: 150px;
      border-radius: 6px;
    }
  }

  .container {
    text-align: center;
    font-size: 14px;
    a {
      color: #bbb !important;
    }

    a:hover{
      color: #ddd !important;
    }
  }
}

// 对导航自适应
@media (max-width: 991.98px) {
  #bodyClick {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: auto;
    right: 280px;
    content: "";
    cursor: pointer;
    z-index: 1029;
    background-color: rgba(0, 0, 0, 0.0);
    overflow-x: hidden;
  }

  .header {
    .navbar-collapse-open {
      transform: translate3d(0,0,0) !important;
    }

    .logo {
      margin: 0px !important;
    }

    .navbar-collapse {
      display: flex;
      flex-direction: column;
      justify-content: flex-start !important;
      width: 280px;
      height: 100vh;
      background-color: #fff;
      position: fixed;
      z-index: 9999;
      top: 0;
      right: 0;
      transform: translate3d(281px, 0, 0);
      transition: 0.5s transform;

      .navbar-toggler {
        display: flex !important;
      }

      .navbar-nav {
        display: flex;
        flex-direction: column !important;
        width: 100%;
        text-align: center;

        .nav-item {
          border-radius: 0 !important;
          margin-right: 0 !important;
        }
      }

      .navbar-user {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 280px;
        padding: 0 !important;

        .search {
          width: 240px;
          margin-right: 0 !important;
          margin-bottom: 5px;
        }

        .nav-item {
          justify-content: center;
          width: 100%;
          margin-top: 15px;

          .avatar {
            display: none;
          }
        }

        .login-btn {
          margin-right: 0;
        }

        .user-box {
          opacity: 1 !important;
          top: 72px !important;
          visibility: visible !important;
          box-shadow: none;
        }
      }
    }
  }

  /* 对其他的影响 */
  .header{
    box-shadow: none;
  }

  body{
    background-color: #fff;
  }
}

// 验证邮箱,重设密码

.verification-notice-page, .password-request-page, .password-reset-page {
  margin-top: 30px;
}

// 对底部进行适配处理
@media (max-width: 768px) {
  .footer ul {
    padding-inline-start: 0 !important;
  }

  .footer li {
    text-align: center !important;
  }

  .footer {
    .col-md-4 {
      li:first-child {
        margin: 0 0 15px 0;
      }
    }
  }
}

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {

}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {

}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {

}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) {

}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {

}

// 字体大小
.text-size-12 {
  font-size: 12px;
}

.text-size-13 {
  font-size: 13px;
}

.text-size-14 {
  font-size: 14px;
}

.text-size-15 {
  font-size: 15px;
}

.text-size-16 {
  font-size: 16px;
}

.text-size-17 {
  font-size: 17px;
}

.text-size-18 {
  font-size: 18px;
}

.text-size-19 {
  font-size: 19px;
}

.text-size-20 {
  font-size: 20px;
}

.text-size-21 {
  font-size: 21px;
}

.text-size-22 {
  font-size: 22px;
}

.text-size-23 {
  font-size: 23px;
}

// 颜色
.text-color-1 {
    color: #ecb34d !important;
}

.text-color-2 {
    color: #ffffff !important;
}

.text-color-3 {
    color: #383838 !important;
}

.text-color-4 {
    color: #707070 !important;
}

.text-color-5 {
    color: #9f9f9f !important;
}

.text-color-6 {
    color: #e9e9e9 !important;
}

.text-color-7 {
    color: #fe0000 !important;
}

.text-color-clip {
    background-image: linear-gradient(to right, #ffd500, #ecb34d 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

// 背景颜色
.bg-color-1 {
    background-color: #ecb34d !important;
}

.bg-color-2 {
    background-color: #ffffff !important;
}

.bg-color-3 {
    background-color: #f2f2f2 !important;
}

// 成功颜色
.bg-color-4 {
    background-color: #74cb5d !important;
}

.bg-color-clip {
    background: linear-gradient(to right, #ffd500, #ecb34d 70%) !important;
}

// border
.border-none {
    border: none !important;
}

.border-color-1 {
    border-color: #ecb34d !important;
}

.border-color-2 {
    border-color: #f2f2f2 !important;
}

.border-color-3 {
    border-color: #383838 !important;
}

.border-color-4 {
    border-color: #707070 !important;
}

.border-color-5 {
    border-color: #9f9f9f !important;
}

// 文本粗
.bold {
    font-weight: 600;
}

.line-clamp-1 {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.line-clamp-2 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: 2;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-wrap: break-word;
}

.line-clamp-3 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: 3;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-wrap: break-word;
}

编辑首页样式 sacss/pages/home.scss

.home-page {
  .container {
    margin-top: 30px;
  }
}

自定义 bootstrap 样式 sacss/_variables.scss

// Body
$body-bg: #f8fafc;

// Typography
$font-family-sans-serif: 'Nunito', sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;

$primary:     #ECB34D !default;
$success:     #44b549 !default;

// Colors
$blue: #3490dc;
$indigo: #6574cd;
$purple: #9561e2;
$pink: #f66d9b;
$red: #e3342f;
$orange: #f6993f;
$yellow: #ffed4a;
$green: #38c172;
$teal: #4dc0b5;
$cyan: #6cb2eb;

编辑 js/bootstrap.js, 加入下边的 js

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

编辑 js/app.js 加入下边的代码

// 侧滑导航功能
$(document).on('click', '.navbar-toggler', function(){
    var link = $(this).data('toggle');
    var openlink = link + '-open';

    if($('.' + link).hasClass(openlink))
    {
        $('.' + link).removeClass(openlink);
        $('#bodyClick').remove();
        $('body').removeAttr('style');
        document.removeEventListener("touchmove", mobileScroll, false);
    }
    else
    {
        const h1 = $(window).height();
        const h2 = $(document).height();
        $('.' + link).addClass(openlink);
        $('body').append('<div id="bodyClick"></div>');
        if (h1 == h2) {
            $('body').css({overflow:'hidden'});
        } else {
            $('body').css({overflow:'hidden', 'margin-right': '6px'});
        }
        document.addEventListener("touchmove", mobileScroll, false);//禁止页面滑动
    }
}).on('click', '#bodyClick', function(){
    $('.navbar-collapse').removeClass('navbar-collapse-open');
    $('#bodyClick').remove();
    $('body').removeAttr("style");
    document.removeEventListener("touchmove", mobileScroll, false);
});

function mobileScroll() {

}

$('.search i').click(function(){
    $('.search form').submit();
});

// 进度条
NProgress.configure({ showSpinner: false });
NProgress.start();

$(window).on("load", function(){
    NProgress.done();
});

再编译,再打包 js,css

下一节,处理这个过程中的bug。

发表评论

电子邮件地址不会被公开。 必填项已用*标注