如何在 Laravel 8 中更改 Jetstream 的标志？

Question

我使用 Jetstream 认证安装了 Laravel 8 。现在我想更改登录组件，特别是标志。这些组件放置在哪里？

- skm

Answer 1

安装教程中有答案。

https://jetstream.laravel.com/1.x/installation.html#application-logo

php artisan vendor:publish --tag=jetstream-views

Livewire

接下来，您应该自定义位于resources/views/vendor/jetstream/components/application-logo.blade.php、resources/views/vendor/jetstream/components/authentication-card-logo.blade.php和resources/views/vendor/jetstream/components/application-mark.blade.php组件中的SVG。

Inertia

接下来，您应该自定义位于resources/views/vendor/jetstream/components/authentication-card-logo.blade.php、resources/js/Jetstream/ApplicationLogo.vue和resources/js/Jetstream/ApplicationMark.vue中的SVG。在自定义这些组件后，您应该重新构建资产：

- Jsowa

---

如果我想将它改成 .png 格式，该怎么办？ - Berni

Answer 2

我找到了这个，按照以下步骤操作。

您可以运行以下命令来发布资源。

php artisan vendor:publish --tag=jetstream-views

之后，文件将可在文件夹 resources/views/vendor/jetstream/components 下找到。

- skm

Answer 3

只需添加您自己的html标记。

像这样操作：

<x-slot name="logo">
    <img src="{{ url('logo.png') }}" />
</x-slot>

- muhive

Answer 4

在 Laravel 8 中更改 Jetstream 徽标，需要进行以下三个步骤：

• 1. 首先运行此命令生成组件：php artisan vendor:publish --tag=jetstream-views，这将生成视图 [\vendor\laravel\jetstream\resources\views] 到 [\resources\views\vendor\jetstream]
• 2. 打开 \resources\views\vendor\jetstream 并移动到 authentication-card-logo.blade 文件
• 3. 创建您的 SVG 图像，可以从 https://www.w3schools.com/graphics/svg_intro.asp 进行创建，或者从免费下载网站 1：https://freesvg.org 下载。我也通过这种方式更改了我的徽标

- Ali Abbas

Answer 5

如果您想在数据库中获取您的标志，请执行以下步骤：首先运行此命令php artisan vendor:publish --tag=jetstream-views。然后，您需要获取resources\views\auth\login.blade.php并将其替换为您自己的组件<x-jet-authentication-card-logo />。

您可以通过运行此命令php artisan make:component AppLogo并创建自己的组件来实现这一点。请注意保留html标签。

<?php

namespace App\View\Components;

use App\Models\GeneralSettings;
use Illuminate\View\Component;

class AppLogo extends Component
{
    public $logo;

    public function __construct()
    {
        $this->logo = GeneralSettings::first()->favicon;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|string
     */
    public function render()
    {
        return view('components.home.app-logo');
    }
}

之后，您需要编辑resources\views\components\home\app-logo.blade.php文件，如下所示：

<div>
    <img src="{{$logo}}">
</div>

接下来，您需要获取resources\views\auth\login.blade.php文件，并将其中的<x-jet-authentication-card-logo />替换为您自己的组件！就像这样：<x-applogo />

结果应该如下所示：

<x-guest-layout>
    <x-jet-authentication-card>
        <x-slot name="logo">
{{--            <x-jet-authentication-card-logo />--}}
            <x-applogo />
        </x-slot>

        <x-jet-validation-errors class="mb-4" />
....

- Fatih