自從上次分享主題以後，受到了不少小夥伴的關注和支援。有些小夥伴反饋不知道如何使用主題，本來去年就應該發這篇說明的，一直在忙自己的專案，沒有時間整理。正好過年放假在家，就抽時間趕緊整理出來，方便大家使用。
使用說明
1、為方便操作，我這邊先安裝一套新的專案，具體安裝過程就省略了。不明白的小夥伴可以參考Dcat-admin的安裝說明：安裝《Dcat Admin 中文文件》
2、將公共的css檔案放在目錄public/static/css/目錄下（具體也可以根據自己情況調整）
3、修改config/admin.php裡的layout.color修改成ant-blue，layout.sidebar_style修改成dark。
4、在app/Admin/bootstrap.php裡面增加以下程式碼，主要為了引入公共的CSS檔案、修改主題的顏色、初始化表格、初始化表單以及重寫Dcat-admin的部分頁面，初始化表格、初始化表單可以根據自己實際情況進行調整，也可以不要。
// 引入CSS檔案
Admin::baseCss(['/static/css/common.css']);
// 修改主題顏色
Color::extend('ant-blue', [
'primary' => '#1890ff',
'primary-darker' => '#1890ff',
'link' => '#1890ff',
]);
// 初始化表格
Grid::resolving(function (Grid $grid) {
$grid->model()->orderByDesc($grid->model()->getKeyName());
$grid->toolsWithOutline(false);
$grid->actions(function (Grid\Displayers\Actions $actions) {
$actions->disableView();
});
});
// 初始化表單
Form::resolving(function (Form $form) {
$form->disableEditingCheck();
$form->disableCreatingCheck();
$form->disableViewCheck();
$form->disableResetButton();
$form->tools(function (Form\Tools $tools) {
$tools->disableDelete();
$tools->disableView();
$tools->disableList();
});
});
// 覆蓋模板檔案
app('view')->prependNamespace('admin', resource_path('views/admin'));5、重寫表格行操作：新建檔案app/Admin/Grid/Displayers/RowActions.php，將下面程式碼複製到檔案裡，然後修改config/admin.php裡的grid.grid_action_class的值為App\Admin\Grid\Displayers\RowActions::class。
<?php
namespace App\Admin\Grid\Displayers;
use Dcat\Admin\Grid\Displayers\Actions;
use Illuminate\Contracts\View\Factory;
use Illuminate\View\View;
class RowActions extends Actions
{
/**
* @return string
*/
protected function getViewLabel()
{
$label = trans('admin.show');
return '<span class="text-success">' . $label . '</span>';
}
/**
* @return string
*/
protected function getEditLabel()
{
$label = trans('admin.edit');
return '<span class="text-primary">' . $label . '</span>';
}
/**
* @return string
*/
protected function getQuickEditLabel()
{
$label = trans('admin.edit');
$label2 = trans('admin.quick_edit');
return '<span class="text-blue-darker" title="' . $label2 . '">' . $label . '</span>';
}
/**
* @return string
*/
protected function getDeleteLabel()
{
$label = trans('admin.delete');
return '<span class="text-danger">' . $label . '</span>';
}
}
6、重寫登入頁面：新建檔案resources/views/admin/pages/login.blade.php，將下面程式碼複製到檔案裡。（不需要重寫登入頁面，可以跳過）
<style>
.login-page{background-color: #f5f5f5;}
.login-box{display: -webkit-box;display: flex;width: 750px;margin-top: -50px;}
.content-left{width: 320px;height: 500px;border-radius: 6px 0 0 6px;overflow: hidden;}
.content-right{position: relative;width: 430px;height: 500px;background-color: #fff;text-align: center;border-radius: 0 6px 6px 0;overflow: hidden;margin: 0 auto;box-shadow: 0 0 2px 0 rgba(0,0,0,.12);}
.login-card-body{width: 318px;margin: 0 auto;padding: 0;}
.login-box-msg{font-size: 26px;color: rgba(0,0,0,.8);font-weight: 700;margin-top: 80px;margin-bottom: 50px;text-align: left;line-height: 26px;padding: 0;}
.login-btn{width: 100%;height: 42px;box-shadow: none;}
.content{overflow-x: hidden;}
.form-group{margin-bottom: 30px;}
.form-group .control-label{text-align: left;width: 100%;}
.form-group .form-control{height: 42px;border: 1px solid #ebeef5;}
.form-group .form-control:focus{box-shadow: none;}
.form-label-group{margin-bottom: 30px;}
.form-control-position{width: 42px;height: 42px;line-height: 42px;}
.help-block{text-align: left;}
.copyright{position:fixed;bottom:30px;}
.copyright p{margin-bottom: 0;}
@media (max-width: 767px) {
.content-left{display: none;}
}
@media (max-width: 450px) {
.content-right{width: 100%;}
}
</style>
<div class="login-page">
<div class="login-box">
<div class="content-left">
<img width="100%" src="{{ asset('static/images/login.png') }}" alt="">
</div>
<div class="content-right">
<div class="login-card-body">
<p class="login-box-msg">{{ config('admin.name') }}，歡迎您回來</p>
<form id="login-form" method="POST" action="{{ admin_url('auth/login') }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}"/>
<fieldset class="form-label-group form-group position-relative has-icon-left">
<input
type="text"
class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }}"
name="username"
placeholder="{{ trans('admin.username') }}"
value="{{ old('username') }}"
required
autofocus
>
<div class="form-control-position">
<i class="feather icon-user"></i>
</div>
<label for="email">{{ trans('admin.username') }}</label>
<div class="help-block with-errors"></div>
@if($errors->has('username'))
<span class="invalid-feedback text-danger" role="alert">
@foreach($errors->get('username') as $message)
<span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br>
@endforeach
</span>
@endif
</fieldset>
<fieldset class="form-label-group form-group position-relative has-icon-left">
<input
minlength="5"
maxlength="20"
id="password"
type="password"
class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}"
name="password"
placeholder="{{ trans('admin.password') }}"
required
autocomplete="current-password"
>
<div class="form-control-position">
<i class="feather icon-lock"></i>
</div>
<label for="password">{{ trans('admin.password') }}</label>
<div class="help-block with-errors"></div>
@if($errors->has('password'))
<span class="invalid-feedback text-danger" role="alert">
@foreach($errors->get('password') as $message)
<span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br>
@endforeach
</span>
@endif
</fieldset>
<div class="form-group d-flex justify-content-between align-items-center">
<div class="text-left">
@if(config('admin.auth.remember'))
<fieldset class="checkbox">
<div class="vs-checkbox-con vs-checkbox-primary">
<input id="remember" name="remember" value="1" type="checkbox" {{ old('remember') ? 'checked' : '' }}>
<span class="vs-checkbox">
<span class="vs-checkbox--check">
<i class="vs-icon feather icon-check"></i>
</span>
</span>
<span> {{ trans('admin.remember_me') }}</span>
</div>
</fieldset>
@endif
</div>
</div>
<button type="submit" class="btn btn-primary float-right login-btn">
{{ __('admin.login') }}
<i class="feather icon-arrow-right"></i>
</button>
</form>
</div>
</div>
</div>
<div class="copyright">版權資訊</div>
</div>
<script>
Dcat.ready(function () {
// ajax表單提交
$('#login-form').form({
validate: true,
});
});
</script>
7、編譯主題顏色：在專案目錄執行命令：php artisan admin:minify ant-blue --color 1890ff --publish，如果大家希望修改成其他主題色，也可以參考dcat-admin的說明：主題與顏色《Dcat Admin 中文文件》
完整程式碼
連結: pan.baidu.com/s/1vH_t1zx_WCyuag-hA... 提取碼: nuqv
本作品採用《CC 協議》，轉載必須註明作者和本文連結