Zf2 布局 css 和 javascript 路径无法在子路由上解析答案

【问题标题】：Zf2 layout css and javascript paths do not resolve on child routesZf2 布局 css 和 javascript 路径无法在子路由上解析
【发布时间】：2015-04-28 09:23:09
【问题描述】：

目前我正在尝试设置所有使用相同模板的分段路线。当前，基本路线 /my-dashboard 视图使用布局。这适用于基本路线。但是在尝试添加子段路由后，布局 css 和 js 路径不正确。我希望 /my-dashboard/ideas /my-dashboard/whatever /my-dashboard/whatever/update/777 下的任何部分使用相同的布局，但视图不同。以及每个视图都有正确的 css 和 js 路径的布局。

route.config.php

'dashboard' => array(
        'type' => 'literal',
        'options' => array(
            'route'    => '/my-dashboard',
            'defaults' => array(
                'controller' => 'dashboard',
                'action'     => 'dashboard',
            ),
        ),
        'may_terminate' => true,
            'child_routes' => array(
                'wahtever' => array(
                    'type'    => 'Segment',
                    'options' => array(
                        'route'    => '/ideas',
                        'defaults' => array(
                            'controller' => 'ideas',
                            'action'     => 'ideas',
                        ),
                    ),
                ),
            ),
    ),

如果我转到 /my-dashboard，它将显示正确的视图以及我想要用于任何这些路线的布局。如果我去 /my-dashboard/ideas，路线会解决，但是当在控制台中查看时，所有的 css 和 js 都被 404s 搞砸了，找不到这样那样的东西。如果我在布局中添加 ../ ，它将在嵌套路由上工作，但随后会搞砸 /my-dashboard 路由。

module.config.php

'view_manager' => array(
    'template_map' => array(
        'layout/my-dashboard-layout' => __DIR__ . '/../view/layout/my-dashboard-layout.twig',
        'wmi/dashboard/dashboard'    => __DIR__ . '/../view/dashboard/dashboard.twig',
        'wmi/ideas/ideas'            => __DIR__ . '/../view/ideas/ideas.twig',
    )
),

编辑以添加布局和视图。布局/我的仪表板布局.twig

<!DOCTYPE html>
<html>

<head>
    <!-- Theme CSS -->
    <link rel="stylesheet" type="text/css" href="skin/default_skin/css/theme.css">

    <!-- Admin Panels CSS -->
    <link rel="stylesheet" type="text/css" href="admin-tools/admin-plugins/admin-panels/adminpanels.css">

    <!-- Admin Forms CSS -->
    <link rel="stylesheet" type="text/css" href="admin-tools/admin-forms/css/admin-forms.css">
    <!-- Favicon -->
    <link rel="shortcut icon" href="img/favicon.ico">
</head>
<body class="dashboard-page sb-l-o sb-r-c">
    <!-- Start: Content-Wrapper -->
    <section id="content_wrapper">
        {% block content %}{{ content|raw }}{% endblock content %}
    </section>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery_ui/jquery-ui.min.js"></script>

<!-- Bootstrap -->
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
</body>
</html>

所有的 css 和 javascript 路径都是我所指的。在基本文字路线 /my-dashboard 上，布局和视图正确显示。虽然当您转到细分部分 /my-dashboard/ideas 时，您会看到 404 在浏览器控制台中找不到任何内容。

GET http://watch.dev/my-dashboard/skin/default_skin/css/theme.css 
GET http://watch.dev/my-dashboard/admin-tools/admin-plugins/admin-panels/adminpanels.css 
GET http://watch.dev/my-dashboard/admin-tools/admin-forms/css/admin-forms.css 
GET http://watch.dev/my-dashboard/img/avatars/2.jpg 
404 (Not Found) 
GET http://watch.dev/my-dashboard/js/jquery/jquery-1.11.1.min.js 
GET http://watch.dev/my-dashboard/js/bootstrap/holder.min.js
GET http://watch.dev/my-dashboard/components/circles/circles.js
GET http://watch.dev/my-dashboard/components/raphael/raphael.js
GET http://watch.dev/my-dashboard/js/jquery/jquery_ui/jquery-ui.min.js  
GET http://watch.dev/my-dashboard/components/highcharts/highcharts.js 
GET http://watch.dev/my-dashboard/js/bootstrap/bootstrap.min.js
GET http://watch.dev/my-dashboard/admin-tools/admin-plugins/admin-panels/adminpanels.css 
GET http://watch.dev/my-dashboard/admin-tools/admin-forms/css/admin-forms.css  
GET http://watch.dev/my-dashboard/img/avatars/2.jpg 
404 (Not Found) 
GET http://watch.dev/my-dashboard/js/jquery/jquery-1.11.1.min.js 
GET http://watch.dev/my-dashboard/js/bootstrap/holder.min.js  
GET http://watch.dev/my-dashboard/components/circles/circles.js  
GET http://watch.dev/my-dashboard/components/raphael/raphael.js  
GET http://watch.dev/my-dashboard/js/jquery/jquery_ui/jquery-ui.min.js  
GET http://watch.dev/my-dashboard/components/highcharts/highcharts.js  
GET http://watch.dev/my-dashboard/js/bootstrap/bootstrap.min.js 
404 (Not Found)

ideas/my-ideas.twig

{% extends "layout/my-dashboard-layout" %}

{% block content %}
{% endblock content %}

感谢任何帮助。 404（未找到）

ideas/my-ideas.twig

{% extends "layout/my-dashboard-layout" %}

{% block content %}
{% endblock content %}

感谢任何帮助。

【问题讨论】：

您可能应该为 css 和 js 发布您的标记和配置（如果适用）。您在使用资产管理器吗？
什么是资产管理器？我会尝试在我正在谈论的路径中添加更多信息。
你可以在这里阅读文档github.com/RWOverdijk/AssetManager 基本上它允许从供应商模块等提供资产。你不必使用它只是帮助修复错误以了解你是否是
资产管理器看起来像 symfony 移动资产的方式。虽然这看起来不错，但我认为这不是问题。因为即使在文件被实用或手动移动到公共目录之后，布局和视图中的路径仍然保持不变。我想知道我是否必须使用 basePath() 视图助手。

标签： javascript php css zend-framework2

【解决方案1】：

这样使用basePath视图插件也是一个好习惯：

<link rel="stylesheet" type="text/css" href="<?php echo $this->basePath('css/theme.css'); ?>" />

因此，如果将来您的应用程序的路径发生变化，您将不必更改视图文件中的所有 src 和 href 路径。

【讨论】：

【解决方案2】：

这不是 ZF 问题，因为 CSS/JS 请求甚至不应该触及 PHP。因为您在布局中使用相对路径，所以浏览器正在加载相对于当前 URL 的 CSS 和 JS 文件。例如。当您在 /my-dashboard/ideas 页面上时，它会尝试加载 /my-dashboard/skin/default_skin/css/theme.css（这不是正确的 URL）。

要解决此问题，请始终在布局中使用绝对路径，例如：

<link rel="stylesheet" type="text/css" href="/skin/default_skin/css/theme.css">

（注意 href 路径开头的斜杠）。这可确保您的资产始终从文档根目录加载。

【讨论】：

你太棒了！这解决了问题。我不知道之前的斜线会产生这种影响。感谢您的快速修复。