构建 bootstrap 框架，并定制好基本布局
composer require laravel/ui --dev
php artisan ui bootstrap
以上命令做了以下事情：
- 在 npm 依赖配置文件 package.json 中引入 bootstrap、jquery、popper.js 作为依赖；
- 修改 resources/js/bootstrap.js ，在此文件中初始化 Bootstrap UI 框架的 JS 部分；
- 修改 resources/sass/app.scss 以加载 Bootstrap 的样式文件；
- 新增 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。