l-1

PHP笔记

主页/PHP笔记/PHP问答/框架Laravel/Laravel：如何在 Blade 模板中链接静态资源

Laravel：如何在 Blade 模板中链接静态资源

Bug编译狮

Bug编译狮

在 Laravel 中，你可以使用 Blade 模板来链接静态资源（如 CSS 和 JavaScript 文件）。以下是几种常见的方法：

1. 使用 asset 函数

Laravel 提供了一个便捷的函数 asset 来生成 URL 对应的静态资源路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Laravel App</title>
    <!-- 引入 CSS -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <!-- 引入 JavaScript -->
    <script src="{{ asset('js/app.js') }}"></script>
</head>
<body>
    <h1>Welcome to My Laravel App</h1>
</body>
</html>

2. 使用 mix 命令

如果你有配置了 Mix，可以使用 mix 命令来打包和管理资源文件。

首先，确保你在 webpack.mix.js 或 gulpfile.js 中正确配置了资源处理。

// webpack.mix.js
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

然后在 Blade 模板中使用 mix 的 url 方法来获取 URL：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Laravel App</title>
    <!-- 引入 CSS -->
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    <!-- 引入 JavaScript -->
    <script src="{{ mix('js/app.js') }}"></script>
</head>
<body>
    <h1>Welcome to My Laravel App</h1>
</body>
</html>

3. 在 HTML 中直接引用

你也可以在 HTML 中直接引用静态资源文件，但这种方式不推荐，因为会导致资源文件被重复加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Laravel App</title>
    <link rel="stylesheet" href="/css/app.css">
    <script src="/js/app.js"></script>
</head>
<body>
    <h1>Welcome to My Laravel App</h1>
</body>
</html>

示例代码

以下是一个完整的示例，展示了如何在 Blade 模板中使用 asset 函数来引入 CSS 和 JavaScript 文件：

<!-- resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Laravel App</title>
    <!-- 引入 CSS -->
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <!-- 引入 JavaScript -->
    <script src="{{ asset('js/app.js') }}"></script>
</head>
<body>
    <h1>Welcome to My Laravel App</h1>
</body>
</html>

通过这些方法，你可以在 Laravel 中有效地管理和链接静态资源。

黑板Bug讲师

黑板Bug讲师

介绍

在使用Laravel开发Web应用时，包括静态资产（如图片、JavaScript和CSS文件）在Blade模板中的常见任务非常重要。这些静态资产对于样式、客户端脚本的嵌入以及媒体内容的渲染至关重要。Laravel提供了一种结构化的方法来链接这些资产，在保持可维护性和效率的同时进行操作。在这篇教程中，我们将探索各种方法，从基本到高级的技术，以在Blade模板中链接静态资产。

在Blade模板中，基本资产链接（Basic Asset Linking）。

最简单的方法是在 Blade 模板中包含静态资产就是使用 Laravel 的辅助函数。asset()这个功能会生成一个用于您的资产的URL，考虑到应用中的“资产根目录”已经定义了。config/app.php文件。

<!-- Linking a CSS file -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">

<!-- Linking a JavaScript file -->
<script src="{{ asset('js/app.js') }}"></script>

<!-- Embedding an Image -->
<img src="{{ asset('images/logo.png') }}" alt="Logo">

这些都是如何利用的示例。asset()辅助函数用于在你的Blade模板中包含不同类型静态资源。

利用版本化资产

在网站开发中，缓存破拆（cache busting）是一项挑战。当你更新一个资产时，通常希望确保客户端加载最新版本。Laravel 通过解决这个问题。mix()辅助函数。此函数用于包括由Laravel Mix处理过的资产，通常这些资产带有版本号。它需要你在Laravel项目中的webpack.mix.js配置。

<!-- Linking a versioned CSS file -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">

<!-- Linking a versioned JavaScript file -->
<script src="{{ mix('js/app.js') }}"></script>

当你使用时，请允许我进行翻译。mix()Laravel 会自动在定义在 mix-manifest.json 文件中的资产 URL 前添加适当的缓存破环查询字符串。

