精通 Grails 改变 Grails 应用程序的外观（4）
|
- UID
- 1066743
|
精通 Grails 改变 Grails 应用程序的外观（4）
在登录之前隐藏导航栏您还需要处理一个容易弄错的标志，它表示这是一个 Grails 应用程序：导航栏。尽管我们在下一篇文章中才进行身份验证，但是现在可以为未验证的用户关闭导航栏。这可以通过将 <div> 包含在简单的 <g:if> 测试来实现。这个测试查找存储在会话范围中的 user 变量。
像清单 19 那样修改 list.gsp 和 show.gsp：
清单 19. 在登录之前隐藏导航栏1
2
3
4
5
6
7
8
9
10
| <g:if test="${session.user}">
<div class="nav">
<span class="menuButton">
<a class="home" href="${createLinkTo(dir:'')}">Home</a>
</span>
<span class="menuButton">
<g:link class="create" action="create">New Entry</g:link>
</span>
</div>
</g:if>
|
在 show.gsp 中，在按钮 <div> 的周围添加相同的测试（您最不愿意看到的事情就是用户编辑未经验证或删除 blog 条目，不是吗？）。
最后，对 list.gsp 的外观进行调整。将 paginateButtons <div> 从 body <div> 移出，如清单 20 所示。这使导航栏能够横跨整个屏幕，从而在屏幕的底部添加一个漂亮的可视锚。
清单 20. 将 paginateButtons <div> 从 body <div> 移出，改善外观1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="layout" content="main" />
<title>Blogito</title>
</head>
<body>
<g:if test="${session.user}">
<div class="nav">
<span class="menuButton">
<a class="home" href="${createLinkTo(dir:'')}">Home</a>
</span>
<span class="menuButton">
<g:link class="create" action="create">New Entry</g:link>
</span>
</div>
</g:if>
<div class="body">
<div class="list">
<g:each in="${entryInstanceList}" status="i" var="entryInstance">
<g:render template="entry" bean="${entryInstance}" var="entryInstance" />
</g:each>
</div>
</div>
<div class="paginateButtons">
<g:paginate total="${Entry.count()}" />
</div>
</body>
</html>
|
再添加一些 CSS，如清单 21 所示，确保 paginateButtons <div> 出现在 body <div> 的底部，而不是旁边：
清单 21. 确保 paginateButtons <div> 出现在屏幕底部的 CSS1
2
3
| .paginateButtons{
clear: left;
}
|
最后一次刷新浏览器。您的屏幕应该如图 9 所示：
图 9. 隐藏导航栏 设置主页 现在，一切准备就绪了，此时应该将 EntryController 设置为默认主页。为此，需要添加一个将 /（URL http://localhost:9090/blogito/ 中的尾部反斜杠）重新定向到 EntryController 的映射。根据清单 22 编辑 grails-app/conf/UrlMappings.groovy：
清单 22. 将 EntryController 设置为默认主页1
2
3
4
5
6
7
8
9
10
11
| class UrlMappings {
static mappings = {
"/$controller/$action?/$id?"{
constraints {
// apply constraints here
}
}
"/"(controller:"entry")
"500"(view:'/error')
}
}
|
结束语本文的目标是显示如何改变 Grails 应用程序的外观。仅需几行 CSS 就可以改变颜色、字体和块元素周围的空间。通过局部模板和 TagLibs 可以创建一些可重用的代码片段。最后，您还可以利用 Grails 框架的所有优点，并且获得一个拥有独特外观的应用程序。 |
|
|
|
|
|
