arris / voyager-frontend
Requires
- pvtl/voyager-blog: ^0.2.10
- pvtl/voyager-pages: ^0.2.13
- spatie/laravel-sitemap: ^6
- tcg/voyager: ^1.3
Requires (Dev)
This package is auto-updated.
Last update: 2024-09-25 05:09:15 UTC
README
为了使用此包和更多现代功能,需要更新依赖。我已经完成了更新,并将其注册到 Packagist,因此可以继续使用此包。欢迎提交 PR 以进行持续更新。
Voyager 前端
缺失的 Laravel 管理后台前端。
此 Laravel 包为 Voyager 项目添加前端视图、路由和资源。
它包含前端布局的基本结构(例如,页眉、页脚等)和使用 Foundation 框架的主题资源。
由 Pivotal Agency 构建。
先决条件
- PHP >= 7.1.3
- PHP 扩展
sqlite3
(用于teamtnt/tntsearch
)
- PHP 扩展
- Node & NPM
- Composer
- Laravel 需求
安装
1. 安装 Laravel + Voyager (用您自己的值替换 $VARs)
# 1.0 Install Laravel
composer create-project --prefer-dist laravel/laravel $DIR_NAME
# 1.1 Require Voyager
cd $DIR_NAME && composer require tcg/voyager
# 1.2 Copy .env.example to .env and update the DB & App URL config
cp .env.example .env
# 1.3 Generate a Laravel key
php artisan key:generate
# 1.4 Install Laravel frontend - Only on Laravel 7+
php artisan ui bootstrap --auth
# 1.5 Run the Voyager Installer
php artisan voyager:install
# 1.6 Create a Voyager Admin User
php artisan voyager:admin $YOUR_EMAIL --create
2. 安装 Voyager 前端
# 2.0 Require this Package in your fresh Laravel/Voyager project
composer require pvtl/voyager-frontend
# 2.1 Run the Installer
composer dump-autoload && php artisan voyager-frontend:install
# 2.3 Build the front-end theme assets
npm install
npm run dev
# 2.4 Set the Laravel search driver in your .env
echo "SCOUT_DRIVER=tntsearch" >> .env
有任何问题?请参阅下面的故障排除部分。
“已获取 Cron”吗?
这是一个提醒,在您的服务器上设置标准的 Laravel cron。Voyager 前端包有几个计划任务,因此依赖于 cron 运行。
* * * * * php /path-to-your-project/artisan schedule:run >> /dev/null 2>&1
主题开发
SCSS & JS
当您准备好开始美化前端时,可以在更新 SCSS 和/或 JS 文件后使用以下命令
命令 | 描述 |
---|---|
npm run watch | 监视 /resources/assets 的任何更改并立即构建 |
npm run dev | 按需构建 SCSS/JS |
npm run prod | 按需构建 SCSS/JS,但这次输出的是压缩后的结果 |
覆盖视图
假设您想更新前端页眉的布局
- 创建目录
resources/views/vendor/voyager-frontend
- 您放入这里的任何文件都将替换此包附带的自定义视图
- 从
vendor/pvtl/voyager-frontend/resources/views/
(在本例中,为partials/header.blade.php
)复制相应的文件到相应的文件结构并更新
因此现在您将拥有
/resources
/views
/vendor
/voyager-frontend
/partials
/header.blade.php
对 header.blade.php
的任何更改都将自动反映在网站上。
缩略图/图像调整大小
此包包含一个自动图像调整大小的功能。当您在前端 blade 模板中引用图像时,只需调用类似以下的内容
{{ imageUrl($pathToImage, $width, $height, $config = ['crop' => false, 'quality' => 100] ) ?: '/default.png' }}
<!-- For example for a 300px wide thumbnail scaled down (i.e. no cropping) -->
<img src="{{ imageUrl($blockData->image, 300, null, ['crop' => false]) ?: '/default.png' }}" />
<!-- Or a 200px by 100px cropped thumbnail -->
<img src="{{ imageUrl($blockData->image, 200, 100) ?: '/default.png' }}" />
“CDN”您的图像
该函数将输出一个绝对 URL,其中主机名为 APP_URL
- 但是您可以在 .env
文件中添加一个 ASSET_URL
变量以使用不同的主机名。
搜索
生成索引
此模块包含一个计划任务来重新生成索引,一旦您为 Laravel 设置了任务,它将自动运行。如果您需要测试和重新生成搜索索引,可以手动运行命令 php artisan voyager-frontend:generate-search-indices
。
配置搜索(使用 Laravel Scout)
默认情况下,此模块包括“搜索”在您在 .env
文件中定义以下变量后的“页面”和“帖子”模型 - 查看 Laravel Scout 文档
SCOUT_DRIVER=tntsearch
但是,您可以通过将“Searchable”特征附加到它们来扩展并定义自己的“Searchable”模型以包含在搜索结果中。
class Page extends Model
{
use Searchable;
public $asYouType = false;
/**
* Get the indexed data array for the model.
* @return array
*/
public function toSearchableArray()
{
$array = $this->toArray();
// customise the searchable array
return $array
}
}
然后您将能够连接到搜索配置并将您的“可搜索”模型与配置键(最好使用服务提供者)合并:scout.tntsearch.searchableModels
。
$this->mergeConfigFrom(self::PACKAGE_DIR . 'path/to/config/scout.php', 'scout.tntsearch.searchableModels');
您的配置文件应包含类似于此模块的 scout.php 配置文件中的值。
<?php
return [
'\My\Searchable\Models\Namespace',
];
测试
您可以通过切换到包目录并运行 composer 脚本来测试 Pvtl/Test 包。
cd packages/pivotal/test;
composer run test
故障排除
错误:类 VoyagerFrontendDatabaseSeeder 不存在
只需再次运行 php artisan voyager-frontend:install
即可。
错误:命令 "npm i ..." 失败。
运行 npm install
然后再次尝试 php artisan voyager-frontend:install
。