链接到从子路由呈现的Jade模板中的静态文件

问题描述

我有一个非常基本的问题，Node.js / Express / Jade很难描述。在我的node.js应用程序中，我使用Express框架来路由HTTP请求。我也使用Jade模板作为视图，他们自己链接到通过 c code code code code code code $ c
$ b必须为不同的资源类型使用相同的模板，所以我需要一个适用于任意资源级别的解决方案。

有没有这样的解决方案？

解决方案

我猜你的玉模板有一些如下所示：

  doctype html 
 head 
 link（rel =stylesheet，type =text / css，href =css / style.css）
。 .. 
  

Th样式表的e href 是一个相对路径，这意味着您的浏览器将查找相对于当前所在页面的CSS文件。例如：

• http://example.com/about → http://example.com/css/style.css


• http://example.com/about / company → http://example.com/about/css/style.css

您可以将 href 更改为绝对路径，以便CSS文件位置始终保持不变，无论您是哪个子目录in：

 链接（rel =stylesheet，type =text / css，href =/ css / style。 css）
  

这里的关键变化是在$ code开头的正斜杠> href ，将相对路径转换为绝对路径。

I have a very basic problem with Node.js/Express/Jade that's surprisingly hard to describe. In my node.js application I use the Express framework for routing of HTTP requests. I also use Jade templates as views, who themselves link to files (css, js etc.) inside a directory that I have declared as static through the app.use(express.static(__dirname + '/public')); command.

When I route requests to resources like /about or /contact everything works as expected. But I found that as soon as my resources have multiple 'levels' like so /about/me the same jade view would still render, but it ends up in the browser without CSS styling!

So my assumption is that the virtual directories represented by the resource levels screw up where jade thinks it must look for relative paths (in this case, where to find the public directory containing the static files).

I can't just prefix the paths inside the jade template since I have to use the same template for different resource types, so I need a solution that works for arbitrary resource levels.

Is there such a solution?

解决方案

I am guessing that your Jade template has something that looks like the following:

doctype html
  head
    link(rel="stylesheet", type="text/css", href="css/style.css")
    ...

The href for the stylesheet is a relative path, meaning your browser will look for the CSS file relative to the page it is currently on. For example:

• http://example.com/about → http://example.com/css/style.css
• http://example.com/about/company → http://example.com/about/css/style.css

You can change the href to an absolute path so the CSS file location will always be constant no matter what sub-directory you are in:

link(rel="stylesheet", type="text/css", href="/css/style.css")

The key change here is the forward slash at the beginning of the href, turning the relative path into an absolute one.

这篇关于链接到从子路由呈现的Jade模板中的静态文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！