article

article 模板渲染文章页面,其中包含文章的全部内容,以及一个可选的客户评论部分。这个模板用于博客集合中的每一篇文章。

image.png

位置

article模板位于主题的templates目录中:

└── theme
├── layout
├── templates
| ...
| ├── article.json
| ...
...

内容

你应该在 article 模板或模板内的某个 section 中包含以下内容:

Article 对象

你可以访问 Handlebars article 对象来显示文章的详细信息。

Comment 表单

可以通过使用 Handlebars form helper 和附带的 'new_comment', article 参数来添加评论表单。在 form helper 内部,你需要包含以下内容:

Inputtypename
Nametextcomment[author]
Emailemailcomment[email]
Commenttextareacomment[body]

例如:

{{#form 'new_comment' article}}
{{form.errors.messages}}
<div class="input-item__name">
<label for="name">Name</label>
<input name="comment[author]" type="text" value="{{ form.author }}">
</div>
<div class="input-item__email">
<label for="email">Email Address</label>
<input name="comment[email]" type="email" value="{{ form.email }}">
</div>
<div class="input-item__comment">
<label for="comment">Comment Content</label>
<textarea name="comment[body]">{{ form.body }}</textarea>
</div>
<div class="control__submit">
<button class="button" type="submit">Submit Comment</button>
</div>
{{/form}}
提示

当客户发布评论时,你的代码应该提供反馈,指示评论是否已成功发布,或者是否存在任何错误。


用法

在使用 article 模板时,你应该熟悉对文章评论进行分页处理的方式。

提示

如果你使用的是 JSON templates,那么任何 HTML 或 Handlebars 代码都需要包含在模板引用的section中。

对文章评论进行分页

文章评论可以通过 article 对象访问,并且每页有 50 条的限制。因此,你应该对文章评论进行分页,以确保它们都可以被访问:

{{#paginate article.comments by=50}}
{{#for article.comments as |comment|}}
<!-- comment info -->
{{/for}}

{{#if paginate.pages > 1}}
<a href='{{paginate.previous.url}}'>previous</a>
<span>{{paginate.current_page}}/{{paginate.pages}}</span>
<a href='{{paginate.next.url}}'>next</a>
{{/if}}
{{/paginate}}
这篇文章对你有帮助吗?