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

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应用程序的常见情况下， /文件将在/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}

该变量将指向您的应用程序的公共根目录（ www/目录），从而使URL的创建更加容易。

还要注意，您应该在URL中使用正斜杠，并且可能要链接到内置样式表而不是SASS组件。