程序以及基本可用了，需要繼續(xù)完善頁面
1.創(chuàng)建頁面模板
創(chuàng)建文件 app/views/tags/display.html
*{ Display a post in one of these modes: 'full', 'home' or 'teaser' }* <div class="post ${_as == 'teaser' ? 'teaser' : ''}"> <h2 class="post-title"> <a href="#">${_post.title}</a> </h2> <div class="post-metadata"> <span class="post-author">by ${_post.author.fullname}</span>, <span class="post-date">${_post.postedAt.format('dd MMM yy')}</span> #{if _as != 'full'} <span class="post-comments"> | ${_post.comments.size() ?: 'no'} comment${_post.comments.size().pluralize()} #{if _post.comments} , latest by ${_post.comments[0].author} #{/if} </span> #{/if} </div> #{if _as != 'teaser'} <div class="post-content"> <div class="about">Detail: </div> ${_post.content.nl2br()} </div> #{/if}</div> #{if _as == 'full'} <div class="comments"> <h3> ${_post.comments.size() ?: 'no'} comment${_post.comments.size().pluralize()} </h3> #{list items:_post.comments, as:'comment'} <div class="comment"> <div class="comment-metadata"> <span class="comment-author">by ${comment.author},</span> <span class="comment-date"> ${comment.postedAt.format('dd MMM yy')} </span> </div> <div class="comment-content"> <div class="about">Detail: </div> ${comment.content.escape().nl2br()} </div> </div> #{/list} </div>#{/if}
修改index.html
#{extends 'main.html' /}#{set title:'Home' /} #{if frontPost} #{display post:frontPost, as:'home' /} #{if olderPosts.size()} <div class="older-posts"> <h3>Older posts <span class="from">from this blog</span></h3> #{list items:olderPosts, as:'oldPost'} #{display post:oldPost, as:'teaser' /} #{/list} </div> #{/if} #{/if} #{else} <div class="empty"> There is currently nothing to read here. </div>#{/else}
2.修改Layout views/main.html
<!DOCTYPE html><html> <head> <title>#{get 'title' /}</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/CSS" media="screen" href="@{'/public/stylesheets/main.css'}"> <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}"> </head> <body> <div id="header"> <div id="logo"> yabe. </div> <ul id="tools"> <li> <a href="#">Log in to write something</a> </li> </ul> <div id="title"> <span class="about">About this blog</span> <h1><a href="#">${blogTitle}</a></h1> <h2>${blogBaseline}</h2> </div> </div> <div id="main"> #{doLayout /} </div> <p id="footer"> Yabe is a (not that) powerful blog engine built with the <a >Play framework</a> as a tutorial application. </p> </body></html>
3. Application.java 中添加方法，在頁面上添加元素
添加渲染 blog.title blog.baseline
4.修改配置文件 conf/application.conf
# Blog engine configuration# ~~~~~blog.title=Yet another blogblog.baseline=We won't write about anything
5.添加頁面樣式
CSS: http://play-framework.herokuapp.com/zh/files/main.css
添加到 /public/stylesheets/main.css
運(yùn)行效果：
..
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
