{"id":764,"date":"2025-06-11T23:07:49","date_gmt":"2025-06-11T15:07:49","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/php\/php-application-manual\/laravel\/764.html"},"modified":"2025-06-11T23:07:49","modified_gmt":"2025-06-11T15:07:49","slug":"laravel%ef%bc%9a%e5%a6%82%e4%bd%95%e5%9c%a8-blade-%e6%a8%a1%e6%9d%bf%e4%b8%ad%e9%93%be%e6%8e%a5%e9%9d%99%e6%80%81%e8%b5%84%e6%ba%90","status":"publish","type":"my1js","link":"https:\/\/www.zhaozhao123.cn\/php\/my1js\/764.html","title":{"rendered":"Laravel\uff1a\u5982\u4f55\u5728 Blade \u6a21\u677f\u4e2d\u94fe\u63a5\u9759\u6001\u8d44\u6e90"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n

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

1. 使用 asset<\/code> 函数<\/h3>\n

Laravel 提供了一个便捷的函数 asset<\/code> 来生成 URL 对应的静态资源路径。<\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>My Laravel App<\/title>\n    <!-- 引入 CSS -->\n    <link rel=\"stylesheet\" href=\"{{ asset('css\/app.css') }}\">\n    <!-- 引入 JavaScript -->\n    <script src=\"{{ asset('js\/app.js') }}\"><\/script>\n<\/head>\n<body>\n    <h1>Welcome to My Laravel App<\/h1>\n<\/body>\n<\/html><\/code><\/pre>\n
2. 使用 mix<\/code> 命令<\/h3>\n
如果你有配置了 Mix，可以使用 mix<\/code> 命令来打包和管理资源文件。<\/p>\n
首先，确保你在 webpack.mix.js<\/code> 或 gulpfile.js<\/code> 中正确配置了资源处理。<\/p>\n
\/\/ webpack.mix.js\nconst mix = require('laravel-mix');\n\nmix.js('resources\/js\/app.js', 'public\/js')\n   .sass('resources\/sass\/app.scss', 'public\/css');<\/code><\/pre>\n
然后在 Blade 模板中使用 mix<\/code> 的 url<\/code> 方法来获取 URL：<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>My Laravel App<\/title>\n    <!-- 引入 CSS -->\n    <link rel=\"stylesheet\" href=\"{{ mix('css\/app.css') }}\">\n    <!-- 引入 JavaScript -->\n    <script src=\"{{ mix('js\/app.js') }}\"><\/script>\n<\/head>\n<body>\n    <h1>Welcome to My Laravel App<\/h1>\n<\/body>\n<\/html><\/code><\/pre>\n
3. 在 HTML 中直接引用<\/h3>\n
你也可以在 HTML 中直接引用静态资源文件，但这种方式不推荐，因为会导致资源文件被重复加载。<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>My Laravel App<\/title>\n    <link rel=\"stylesheet\" href=\"\/css\/app.css\">\n    <script src=\"\/js\/app.js\"><\/script>\n<\/head>\n<body>\n    <h1>Welcome to My Laravel App<\/h1>\n<\/body>\n<\/html><\/code><\/pre>\n
示例代码<\/h3>\n
以下是一个完整的示例，展示了如何在 Blade 模板中使用 asset<\/code> 函数来引入 CSS 和 JavaScript 文件：<\/p>\n
<!-- resources\/views\/welcome.blade.php -->\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>My Laravel App<\/title>\n    <!-- 引入 CSS -->\n    <link rel=\"stylesheet\" href=\"{{ asset('css\/app.css') }}\">\n    <!-- 引入 JavaScript -->\n    <script src=\"{{ asset('js\/app.js') }}\"><\/script>\n<\/head>\n<body>\n    <h1>Welcome to My Laravel App<\/h1>\n<\/body>\n<\/html><\/code><\/pre>\n
通过这些方法，你可以在 Laravel 中有效地管理和链接静态资源。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
\r\n
\r\n
\r\n
\r\n
\r\n
\"黑板Bug讲师\"<\/figure>\r\n\r\n\r\n\r\n
黑板Bug讲师<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
介绍<\/h2>
在使用Laravel开发Web应用时，包括静态资产（如图片、JavaScript和CSS文件）在Blade模板中的常见任务非常重要。这些静态资产对于样式、客户端脚本的嵌入以及媒体内容的渲染至关重要。Laravel提供了一种结构化的方法来链接这些资产，在保持可维护性和效率的同时进行操作。在这篇教程中，我们将探索各种方法，从基本到高级的技术，以在Blade模板中链接静态资产。<\/p>
在Blade模板中，基本资产链接（Basic Asset Linking）。<\/h2>
最简单的方法是在 Blade 模板中包含静态资产就是使用 Laravel 的辅助函数。asset()<\/code>这个功能会生成一个用于您的资产的URL，考虑到应用中的“资产根目录”已经定义了。config\/app.php<\/code>文件。<\/p>
<!-- Linking a CSS file -->\n<link href=\"{{ asset('css\/app.css') }}\" rel=\"stylesheet\">\n\n<!-- Linking a JavaScript file -->\n<script src=\"{{ asset('js\/app.js') }}\"><\/script>\n\n<!-- Embedding an Image -->\n<img src=\"{{ asset('images\/logo.png') }}\" alt=\"Logo\">\n<\/code><\/pre>
这些都是如何利用的示例。asset()<\/code>辅助函数用于在你的Blade模板中包含不同类型静态资源。<\/p>
利用版本化资产<\/h2>
在网站开发中，缓存破拆（cache busting）是一项挑战。当你更新一个资产时，通常希望确保客户端加载最新版本。Laravel 通过解决这个问题。mix()<\/code>辅助函数。此函数用于包括由Laravel Mix处理过的资产，通常这些资产带有版本号。它需要你在Laravel项目中的webpack.mix.js配置。<\/p>
<!-- Linking a versioned CSS file -->\n<link href=\"{{ mix('css\/app.css') }}\" rel=\"stylesheet\">\n\n<!-- Linking a versioned JavaScript file -->\n<script src=\"{{ mix('js\/app.js') }}\"><\/script>\n<\/code><\/pre>
当你使用时，请允许我进行翻译。mix()<\/code>Laravel 会自动在定义在 mix-manifest.json 文件中的资产 URL 前添加适当的缓存破环查询字符串。<\/p>
资产组织与目录结构<\/h2>
Laravel的公共存储通常是资产存放的地方。然而，你可以通过在公共目录内创建子目录来组织相关资产。以下是链接到子目录内的资产的方法：<\/p>
<!-- Linking a CSS file within a subdirectory -->\n<link href=\"{{ asset('css\/themes\/dark-mode.css') }}\" rel=\"stylesheet\">\n\n<!-- Linking an image within a subdirectory -->\n<img src=\"{{ asset('images\/icons\/laravel.png') }}\" alt=\"Laravel Icon\">\n<\/code><\/pre>
安全资产链接<\/h2>
如果您的应用使用SSL，为确保资产URL也得到安全保护，则应将其设置为“ASSET_URL”。这可以通过在您的配置中设置该属性来自动处理。.env<\/code>请提供更多信息，以便我能够帮助您。https:\/\/<\/code>前缀：然而，如果你需要手动生成安全的资产链接，Laravel 提供了。secure_asset()<\/code>辅助函数：<\/p>
<!-- Linking a secure CSS file -->\n<link href=\"{{ secure_asset('css\/secure-app.css') }}\" rel=\"stylesheet\">\n\n<!-- Linking a secure JavaScript file -->\n<script src=\"{{ secure_asset('js\/secure-app.js') }}\"><\/script>\n<\/code><\/pre>
与Laravel Collective进行资产链接<\/h2>
虽然不是Laravel核心的一部分，但Laravel Collective提供了一个方便的HTML和表单构建器，可用于链接其他资源（例如静态资产）。以下是如何使用Laravel Collective来链接到您的静态资产的一个示例：<\/p>
<!-- Linking a CSS file with Laravel Collective -->\n{{ HTML::style('css\/app.css') }}\n\n<!-- Linking a JavaScript file with Laravel Collective -->\n{{ HTML::script('js\/app.js') }}\n\n<!-- Embedding an image with Laravel Collective -->\n{{ HTML::image('images\/logo.png', 'Logo') }}\n<\/code><\/pre>
资产管理系统与包管理器<\/h2>
对于更高级的资产管理，您可以使用如Laravel Asset Manager等包，这些包提供了对资产的组合、压缩和版本控制更加精细的控制。虽然使用这些包可能需要额外的配置，但它们可以极大地增强处理大规模应用资产的能力。<\/p>
结论。<\/h2>
在Blade模板中整合静态资产对于构建一个完整且响应式的Laravel应用程序至关重要。通过一系列技术，例如简单的助手函数如asset()等，可以轻松实现这一目标。asset()<\/code>and 是中文中的“和”，表示并列关系。mix()<\/code>对于资产管理和资产管理的高级包，Laravel继续提供强大的解决方案给开发人员。随着您的应用程序的增长，您的资产管理复杂性也将增加，但通过本教程提供的指导，您应该能够优雅且高效地处理它。<\/p><\/body>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
\r\n
\r\n
\r\n
\r\n
\r\n
\"长工码奴1523\"<\/figure>\r\n\r\n\r\n\r\n
长工码奴1523<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
要在 Laravel 的 Blade 模板中链接静态资源（如图像、视频等），你可以使用 @include<\/code> 或者 @extends<\/code> 关键字来引用已存在的视图文件。<\/p>\n
使用 @include<\/h3>\n
{{ asset('path\/to\/image.jpg') }}<\/code><\/pre>\n
使用 @extends<\/h3>\n
如果你有一个名为 images.blade.php<\/code> 的文件，并且你想在其他模板中引用它：<\/p>\n
    \n
  1. \n
    在 images.blade.php<\/code> 文件中创建一个包含静态资源的视图。<\/p>\n<\/li>\n
  2. \n
    在需要引用该资源的模板中，使用 @yield<\/code> 来定义视图块：<\/p>\n
    @yield('image')<\/code><\/pre>\n<\/li>\n
  3. \n
    在需要引用资源的地方，直接使用 {!! asset('path\/to\/image.jpg') !!}<\/code>，或者将 asset<\/code> 替换为你要引用的资源的实际路径。<\/p>\n<\/li>\n<\/ol>\n
    示例代码<\/h3>\n
    假设我们有一个名为 images.blade.php<\/code> 的文件，其中包含以下内容：<\/p>\n
    <?php\n\nnamespace AppViews;\n\nuse IlluminateViewView;\n\nclass Images extends View\n{\n    public function __invoke(): void\n    {\n        $this->layout = 'base';\n        $this->title = 'Static Resources';\n\n        $this->registerAssets();\n\n        echo view('images.image', ['resource' => '\/path\/to\/resource.jpg']);\n    }\n\n    private function registerAssets(): void\n    {\n        \/\/ 注册资产到当前视图\n        require_once 'assets\/registration.php';\n    }\n}<\/code><\/pre>\n
    然后，你需要在需要引用资源的模板中调用 @yield('image')<\/code> 视图块，如下所示：<\/p>\n
    <div>\n    <img src=\"{{ asset('path\/to\/resource.jpg') }}\" alt=\"Image description\">\n<\/div><\/code><\/pre>\n
    这样就可以在 Blade 模板中轻松地链接和显示静态资源了。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    Bug编译狮 在 Laravel 中，你可以使用 Blade 模板来链接静&#24..<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","meta":{"_acf_changed":false},"tags":[],"my1js2nav":[44],"tuisongtax":[],"class_list":["post-764","my1js","type-my1js","status-publish","hentry","my1js2nav-laravel"],"acf":{"qian_art_seotitle":"","qian_art_seotitle_source":{"label":"SEO\u6807\u9898","type":"text","formatted_value":""},"qian_art_seokws":"","qian_art_seokws_source":{"label":"SEO\u5173\u952e\u8bcd","type":"text","formatted_value":""},"qian_art_stzhong":"","qian_art_stzhong_source":{"label":"\u4e2d | \u77ed\u6807\u9898","type":"text","formatted_value":""}},"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js\/764","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/types\/my1js"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/media?parent=764"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tags?post=764"},{"taxonomy":"my1js2nav","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js2nav?post=764"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tuisongtax?post=764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}