(Quick Reference)

6.2.6 Sitemesh的内容块 - Reference Documentation

Authors: Graeme Rocher, Peter Ledbrook, Marc Palmer, Jeff Brown, Luke Daley, Burt Beckwith

Version: null

6.2.6 Sitemesh的内容块

Although it is useful to decorate an entire page sometimes you may find the need to decorate independent sections of your site. To do this you can use content blocks. To get started, partition the page to be decorated using the <content> tag:

<content tag="navbar">
… draw the navbar here…
</content>

<content tag="header"> … draw the header here… </content>

<content tag="footer"> … draw the footer here… </content>

<content tag="body"> … draw the body here… </content>

Then within the layout you can reference these components and apply individual layouts to each:

<html>
    <body>
        <div id="header">
            <g:applyLayout name="headerLayout">
                <g:pageProperty name="page.header" />
            </g:applyLayout>
        </div>
        <div id="nav">
            <g:applyLayout name="navLayout">
                <g:pageProperty name="page.navbar" />
            </g:applyLayout>
        </div>
        <div id="body">
            <g:applyLayout name="bodyLayout">
                <g:pageProperty name="page.body" />
            </g:applyLayout>
        </div>
        <div id="footer">
            <g:applyLayout name="footerLayout">
                <g:pageProperty name="page.footer" />
            </g:applyLayout>
        </div>
    </body>
</html>

虽然装饰整个页面是有用的,但有时候你可能只需要装饰站点单独的部分。这时,你可以使用内容块来完成。首先,对于要装饰的页面部分使用<content>标签来处理:

<content tag="navbar">
… draw the navbar here…
</content>

<content tag="header"> … draw the header here… </content>

<content tag="footer"> … draw the footer here… </content>

<content tag="body"> … draw the body here… </content>

然后,在布局内,你可以引用这些组件并且将其应用到每一个独立的布局中:

<html>
    <body>
        <div id="header">
            <g:applyLayout name="headerLayout">
                <g:pageProperty name="page.header" />
            </g:applyLayout>
        </div>
        <div id="nav">
            <g:applyLayout name="navLayout">
                <g:pageProperty name="page.navbar" />
            </g:applyLayout>
        </div>
        <div id="body">
            <g:applyLayout name="bodyLayout">
                <g:pageProperty name="page.body" />
            </g:applyLayout>
        </div>
        <div id="footer">
            <g:applyLayout name="footerLayout">
                <g:pageProperty name="page.footer" />
            </g:applyLayout>
        </div>
    </body>
</html>