react获取api_使用React和WordPress API在您的网站上获取博客

react获取api

I’ve read a lot of articles in the last few months, and have noticed that many had disclaimers saying that the post was originally posted on a personal blog. I’ve written a few articles and wanted to increase my exposure, so I decided that I wanted to have a blog on my site as well. But how to do it?

在过去的几个月中，我阅读了许多文章，并且注意到许多人都表示免责声明该帖子最初发布在个人博客上。 我写了几篇文章，并希望增加曝光率，所以我决定也要在自己的网站上建立一个博客。 但是怎么做呢？

选件 (Options)

There were a few options for incorporating a blog into my site. The main two were a custom content management system (CMS) or WordPress. I wanted to get it set up quickly, so I went with WordPress.

有几种选择可以将博客合并到我的网站中。 主要的两个是自定义内容管理系统(CMS)或WordPress。 我想快速设置它，所以我选择了WordPress。

WordPress API (WordPress API)

I’d heard a few things about the WordPress API over the last few weeks so started to Google. I set up a free blog at WordPress.com and imported my articles from Medium. This was super simple with Medium’s export facility and WordPress’s “import from Medium” facility.

在过去的几周里，我听说了有关WordPress API的一些事情，因此开始接触Google。 我在WordPress.com上建立了免费博客，并从Medium导入了我的文章。 使用Medium的导出工具和WordPress的“从Medium导入”工具，这非常简单。

Now that I had my articles on WordPress, I had to figure out how to access them. I found this page in the documentation and I built a very basic web page to test with.

既然我在WordPress上有文章，我就必须弄清楚如何访问它们。 我在文档中找到此页面 ，并构建了一个非常基本的网页进行测试。

This does the very simple task of calling the WordPress API and asking for all of the posts from “YourSite.wordpress.com.” From this, I got a response object containing the number of posts and an array of each of the posts.

这完成了非常简单的任务，即调用WordPress API并从“ YourSite.wordpress.com”索取所有帖子。 由此，我得到了一个响应对象，其中包含帖子数和每个帖子的数组。

路由 (Routing)

Now that I was going to add a blog section to my site, I had to change from the single page that I had. I installed react-router-dom and imported BrowserRouter and Route into my layout file.

现在，我要在自己的网站上添加一个博客部分，因此我不得不从原来的单个页面进行更改。 我安装了react-router-dom并将BrowserRouter和Route导入到我的布局文件中。

<BrowserRouter>
    <div id="center-stripe">
        <Nav />
        <Route exact path="/" component={main} />
        <Route exact path="/blog" component={Blog} />
    </div>
</BrowserRouter>

在React中创建博客 (Creating the Blog in React)

My personal website is built using create-react-app and has a very basic structure. The next thing that I needed to do was to add a new “blog” page that would show previews of all the articles.

我的个人网站是使用create-react-app构建的，具有非常基本的结构。 我需要做的下一件事是添加一个新的“博客”页面，该页面将显示所有文章的预览。

I’ll talk you through this code. The top section sets the state of the component with an empty array of posts. Then I use the componentDidMount function to execute the call to the WordPress API with axios. When the API call returns, I set this.state.posts to be the array of posts. This then causes line 24 to render an ArticlePreview component for each of the posts.

我将通过这段代码与您讨论。 顶部部分使用空的帖子数组设置组件的状态。 然后，我使用componentDidMount函数使用axios执行对WordPress API的调用。 当API调用返回时，我将this.state.posts设置为帖子数组。 然后，这使第24行为每个帖子呈现ArticlePreview组件。

ArticlePreview takes each post and renders the preview with a title and excerpt, which are both provided by the WordPress API. If the post also has a featured image, it includes that too.

ArticlePreview接受每个帖子，并使用WordPress API提供的标题和摘录来呈现预览。 如果帖子中也有特色图片，则也包含该图片。

I reused a lot of the CSS from the rest of the website to style the article previews, and it looks quite good. One major error is the “<p>I&#8217;” and similar bits dotted throughout the excerpt. To solve this, I set the excerpt to run though a removeUnicode() function before being rendered to the screen. It simply replaced all &#8217 with just a comma and removed the <p> and [&hellip;]tags. It’s not elegant, but it works.

我重复使用了网站其余部分的许多CSS来设置文章预览的样式，而且看起来还不错。 一个主要错误是“ <p> I＆＃8217;” 整个摘录中点缀着类似的内容。 为了解决这个问题，我将摘录设置为在显示到屏幕之前通过removeUnicode()函数运行。 它只是用逗号替换了所有&#8217并删除了<p> and [&hellip;]标签。 它不优雅，但可以。

I then had to create a component for whole articles. I added another route for /blog/:id and started on the new component. It was almost identical to the ArticlePreview component, except that instead of rendering just the excerpt, it would render one article. Getting the article from WordPress was very simple, just adding the article ID onto the end of the previous API call.

然后，我不得不为整个文章创建一个组件。 我为/blog/:id添加了另一条路由，并从新组件开始。 它几乎与ArticlePreview组件相同，只是它会呈现一篇文章，而不是仅呈现摘录。 从WordPress获取文章非常简单，只需将文章ID添加到上一个API调用的末尾即可。

axios.get(
    "http://public-api.wordpress.com/rest/v1/sites/samwcoding.wordpress.com/posts/" +
    this.props.match.params.id
)

Getting the article response was where I hit my first stumbling block. The body of the article was in stringified HTML format. I found a solution with the dangerouslySetInnerHTML function. (If anyone has any suggestions on how to implement this better, please let me know.)

得到文章回应是我第一个绊脚石。 本文的正文为字符串化HTML格式。 我找到了带有dangerouslySetInnerHTML函数的解决方案。 (如果有人对如何更好地实现这一点有任何建议，请告诉我。)

I had a few more changes to make. The nav buttons at the top just connected to anchor tags. That worked fine on a single page website, but now they were sending users to /blog#about, which doesn’t work. This was solved by defining the link specifically as /#about and /#projects .

我还需要进行一些更改。 顶部的导航按钮刚刚连接到锚标签。 在单个页面的网站上运行正常，但现在他们将用户发送到/blog#about ，此方法不起作用。 通过将链接专门定义为/#about和/#projects解决此问题。

The blog works well with the number of articles I currently have written, but how will it cope when there are 50 or 100 articles? In the future I may have to render a few of the article previews at a time, rendering more if the user scrolls to the bottom. Another feature I could add is searching.

该博客适用于我目前撰写的文章数量，但是当有50或100篇文章时，它将如何应对？ 将来，我可能必须一次渲染一些文章预览，如果用户滚动到底部，则渲染更多。 我可以添加的另一个功能是搜索。

Check out the blog at SamWSoftware blog and view my whole code here.

在SamWSoftware博客上查看该博客，并在此处查看我的整个代码 。

翻译自: https://www.freecodecamp.org/news/get-a-blog-on-your-website-with-react-and-wordpress-api-c63ff81b388e/

react获取api