【问题标题】:Layout inheritance in jade玉中的布局继承
【发布时间】:2011-11-24 23:42:35
【问题描述】:

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

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

问题在于,当加载接收 id 作为参数的产品页面时(localhost:3000/product/:id 如果不是 /id 它会很好地加载),尽管布局仍然正确扩展它不会加载样式表正确(路径已损坏)。不过,我做对了一半,在产品的索引页面中,样式表加载得很好。

布局.jade

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

【问题讨论】:

    标签: node.js pug


    【解决方案1】:

    这可能是您的 href 中的相对路径。挖掘 express 文档,我发现最流行的方法是从网站的基础中引用样式表,如下所示(注意 / 前面的样式表):

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

    这样做的好处是简单,并且可以跨多个深度的路线(/about、/about/me 等)工作。但是,它具有不支持应用程序目录深度的缺点。例如,如果您想将您的应用程序托管在:http://yourserver/yourapps/yourapp,这将是一个问题。我不知道你是否关心这个,大多数 express 的例子当然不关心:-)

    但是,如果你想以正确的方式做到这一点,在 express 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。

    编码愉快!

    【讨论】:

    • 注意 / 前面的样式表!那是关键!我现在很高兴谢谢:D
    猜你喜欢
    • 2017-02-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-09
    • 1970-01-01
    • 1970-01-01
    • 2023-02-16
    • 2014-09-17
    相关资源
    最近更新 更多