# @dropinblog/react-core 中文文档

规范地址：https://npmcn.com/package/%40dropinblog/react-core/

版本：1\.1\.0
npm 元数据更新时间：2026-08-05T20:00:59.088Z
中文译文更新时间：2026-11-12T20:29:53.044Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dropinblog/react-core
原文对照：https://npmcn.com/package/%40dropinblog/react-core/?lang=original
项目主页：https://github.com/DropInBlog/react-core#readme
源码仓库：https://github.com/DropInBlog/react-core

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：114 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：0 个
- peer 依赖：react ^18\.2\.0 \|\| ^19\.0\.0-0
- 首次发布：2025-12-05T23:08:34.820Z
- 最新版本发布：2026-08-05T20:00:58.697Z
- 近 30 天下载量：7511（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 11 个）

## 中文简介

框架不可知 DropInBlog 核心工具、路由器和反应帮助器

## 安装

```sh
npm install @dropinblog/react-core
```

也可以使用：`pnpm add @dropinblog/react-core`、`yarn add @dropinblog/react-core`、`bun add @dropinblog/react-core`

## README

# @ dropinblog/ react- core (英语)

框架不可知反应帮助器,路由器工具,以及DropInBlog的API客户端.

## 特征

-   **路由器已意识到** – 为博客帖子, 分类, 作者, 以及可自定义基础路径的 pagination 的内置路由匹配 .
-   **轻量级 API 客户端** - 用自动缓存获取已获取的内容和元数据.
-   **头部和身体渲染** - 用于管理SIO标签和渲染博客内容的组件.

## 安装

```bash
npm install @dropinblog/react-core
# or
yarn add @dropinblog/react-core
```

## 配置

在环境中设置您的证书( 建议):

```bash
# For Node.js / SSR environments
DROPINBLOG_BLOG_ID=your_dropinblog_blog_id
DROPINBLOG_API_KEY=your_dropinblog_api_key

# For Vite / browser-only builds, add VITE_ prefix
VITE_DROPINBLOG_BLOG_ID=your_dropinblog_blog_id
VITE_DROPINBLOG_API_KEY=your_dropinblog_api_key
```

## 路线

`@dropinblog/react-core` 船舶是独立于任何框架的小型航道.

