README

这是一个用于阿肯色大学布局和样式的库。所有样式表、JavaScript 和图片都通过 CDN 提供。

Laravel Blade

使用 composer 添加库。

composer require razorbacks/style

如果你使用的是 Laravel 5.5 或更高版本，则安装完成。但是，如果你使用的是 Laravel 5.4 或更早版本，那么你需要在你的 config/app.php 文件中手动注册服务提供者。

/*
|--------------------------------------------------------------------------
| Autoloaded Service Providers
|--------------------------------------------------------------------------
|
| The service providers listed here will be automatically loaded on the
| request to your application. Feel free to add your own services to
| this array to grant expanded functionality to your applications.
|
*/

'providers' => [

    ...

    /*
     * Package Service Providers...
     */
    razorbacks\style\laravel\StyleServiceProvider::class,

    ...

],

扩展 razorbacks::layout 视图，以下部分可用

内容
导航栏
导航栏右侧
head（部分和堆叠）
scripts（部分和堆叠）

创建包含全局元素的母版页面布局，例如 layouts/app.blade.php

@extends('razorbacks::layout')

@section('head')
    <!--
        these elements will appear on all views,
        unless explicitly overridden with a new @section('head')
    -->
    <link rel="stylesheet" href="/css/global.css">
@endsection

@section('navbar')
    <li><a href="https://example.com">Example</a></li>
@endsection

@section('navbar-right')
    <li><a href="https://example.com">Right</a></li>
@endsection

@section('scripts')
    <!--
        these scripts will appear on all views,
        unless explicitly overridden with a new @section('scripts')
    -->
    <script src="/js/global.js"></script>
@endsection

然后为特定视图扩展此布局。

@extends('layouts.app')

@push('head')
    <!-- @push these elements onto the current view -->
    <link rel="stylesheet" href="/css/local.css">
@endpush

@section('content')
    <h1>hello world</h1>
    <p>here is some content</p>
@endsection

@push('scripts')
    <!-- @push these scripts onto the current view -->
    <script src="/js/local.js"></script>
@endpush

如果你想使用默认的 Laravel 认证脚手架，那么包括了一个用于登录/注销链接的 navbar-auth 部分供扩展。

@extends('razorbacks::layout')

@section('navbar-right')
    @include('razorbacks::navbar-auth')
@endsection

为了方便，这个模板已经作为 layout-auth 包含在内供扩展。

@extends('razorbacks::layout-auth')

@section('navbar')
    <li><a href="https://example.com">Example</a></li>
@endsection

@section('content')
    <h1>hello world</h1>
    <p>here is some content</p>
@endsection

默认情况下，页面标题将是应用名称，但你可以通过将变量 $title 传递到你的视图中来覆盖它。

return view('my-view', ['title' => 'Lorem ipsum dolor']);

别忘了推送你的描述内容元标签。

@push('head')
<meta name="description" content="Lorem ipsum dolor sit amet, consectetur.">
@endpush

如果 APP_ENV 设置为除 production 之外的内容，则会显示通知。你可以通过将变量 $notice 传递到你的视图中来自定义消息，甚至可以通过在 AppServiceProvider 的 boot 方法中共享变量来在网站范围内设置它

use View;

public function boot()
{
    View::share('notice', 'Lorem ipsum dolor sit amet.');
}

如果你想自定义视图，那么你可以运行

php artisan vendor:publish --tag=views --provider="razorbacks\style\laravel\StyleServiceProvider"

然后它们将显示在你的 views/vendor/razorbacks 目录中。请注意，为了效率，它们被压缩，所以你可能需要在开发时解压缩它们。另外，内容哈希是硬编码的，所以请使用 Manifest 类来获取对版本化资产的引用。

{!! razorbacks\style\Manifest::css() !!}

将输出

<link rel="stylesheet" href="https://cdn.example.org/css/uark.3990e4a5bd9002a3753cf135b6096f73.css">

JavaScript

对于常见需求，已经启用了一些开箱即用的功能。

textarea 会自动扩展以适应文本。要禁用，请向元素或任何父元素添加类 no-autoexpand。

Google Analytics

要在所有页面上包含分析脚本，首先发布配置文件。

php artisan vendor:publish --tag=config --provider="razorbacks\style\laravel\StyleServiceProvider"

然后设置环境变量 GOOGLE_ANALYTICS_TRACKING_ID

GOOGLE_ANALYTICS_TRACKING_ID=UA-XXXXX-Y

默认 CDN

默认 CDN 是 https://cdn.walton.uark.edu，并且可以通过设置环境变量 RAZORBACKS_STYLE_CDN 来覆盖。

RAZORBACKS_STYLE_CDN=https://mydevbox.example.com npm run dev

对于生产环境，在 release.bash 中更改它。

./release.bash 1.0.1

favicon

标准favicon以及针对触控设备优化的favicon都是使用https://realfavicongenerator.net生成的

razorbacks / style

维护者

详细信息