如何在 Meteor Telescope Nova 的帖子列表视图中显示 {post.body}?
How can I display the {post.body} in the Posts List view in Meteor Telescope Nova?
现在,{post.htmlBody} 将显示在个人 post 页面上,但不会显示在“帖子列表”视图中。第一个代码块是我的CustomPostsItem.jsx。您会在我试图显示顶部定义的 {post.htmlBody} 的 h3 标签下方看到。当在第二个代码块 PostsList.jsx 中调用 CustomPostsItem.jsx 时,这不会填充。当在第三个代码块 PostsPage.jsx 中调用 CustomPostsItem.jsx 时,它确实会正确填充和显示。这意味着它不会显示在我的主页上,但会显示在单独的 post 页面上,即使两次调用相同的 CustomPostsItem.jsx 也是如此。我也试过只使用 {post.body} 而不是 htmlBody 的东西,但同样的事情发生了。
import React, { PropTypes, Component } from 'react';
class CustomPostsItem extends Telescope.components.PostsItem {
render() {
({UsersAvatar, UsersName, Vote, PostsStats, PostsThumbnail} = Telescope.components);
const post = this.props.post;
const htmlBody = {__html: post.htmlBody};
let postClass = "posts-item";
if (post.sticky) postClass += " post-sticky";
// ⭐ custom code starts here ⭐
if (post.color) {
postClass += " post-"+post.color;
}
// ⭐ custom code ends here ⭐
return (
<div className={postClass}>
<div className="posts-item-vote">
<Vote post={post} currentUser={this.props.currentUser}/>
</div>
{/*post.thumbnailUrl ? <PostsThumbnail post={post}/> : null*/}
<div className="posts-item-content">
<h3 className="posts-item-title">
<a className="posts-item-title-link" href={Posts.getLink(post)} target={Posts.getLinkTarget(post)}>{post.title}</a>
{this.renderCategories()}
</h3>
<div className="posts-page-body" dangerouslySetInnerHTML={htmlBody}></div>
</div>
</div>
)
}
};
export default CustomPostsItem;
import React from 'react';
const PostsList = ({results, currentUser, hasMore, ready, count, totalCount, loadMore, showHeader = true}) => {
// console.log(results);
// console.log(ready);
// console.log(hasMore);
// console.log(totalCount);
// console.log(count);
if (!!results.length) {
return (
<div className="posts-list">
{showHeader ? <Telescope.components.PostsListHeader /> : null}
<div className="posts-list-content">
{results.map(post => <Telescope.components.PostsItem post={post} currentUser={currentUser} key={post._id}/>)}
</div>
{hasMore ? (ready ? <Telescope.components.PostsLoadMore loadMore={loadMore} count={count} totalCount={totalCount} /> : <Telescope.components.PostsLoading/>) : <Telescope.components.PostsNoMore/>}
</div>
)
} else if (!ready) {
return (
<div className="posts-list">
{showHeader ? <Telescope.components.PostsListHeader /> : null}
<div className="posts-list-content">
<Telescope.components.PostsLoading/>
</div>
</div>
)
} else {
return (
<div className="posts-list">
{showHeader ? <Telescope.components.PostsListHeader /> : null}
<div className="posts-list-content">
<Telescope.components.PostsNoResults/>
</div>
</div>
)
}
};
PostsList.displayName = "PostsList";
module.exports = PostsList;
import React from 'react';
const PostsPage = ({document, currentUser}) => {
const post = document;
const htmlBody = {__html: post.htmlBody};
return (
<div className="posts-page">
<Telescope.components.HeadTags url={Posts.getLink(post)} title={post.title} image={post.thumbnailUrl} />
<Telescope.components.PostsItem post={post}/>
<div className="posts-page-body" dangerouslySetInnerHTML={htmlBody}></div>
{/*<SocialShare url={ Posts.getLink(post) } title={ post.title }/>*/}
<Telescope.components.PostsCommentsThread document={post} currentUser={currentUser}/>
</div>
)
};
PostsPage.displayName = "PostsPage";
module.exports = PostsPage;
export default PostsPage;
body
未发布到 posts.list
视图,excerpt
是(以避免加载过多数据)。如果您也想发布 body
,请将其添加到 Posts.publishedFields.list
(参见 https://github.com/TelescopeJS/Telescope/blob/master/packages/nova-posts/lib/published_fields.js)
你可以这样做:
PublicationUtils.addToFields(Posts.publishedFields.list, ["body"]);
现在,{post.htmlBody} 将显示在个人 post 页面上,但不会显示在“帖子列表”视图中。第一个代码块是我的CustomPostsItem.jsx。您会在我试图显示顶部定义的 {post.htmlBody} 的 h3 标签下方看到。当在第二个代码块 PostsList.jsx 中调用 CustomPostsItem.jsx 时,这不会填充。当在第三个代码块 PostsPage.jsx 中调用 CustomPostsItem.jsx 时,它确实会正确填充和显示。这意味着它不会显示在我的主页上,但会显示在单独的 post 页面上,即使两次调用相同的 CustomPostsItem.jsx 也是如此。我也试过只使用 {post.body} 而不是 htmlBody 的东西,但同样的事情发生了。
import React, { PropTypes, Component } from 'react';
class CustomPostsItem extends Telescope.components.PostsItem {
render() {
({UsersAvatar, UsersName, Vote, PostsStats, PostsThumbnail} = Telescope.components);
const post = this.props.post;
const htmlBody = {__html: post.htmlBody};
let postClass = "posts-item";
if (post.sticky) postClass += " post-sticky";
// ⭐ custom code starts here ⭐
if (post.color) {
postClass += " post-"+post.color;
}
// ⭐ custom code ends here ⭐
return (
<div className={postClass}>
<div className="posts-item-vote">
<Vote post={post} currentUser={this.props.currentUser}/>
</div>
{/*post.thumbnailUrl ? <PostsThumbnail post={post}/> : null*/}
<div className="posts-item-content">
<h3 className="posts-item-title">
<a className="posts-item-title-link" href={Posts.getLink(post)} target={Posts.getLinkTarget(post)}>{post.title}</a>
{this.renderCategories()}
</h3>
<div className="posts-page-body" dangerouslySetInnerHTML={htmlBody}></div>
</div>
</div>
)
}
};
export default CustomPostsItem;
import React from 'react';
const PostsList = ({results, currentUser, hasMore, ready, count, totalCount, loadMore, showHeader = true}) => {
// console.log(results);
// console.log(ready);
// console.log(hasMore);
// console.log(totalCount);
// console.log(count);
if (!!results.length) {
return (
<div className="posts-list">
{showHeader ? <Telescope.components.PostsListHeader /> : null}
<div className="posts-list-content">
{results.map(post => <Telescope.components.PostsItem post={post} currentUser={currentUser} key={post._id}/>)}
</div>
{hasMore ? (ready ? <Telescope.components.PostsLoadMore loadMore={loadMore} count={count} totalCount={totalCount} /> : <Telescope.components.PostsLoading/>) : <Telescope.components.PostsNoMore/>}
</div>
)
} else if (!ready) {
return (
<div className="posts-list">
{showHeader ? <Telescope.components.PostsListHeader /> : null}
<div className="posts-list-content">
<Telescope.components.PostsLoading/>
</div>
</div>
)
} else {
return (
<div className="posts-list">
{showHeader ? <Telescope.components.PostsListHeader /> : null}
<div className="posts-list-content">
<Telescope.components.PostsNoResults/>
</div>
</div>
)
}
};
PostsList.displayName = "PostsList";
module.exports = PostsList;
import React from 'react';
const PostsPage = ({document, currentUser}) => {
const post = document;
const htmlBody = {__html: post.htmlBody};
return (
<div className="posts-page">
<Telescope.components.HeadTags url={Posts.getLink(post)} title={post.title} image={post.thumbnailUrl} />
<Telescope.components.PostsItem post={post}/>
<div className="posts-page-body" dangerouslySetInnerHTML={htmlBody}></div>
{/*<SocialShare url={ Posts.getLink(post) } title={ post.title }/>*/}
<Telescope.components.PostsCommentsThread document={post} currentUser={currentUser}/>
</div>
)
};
PostsPage.displayName = "PostsPage";
module.exports = PostsPage;
export default PostsPage;
body
未发布到 posts.list
视图,excerpt
是(以避免加载过多数据)。如果您也想发布 body
,请将其添加到 Posts.publishedFields.list
(参见 https://github.com/TelescopeJS/Telescope/blob/master/packages/nova-posts/lib/published_fields.js)
你可以这样做:
PublicationUtils.addToFields(Posts.publishedFields.list, ["body"]);