milose/laravel-foundation

使用 Zurb Foundation 覆盖 Laravel Auth/Pagination 视图,而不是使用 Twitter Bootstrap。

安装: 46

依赖: 0

建议者: 0

安全: 0

星级: 0

关注者: 2

分支: 0

开放问题: 0

语言:HTML

类型:laravel-plugin

v1.1.0 2017-11-01 00:37 UTC

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 重新编译资源。

##待办事项

  • 测试