我想在靜態html頁面上的WordPress外加載帖子。到目前爲止,我有一個使用React的示例,http://v2.wp-api.org/和https://github.com/mzabriskie/axios。這個使用react的工作示例目前正確地顯示了帖子,但它很脆弱,並且沒有倒退。這裏的Codepen示例,https://codepen.io/krogsgard/pen/NRBqPp/在html頁面上加載WordPress帖子
我使用此示例使用axios axios.get(this.props.source)
來獲取我的供稿源。然後,我用的例子反應函數搶我的最新的三個職位,包括標題和圖像,並通過
render: function render() {
return React.createElement(
"div",
{ className: "post-wrapper" },
this.state.posts.map(function (post) {
return React.createElement(
"div",
{ key: post.link, className: "post" },
React.createElement(
"h2",
{ className: "post-title" },
React.createElement("a", {
href: post.link,
dangerouslySetInnerHTML: { __html: post.title.rendered }
})
),
post.featured_media ? React.createElement(
"a",
{ href: post.link },
React.createElement("img", { src: post._embedded['wp:featuredmedia'][0].source_url })
) : null
);
})
);
}
我博客的源WP JSON是
React.render(React.createElement(App, { source:
"myBlogURL.com/wp-json/wp/v2/posts/?_embed&per_page=3" }),
document.querySelector("#blog-post"));
哪個正確加載它們加載到一個靜態的HTML頁面我最近的3篇博客文章到<div id="blog-posts">
我正在尋找一個香草js的方式來做到這一點與一些後備助手。如果我忘記將特色圖片添加到帖子中,帖子將無法加載失敗。任何想法或例子將非常感激!