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

Question

I came across a problem to add external files to template in Nette when I used a traditional way of adding external files. Either I added those links to incorrect file (template is not the place where they should be added) or the format used is incorrect.

I tried to implement css and js internally to template (latte) which worked well. However I need them to be added externally.

{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

You should understand that paths on the server's file system are independent from the URLs you will send to the browser in templates and which the browser will use for further HTTP requests.

For example, in the common scenario with Nette applications, files in / will be searched under something /path/to/your/project/directory/www ; some file system paths like everything outside the www directory do not even have a corresponding URL.

By default, Latte does not know which file matches to what URL so it keeps the src and href attributes exactly as written. This means you need to make sure you use correct URLs yourself.

For your convenience, Nette automagically sets the $basePath variable in Latte templates:

{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}

The variable will point to your application public root ( www/ directory), making coming up with the URLs a little easier.

Also note that you should use forward slashes in URLs and you will probably want to link to the built stylesheet instead of the SASS components.