3G Eden
RSS除了明显糟糕的 HTML 外，该模板类似于 s3uploaded.tmpl。通过使用这个模板，代码重用不再是问题。
  |
browse.tmpl
该模板可以浏览照片和评论。
清单 5. 使用 browse.tmpl 浏览照片和评论
[% SET images = fimages() %]
[% SET comments = fcomments() %]
<html>
<head>
<title>Browse</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<ul>
[% FOR ik IN images.keys %]
<li>
[% SET image = images.$ik %]
[% image.name %]<br>
<img src="[% image.url %]"><br>
[% IF image.bucket %](in S3)[% END %]<br>
uploaded by [% image.user %]<br>
<form action="/browse" method="post" enctype="multipart/form-data">
<input type="hidden" name="deleteimageid" value="[% ik %]">
<input type="submit" value="Delete">
</form>
<form action="/browse" method="post" enctype="multipart/form-data">
<input type="hidden" name="imageid" value="[% ik %]">
Change Image Name:
<input name="name" type="text" value="[% image.name|html %]">
<input type="submit" value="Rename">
</form>
[% INCLUDE comments.tmpl ik=ik comments=comments %]
<form action="/browse" method="post" enctype="multipart/form-data">
<input type="hidden" name="user" value="[% username %]">
<input type="hidden" name="refimageid" value="[% ik %]">
Enter a Comment (as user [% username %]):
<input name="comment" type="text">
<input type="submit" value="Comment">
</form>
<form action="/browse" method="post" enctype="multipart/form-data">
<input type="hidden" name="refimageid" value="[% ik %]">
Enter Anonymous Comment:
<input name="comment" type="text">
<input type="submit" value="Comment">
</form>
</li>
[% END %]
</ul>
</body>
</html>
|
您可以使用这个模板浏览所有的照片和评论。但是这样做不太有效，而且在拥有数千照片和评论的真实网站中，这个模板几乎肯定会失效。您需要使用 SimpleDB 的优秀的 NextToken 分页模式（在这里 SimpleDB 实用函数没有有效地使用该分页模式）或您自己的工具对照片设置分页，然后只获得将要显示的照片的评论。
您肯定希望只在需要的时候收到评论。SimpleDB 请求的开销很大。因此模板每次都需要将评论传递到 comments.tmpl 模板。
模板使用了 Template Toolkit FOR 循环来遍历（未分类的）照片（如果需要进行分类，最好在 Template Toolkit 环境之外使用 Perl 代码完成这个操作）。这里要求使用照片键来选择与之匹配的评论。对于每张照片，您将显示照片名、URL、S3 状态、所有者。然后显示各种表单来删除照片、修改照片名或以匿名方式或作为用户发布评论。所有操作都很简单。
最后，comments.tmpl 模板和（INCLUDE）一些参数被包含在一起 — ik 是照片键而 comments 是评论列表 — 表示无论模板生成什么内容，都将针对每张照片从照片列表中删除。
|
comments.tmpl
该模板针对某张照片递归地浏览评论（遍历评论）。
清单 6. 使用 comments.tmpl 遍历评论
[% IF parent %]
[% SET thread = comments.$ik.$parent %]
[% ELSE %]
[% SET thread = comments.$ik.noparent %]
[% END %]
<ul>
[% FOR ck IN thread.keys %]
[% SET comment = thread.$ck %]
<li>[% comment.comment %] (by [% IF comment.user %][% comment.user %]
[% ELSE %]Anonymous[% END %])<br>
<form action="/browse" method="post" enctype="multipart/form-data">
<input type="hidden" name="deletecommentid" value="[% ck %]">
<input type="submit" value="Delete">
</form>
<form action="/browse" method="post" enctype="multipart/form-data">
<input type="hidden" name="commentid" value="[% ck %]">
Edit Comment:
<input name="comment" type="text" value="[% comment.comment|html %]">
<input type="submit" value="Edit">
</form>
<form action="/browse" method="post" enctype="multipart/form-data">
<input type="hidden" name="user" value="[% username %]">
<input type="hidden" name="refimageid" value="[% ik %]">
<input type="hidden" name="refcommentid" value="[% ck %]">
Enter a Comment (as user [% username %]):
<input name="comment" type="text">
<input type="submit" value="Comment">
</form>
<form action="/browse" method="post" enctype="multipart/form-data">
<input type="hidden" name="refimageid" value="[% ik %]">
<input type="hidden" name="refcommentid" value="[% ck %]">
Enter Anonymous Comment:
<input name="comment" type="text">
<input type="submit" value="Comment">
</form>
[% INCLUDE comments.tmpl ik=ik comments=comments parent=ck %]
</li>
[% END %]
</ul>
|
我将最好的、最困难的代码留到了最后。
对于照片键，该模板将查找该照片的所有评论，照片的父元素为一个特定的评论键。
对于相关的每张照片（具有给定的父元素或没有父元素，视情况而定），模板将显示评论本身，紧接着显示 HTML 表单来删除评论、进行编辑或输入新评论（以用户名或匿名的方式）。这与 browse.tmpl 中的表单几乎完全相同，惟一不同的是这里包含了 refcommentid 参数。
接下来是比较棘手的部分，这个模板针对找到的每个评论包含它自身，每次将 parent 设置为评论键的值。因此在伪语言（Template Toolkit）中使用递归，从而在 Perl 下运行的布局语言（HTML）中生成递归。
|
结束语
这份共 5 部分的系列文章现在已经全部结束。您在本文中了解了完整 mod_perl 站点的模板 — 使用了来自第 2 部分和第 3 部分的内容以及第 4 部分生成的代码。该站点使用 Template Toolkit、S3 和 SimpleDB 提供了照片上传、浏览、编辑、删除以及添加评论功能。（责任编辑：A6）
); }); }); if (!type || !type['type']) { type = { type : prompt("Enter your own MIME type, we couldn't find one through the browser", "image/jpeg") }; } if (type && type['type']) { ct.value = type.type; // fix up the redirect if we're about to submit var sar = form['success_action_redirect']; sar.value = sar.value + escape(name); return true; } alert("Sorry, we don't know the type for file " + filename); return false; } </script> <h1>Hi, [% username %]</h1> <form id="uploader" action="https://images.share.lifelogs.com.s3.amazonaws.com/" method="post" enctype="multipart/form-data" onSubmit="return OnSubmitForm();"> <input type="hidden" name="key" value="${filename}"> <input type="hidden" name="AWSAccessKeyId" value="[% env.AWS_KEY %]"> <input type="hidden" name="acl" value="public-read"> <input type="hidden" name="success_action_redirect" value="http://share.lifelogs.com/s3uploaded?user=[% username %]&name="> <input type="hidden" name="policy" value="[% policy %]"> <input type="hidden" name="Content-Type" value="image/jpeg"> <input type="hidden" name="signature" value="[% signature %]"> Select File to upload to S3: <input name="file" type="file"> <br> Enter a Name: <input name="name" type="text"> <br> <input type="submit" value="Upload File to S3"> </form> <form id="adder" action="/urluploaded" method="post" enctype="multipart/form-data"> <input type="hidden" name="user" value="[% username %]"> Enter a URL: <input name="url" type="text"> <br> Enter a Name: <input name="name" type="text"> <br> <input type="submit" value="Add URL"> </form> </body> </html>
时间:2009-07-13 15:12
来源:developerWorks 中国
作者:Teodor Zlatanov
原文链接
