@ dropinblog/ react- core (英语)
框架不可知反应帮助器,路由器工具,以及DropInBlog的API客户端.
特征
- 路由器已意识到 – 为博客帖子, 分类, 作者, 以及可自定义基础路径的 pagination 的内置路由匹配 .
- 轻量级 API 客户端 - 用自动缓存获取已获取的内容和元数据.
- 头部和身体渲染 - 用于管理SIO标签和渲染博客内容的组件.
安装
npm install @dropinblog/react-core
# or
yarn add @dropinblog/react-core
配置
在环境中设置您的证书( 建议):
# 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 船舶是独立于任何框架的小型航道.
说明: 如果你已经使用 摇篮 在您的应用程序中,使用我们的 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。当设定环境变量时,不需要道具:
import { DropInBlogProvider } from "@dropinblog/react-core";
function App() {
return (
<DropInBlogProvider>
<BlogPage />
</DropInBlogProvider>
);
}
您也可明确通过证书和选项:
<DropInBlogProvider
blogId="your_blog_id"
apiKey="your_api_key"
basePath="/news" {/* default: "/blog" */}
cacheTtlMs={60_000} {/* default: 5 minutes */}
>
<BlogPage />
</DropInBlogProvider>
useDropInBlogRoute ——取出并渲染出一条路线
初通钩. 通过当前路径名并匹配一个路径,获取数据,并返回您需要渲染的所有内容.
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 告诉你哪个路线匹配:
resolution.match.kind; // "main-list" | "category-list" | "author-list" | "post"
resolution.match.params; // { slug?: string }
resolution.match.page; // number (for paginated routes)
useDropInBlogMatch ——轻量级路线匹配
同步检查路径名是否匹配博客路由 无 正在获取任何数据 。 用于有条件渲染或活动导航链接.
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客户端.
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.
<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>。 。 。 .
<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