@10up/elasticpress-react 中文文档教程

Question

ElasticPress React

ElasticPress React 是一个 React 组件库，可使用 ElasticPress 增强您的无头 WordPress 网站。

Requirements

• Elasticsearch per ElasticPress requirements.
• WordPress website running ElasticPress.

Installation

要安装 ElasticPress React，只需通过 npm 安装：

npm install @10up/elasticpress-react --save

您将需要一个 Elasticsearch 实例和一个运行 ElasticPress。

Components

ElasticPressProvider

您必须使用 ElasticPressProvider 包装您的应用程序才能使用 ElasticPress 组件。

    <ElasticPressProvider
        node="http://elasticpress.test/__elasticsearch"
        indexName="elasticpresstest-post-1"
    >
        {/* ElasticPress Components */}
    </ElasticPressProvider>

Autosuggest

该组件输出一个搜索字段，在输入时会自动向用户建议结果。

import { AutosuggestField } from '@10up/elasticpress-react';

const MyComponent = () => (
    <>
        <p>Here is my fancy new component.</p>

        <p>Here's a search input with autosuggest:</p>

        <ElasticPressProvider
                node="http://elasticpress.test/__elasticsearch"
                indexName="elasticpresstest-post-1"
                loadInitialData={false}
            >
                <AutosuggestField />
            </ElasticPressProvider>
    </>
);

Screenshot

Related Content

该组件输出与帖子相关的内容。

import { RelatedContent } from '@10up/elasticpress-react';

const MyComponent = () => (
    <>
        <p>Here is my fancy new component.</p>

        <p>Here is some related content to post 5:</p>

        <RelatedContent
            wpApiRoot="https://mysite.com/wp-json"
            postId="5"
        />
    </>
);

Search and Post Results

import { PostContextProvider, SearchField, Posts } from '@10up/elasticpress-react';

const MyComponent = () => {
    // Make sure to wrap your components with the provider.
    return (
        <ElasticPressProvider
            node="http://elasticpress.test/__elasticsearch"
            indexName="elasticpresstest-post-1"
        >
            <div>
                <SearchField />
            </div>

            <div>
                <Posts />
            </div>
        </ElasticPressProvider>
    );
};

Screenshot

Support Level

活跃： 10up 正在积极致力于这个，我们希望在可预见的未来继续工作，包括保持对最新版本 WordPress 的测试。 欢迎错误报告、功能请求、问题和请求请求。

Changelog

CHANGELOG.md 中记录了对 ElasticPress React 组件的所有显着更改的完整列表。

Contributing

请阅读 CODEOFCONDUCT.md 了解我们的详细信息行为准则，CONTRIBUTING.md 有关向我们提交拉取请求的流程的详细信息和 CREDITS.md 用于维护者、贡献者和使用的库的列表由 ElasticPress React 组件组成。

Like what you see?