javascript - 如何以及在何处将 CSS 和 JS 文件包含在 NETTE 框架中？

Question

当我使用添加外部文件的传统方式时，我在 Nette 中将外部文件添加到模板时遇到了一个问题。要么我将这些链接添加到错误的文件(模板不是应该添加它们的地方)，要么使用的格式不正确。

我尝试在内部将 css 和 js 实现到模板 (latte)，效果很好。但是我需要从外部添加它们。

{block script}
  <link rel="stylesheet" type="text/css" href="..\sass\components\file.scss">
  <script src="..www\assets\js\file.js"></script>
{/block script}

Answer 1

您应该明白，服务器文件系统上的路径独立于您将在模板中发送给浏览器的 URL，浏览器将使用这些 URL 进行进一步的 HTTP 请求。

例如，在 Nette 应用程序的常见场景中，/ 中的文件将在 something /path/to/your/project/directory/www 下搜索；某些文件系统路径，例如 www 目录之外的所有内容，甚至没有相应的 URL。

默认情况下，Latte 不知道哪个文件与哪个 URL 匹配，因此它会保持 src 和 href 属性与编写的完全相同。这意味着您需要确保自己使用正确的 URL。

为了您的方便，Nette 在 Latte 模板中自动设置了 $basePath 变量:

{block script}

  <link rel="stylesheet" type="text/x-scss" href="{$basePath}/sass/components/file.scss">

  <script src="{$basePath}/assets/js/file.js"></script>

{/block script}

该变量将指向您的应用程序公共(public)根目录(www/ 目录)，从而更容易获得 URL。

另请注意，您应该在 URL 中使用正斜杠，并且您可能希望链接到构建的样式表而不是 SASS 组件。