**说明:** 如果你已经使用 [摇篮](https://github.com/molefrog/wouter) 在您的应用程序中,使用我们的 wouter 集成包 `@dropinblog/react-wouter` 换句话说.

支持的路由模式(基准路径默认为 `/blog` 却能造化:

-   `/blog`
-   `/blog/page/{page}`
-   `/blog/category/{slug}`
-   `/blog/category/{slug}/page/{page}`
-   `/blog/author/{slug}`
-   `/blog/author/{slug}/page/{page}`
-   `/blog/{article-slug}`

## 使用量

### 提供者设置

将您的应用程序( 或博客部分) 包装为 `DropInBlogProvider`。当设定环境变量时,不需要道具:

```tsx
import { DropInBlogProvider } from "@dropinblog/react-core";

function App() {
  return (
    <DropInBlogProvider>
      <BlogPage />
    </DropInBlogProvider>
  );
}
```

您也可明确通过证书和选项:

```tsx
<DropInBlogProvider
  blogId="your_blog_id"
  apiKey="your_api_key"
  basePath="/news"        {/* default: "/blog" */}
  cacheTtlMs={60_000}     {/* default: 5 minutes */}
>
  <BlogPage />
</DropInBlogProvider>
```

### `useDropInBlogRoute` ——取出并渲染出一条路线

初通钩. 通过当前路径名并匹配一个路径,获取数据,并返回您需要渲染的所有内容.

```tsx
import {
  useDropInBlogRoute,
  DropInBlogContent,
  DropInBlogHead,
} from "@dropinblog/react-core";

function BlogPage() {
  const pathname = window.location.pathname; // or useLocation(), etc.
  const { status, resolution, error } = useDropInBlogRoute(pathname);

  if (status === "loading") return <p>Loading…</p>;
  if (status === "error") return <p>Error: {error?.message}</p>;
  if (status !== "success" || !resolution) return null;

  const { body_html, head_data, head_items } = resolution.payload;

  return (
    <>
      <DropInBlogHead headData={head_data} headItems={head_items} />
      <DropInBlogContent bodyHtml={body_html} />
    </>
  );
}
```

`resolution.match` 告诉你哪个路线匹配:

```ts
resolution.match.kind;     // "main-list" | "category-list" | "author-list" | "post"
resolution.match.params;   // { slug?: string }
resolution.match.page;     // number (for paginated routes)
```

### `useDropInBlogMatch` ——轻量级路线匹配

同步检查路径名是否匹配博客路由 **无** 正在获取任何数据 。 用于有条件渲染或活动导航链接.

```tsx
import { useDropInBlogMatch } from "@dropinblog/react-core";

function NavLink() {
  const match = useDropInBlogMatch(window.location.pathname);

  return (
    <a href="/blog" className={match ? "active" : ""}>
      Blog
    </a>
  );
}
```

回返a `RouteMatch` (与 `kind`, (中文(简体) ), `params`, (中文(简体) ), `page`)或(或) `null` 如果路径名与任何博客路径不符.

### `useDropInBlog` ——直接访问上下文

返回高级使用大小写的提供者上下文,例如手动调用API客户端.

```tsx
import { useDropInBlog } from "@dropinblog/react-core";

function LatestPost() {
  const { client } = useDropInBlog();

  useEffect(() => {
    client.fetchPost("my-post-slug").then((res) => {
      // res.body_html, res.head_data, etc.
    });
  }, []);

  // ...
}
```

返回的对象包含:

-   **`config`** ——已解析配置(blogId, basePath等)
-   **`client`** —— API 客户端有如下方法: `fetchPost()`, (中文(简体) ), `fetchCategory()`, (中文(简体) ), `fetchAuthor()`, (中文(简体) ), `fetchMainList()`,以及 `clearCache()`
-   **`router`** 用于路由匹配的路由器实例

### 构成部分

#### `DropInBlogContent`

渲染博客 HTML body.

```tsx
<DropInBlogContent
  bodyHtml={resolution.payload.body_html}
  as="section"        {/* "article" (default) | "section" | "div" */}
  className="my-blog"
/>
```

接受所有标准的 HTML 元素道具( E)`className`, (中文(简体) ), `id`, (中文(简体) ), `style`(见A/C.5/49/70,附件)。 HTML 中的内置脚本会自动执行.

#### `DropInBlogHead`

在文档中管理 SEO 元标记、 JSON- LD 计划、样式表和字体 `<head>`。 。 。 .

```tsx
<DropInBlogHead
  headData={resolution.payload.head_data}
  headItems={resolution.payload.head_items}
  immediate={true}  {/* default: true — apply to <head> via DOM */}
/>
```

-   **`immediate={true}`** (默认) — 直接写入标签 `document.head` 返回时 `null`. 适用于SPA.
-   **`immediate={false}`** - 返回管理框架的回放元素 `<head>` 他们自己.

## 要求和保证

-   18号节点(用于内置) `fetch`) (中文(简体) ).
-   以18.2反相与19反相相.
-   不依赖于快递,Next.js,Remix,React Router,或Wouter.

## 许可证

麻省理工学院 \\\\ Drop InBlog

## 常见问题

### @dropinblog/react-core 是什么？

框架不可知 DropInBlog 核心工具、路由器和反应帮助器

### 如何安装 @dropinblog/react-core？

在项目目录运行 npm install @dropinblog/react-core，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.2\.0 \|\| ^19\.0\.0-0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dropinblog/react-core 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @dropinblog/react-core 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @dropinblog/react-core 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=18。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @dropinblog/react-core 可以商用吗？

@dropinblog/react-core 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dropinblog/react-core 的下载量有多少？

根据 npm 官方下载统计，@dropinblog/react-core 在 2026/10/13 – 2026/11/11 这 30 天内被下载 7,511 次，日均约 250 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dropinblog/react-core 还在维护吗？

最新版本 1\.1\.0 发布于 2026/08/06（3 个月前）；至今共发布 11 个版本，其中过去 12 个月发布了 11 个；首次发布于 2025/12/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。