资产组织与目录结构

Laravel的公共存储通常是资产存放的地方。然而，你可以通过在公共目录内创建子目录来组织相关资产。以下是链接到子目录内的资产的方法：

<!-- Linking a CSS file within a subdirectory -->
<link href="{{ asset('css/themes/dark-mode.css') }}" rel="stylesheet">

<!-- Linking an image within a subdirectory -->
<img src="{{ asset('images/icons/laravel.png') }}" alt="Laravel Icon">

安全资产链接

如果您的应用使用SSL，为确保资产URL也得到安全保护，则应将其设置为“ASSET_URL”。这可以通过在您的配置中设置该属性来自动处理。.env请提供更多信息，以便我能够帮助您。https://前缀：然而，如果你需要手动生成安全的资产链接，Laravel 提供了。secure_asset()辅助函数：

<!-- Linking a secure CSS file -->
<link href="{{ secure_asset('css/secure-app.css') }}" rel="stylesheet">

<!-- Linking a secure JavaScript file -->
<script src="{{ secure_asset('js/secure-app.js') }}"></script>

与Laravel Collective进行资产链接

虽然不是Laravel核心的一部分，但Laravel Collective提供了一个方便的HTML和表单构建器，可用于链接其他资源（例如静态资产）。以下是如何使用Laravel Collective来链接到您的静态资产的一个示例：

<!-- Linking a CSS file with Laravel Collective -->
{{ HTML::style('css/app.css') }}

<!-- Linking a JavaScript file with Laravel Collective -->
{{ HTML::script('js/app.js') }}

<!-- Embedding an image with Laravel Collective -->
{{ HTML::image('images/logo.png', 'Logo') }}

资产管理系统与包管理器

对于更高级的资产管理，您可以使用如Laravel Asset Manager等包，这些包提供了对资产的组合、压缩和版本控制更加精细的控制。虽然使用这些包可能需要额外的配置，但它们可以极大地增强处理大规模应用资产的能力。

结论。

在Blade模板中整合静态资产对于构建一个完整且响应式的Laravel应用程序至关重要。通过一系列技术，例如简单的助手函数如asset()等，可以轻松实现这一目标。asset()and 是中文中的“和”，表示并列关系。mix()对于资产管理和资产管理的高级包，Laravel继续提供强大的解决方案给开发人员。随着您的应用程序的增长，您的资产管理复杂性也将增加，但通过本教程提供的指导，您应该能够优雅且高效地处理它。

长工码奴1523

长工码奴1523

要在 Laravel 的 Blade 模板中链接静态资源（如图像、视频等），你可以使用 @include 或者 @extends 关键字来引用已存在的视图文件。

使用 @include

{{ asset('path/to/image.jpg') }}

使用 @extends

如果你有一个名为 images.blade.php 的文件，并且你想在其他模板中引用它：

  1. 在 images.blade.php 文件中创建一个包含静态资源的视图。

  2. 在需要引用该资源的模板中，使用 @yield 来定义视图块：

    @yield('image')

  3. 在需要引用资源的地方，直接使用 {!! asset('path/to/image.jpg') !!}，或者将 asset 替换为你要引用的资源的实际路径。

示例代码

假设我们有一个名为 images.blade.php 的文件，其中包含以下内容：

<?php

namespace AppViews;

use IlluminateViewView;

class Images extends View
{
    public function __invoke(): void
    {
        $this->layout = 'base';
        $this->title = 'Static Resources';

        $this->registerAssets();

        echo view('images.image', ['resource' => '/path/to/resource.jpg']);
    }

    private function registerAssets(): void
    {
        // 注册资产到当前视图
        require_once 'assets/registration.php';
    }
}

然后，你需要在需要引用资源的模板中调用 @yield('image') 视图块，如下所示：

<div>
    <img src="{{ asset('path/to/resource.jpg') }}" alt="Image description">
</div>

这样就可以在 Blade 模板中轻松地链接和显示静态资源了。

最新更新