milose / laravel-foundation
使用 Zurb Foundation 覆盖 Laravel Auth/Pagination 视图,而不是使用 Twitter Bootstrap。
Requires
- php: ^5.6|^7.0
This package is not auto-updated.
Last update: 2024-09-28 20:03:39 UTC
README
使用 Zurb Foundation 覆盖 Laravel Auth/Pagination 视图,而不是使用 Twitter Bootstrap。
1. 安装
要安装此包,请运行
composer require milose/laravel-foundation
如果您正在使用 Laravel 版本 >= 5.5,则可以跳过下一步。
通过找到 providers 键并将以下内容添加到列表末尾,将服务提供者添加到您的 config/app.php 文件中
Milose\LaravelFoundation\LaravelFoundationServiceProvider::class,
2. 使用视图
Auth 框架
为了使 Laravel 能够使用自定义的认证视图,我们必须将这些包特性导入到适当的控制器中。这些特性通过更新的视图名称覆盖了原始方法。
打开 app/Http/Controllers/Auth 目录下的所有文件,并在每个特性之前添加 \Milose\LaravelFoundation\Auth\ 以覆盖默认视图。例如,Login 控制器特性在类内部应如下所示
use \Milose\LaravelFoundation\Auth\AuthenticatesUsers;
而不是
use AuthenticatesUsers;
对所有文件都执行此操作。
分页
在您的 blade 文件中,您可以通过添加以下内容来按常规 paginate
{{ $users->links('lf::pagination.default') }}
或者如果您使用的是 simplePaginate,则添加
{{ $users->links('lf::pagination.simple') }}
3. 自定义视图
如果您想更改视图的外观,您需要通过运行以下命令将它们发布到您的 resources/views/vendor 目录中
php artisan vendor:publish --tag=lf
之后,在 resources/views/vendor/laravelFoundation 中,您将找到认证和分页的 Blade 模板。
4. 将 Zurb Foundation 添加到您的项目
导入 npm 包并复制设置和工具,以便您可以自定义 Foundation
yarn add foundation-sites motion-ui --dev mkdir resources/assets/sass/foundation/ cp node_modules/foundation-sites/scss/settings/_settings.scss resources/assets/sass/foundation/ cp -R node_modules/foundation-sites/scss/util/ resources/assets/sass/foundation/util/
SCSS
在您的 resources/assets/sass/app.scss 文件中删除
// Bootstrap @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
并添加
// Foundation @import 'node_modules/foundation-sites/scss/foundation'; @import "foundation/settings"; @include foundation-everything; //or @include only the components you need // Motion-Ui @import 'node_modules/motion-ui/motion-ui'
JavaScript
在您的 resources/assets/js/bootstrap.js 文件中删除
require('bootstrap-sass');
并添加
require('motion-ui') require('what-input') require('foundation-sites') // or individual components $(document).ready(function() { $(document).foundation() })
然后运行 gulp 重新编译资源。
##待办事项
- 测试