mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-13 09:07:29 +02:00
Only show 'Read More' button on blog list page when post has <!-- truncate --> token (#161)
* Only show 'Read More' button on blog list page when the text includes a <truncate> token * Remove console.log
This commit is contained in:
parent
a5320dbd36
commit
c2243a3c20
2 changed files with 19 additions and 24 deletions
|
@ -12,36 +12,35 @@ const React = require("react");
|
||||||
class BlogPost extends React.Component {
|
class BlogPost extends React.Component {
|
||||||
renderContent() {
|
renderContent() {
|
||||||
let content = this.props.content;
|
let content = this.props.content;
|
||||||
|
let hasSplit = false;
|
||||||
|
if (content.split("<!--truncate-->").length > 1) {
|
||||||
|
hasSplit = (
|
||||||
|
<div className="read-more">
|
||||||
|
<a
|
||||||
|
className="button"
|
||||||
|
href={this.props.config.baseUrl + "blog/" + this.props.post.path}>
|
||||||
|
Read More
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
if (this.props.truncate) {
|
if (this.props.truncate) {
|
||||||
content = content.split("<!--truncate-->")[0];
|
content = content.split("<!--truncate-->")[0];
|
||||||
return (
|
return (
|
||||||
<article className="post-content">
|
<article className="post-content">
|
||||||
<Marked>
|
<Marked>{content}</Marked>
|
||||||
{content}
|
{hasSplit}
|
||||||
</Marked>
|
|
||||||
<div className="read-more">
|
|
||||||
<a
|
|
||||||
className="button"
|
|
||||||
href={this.props.config.baseUrl + "blog/" + this.props.post.path}
|
|
||||||
>
|
|
||||||
Read More
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</article>
|
</article>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return <Marked>{content}</Marked>;
|
||||||
<Marked>
|
|
||||||
{content}
|
|
||||||
</Marked>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
renderAuthorPhoto() {
|
renderAuthorPhoto() {
|
||||||
const post = this.props.post;
|
const post = this.props.post;
|
||||||
const className = "authorPhoto" + ((post.author && post.authorTitle)
|
const className =
|
||||||
? " authorPhoto-big"
|
"authorPhoto" +
|
||||||
: "");
|
(post.author && post.authorTitle ? " authorPhoto-big" : "");
|
||||||
if (post.authorFBID) {
|
if (post.authorFBID) {
|
||||||
return (
|
return (
|
||||||
<div className={className}>
|
<div className={className}>
|
||||||
|
@ -60,9 +59,7 @@ class BlogPost extends React.Component {
|
||||||
return (
|
return (
|
||||||
<div className={className}>
|
<div className={className}>
|
||||||
<a href={post.authorURL} target="_blank">
|
<a href={post.authorURL} target="_blank">
|
||||||
<img
|
<img src={post.authorImage} />
|
||||||
src={post.authorImage}
|
|
||||||
/>
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -7,6 +7,4 @@ authorFBID: 661277173
|
||||||
|
|
||||||
This is a test post.
|
This is a test post.
|
||||||
|
|
||||||
<!--truncate-->
|
|
||||||
|
|
||||||
A whole bunch of other information.
|
A whole bunch of other information.
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue