Question

我希望只在index页面的导航下显示全宽幅图像。

以下是master模板的标记：

<body>
    <nav class=" navbar ..." role="navigation">
        ...
    </nav>
    <div class="container">
        {+body /}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
    </div>
</body>

但是，index页面中的任何内容都会受到master模板中容器的宽度限制。如果我在模板中添加全角内容，那么它也将出现在我的所有其他页面中。

解决此问题的最佳方法是什么？

Answer 1

您可以使用块实现此目的。请查看dust.js guide中的相关部分（块和内联部分）。

您可以在主模板中指定可在调用模板中选择性覆盖的块

一个块可能是自动关闭的（{+block/}），在这种情况下它不是除非调用模板覆盖块的内容
，否则显示

您已经在使用{+body/}定义的语法。

tl; dr

因此，在您的主模板中，您可以执行类似的操作（在第5行注意image块）：

<body>
    <nav class=" navbar ..." role="navigation">
        ...
    </nav>
    {+image/}                
    <div class="container">
        {+body/}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
    </div>
</body>

并在索引模板中提供image覆盖（下方），将其从其他模板中删除：

{<image}
  ...your image
{/image}
{<body}
  ...your body
{/body}

Answer 2

当您在索引页面上时，您可以做的是将一些页面类添加到您的body元素。并根据该类创建css样式以在导航后添加内容。例如：

HTML：

<body class="main-page">
    <nav class=" navbar ..." role="navigation">
        ...
    </nav>
    <div class="container">
        {+body /}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
    </div>
</body>

的CSS：

body.main-page > .container::before {
    display: block;
    content: "whatever content you need";
    width: 100%;
    height: 300px;
}

索引页面的全宽图像

2 个答案: