玉的布局inheritance

如果你不知道玉是什么
我有模板inheritance系统的问题。我的文件结构是这样的

/views/ |-- layout.jade /products/ |-- index.jade |-- product.jade /static/ /stylesheets/ |-- style.css 

问题是,当加载产品页面接收一个ID作为参数(本地主机:3000 /产品/:ID如果不是为/ ID它会加载就好了),虽然布局仍然正确扩展它不正确加载样式表(path被打破)。 我做了一半的权利,虽然在产品的索引页面样式表加载得很好。

Layout.jade

  head link(rel='stylesheet', href='stylesheets/style.css') 

这可能是你的href中的相对path。 挖掘快速文档,我发现最stream行的方法是像这样引用样式表从网站的底部(请注意/之前的样式表):

 link(rel='stylesheet','/stylesheets/style.css') 

这有一个简单的好处,可以跨越多个深度的路线(/ about,/ about / me等)。 但是,它不支持app目录深度。 例如,如果您想要托pipe您的应用程序: http:// yourserver / yourapps / yourapp这将是一个问题。 我不知道你是否在乎这个,绝大多数的例子显然不是:-)

但是,如果你想以正确的方式做到这一点,快速github网站上有一个例子:博客。 https://github.com/visionmedia/express/tree/master/examples/blog

这里的方法是使用中间件组件来获取基础URL,并将其填充到传递给布局视图的本地。 这是你的HTML看起来像:

 !!! 5 html head title Blog link(rel='stylesheet', href=base + '/style.css') body #container!= body 

要检查出是否需要这种方法的重要部分是中间件/ locals.js,中间件组件连接的app.js和使用基础href的layout.jade。

快乐编码!