Skip to content
TS Zones

在 Astro 中使用 schema.org 标记

MDX

schema-astro.mdx
<script type="application/ld+json" set:html={JSON.stringify({
  "@context": "http://schema.org",
  "@type": "BlogPosting",
  "headline": "Next.js 在两个页面中保存组件状态",
  "description": "页面跳转了，但 input 中的 state 在页面中被保存，介绍如何在 Next.js 应用中使用 Layout 组件和 React Context API 来在不同页面间保持组件状态。",
  "author": {
    "@type": "Person",
    "name": "Tszones"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Tszones Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://blog.tszones.com/favicon.ico"
    }
  },
  "datePublished": "2024-07-13T00:00:00Z",
  "dateModified": "2024-07-13T00:00:00Z",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://blog.tszones.com/next/persist-state-between-pages/"
  },
  "image": [
    {
      "@type": "ImageObject",
      "url": "https://blog.tszones.com/_astro/persist-state-between-page.DBMlf0Lm_9BNu8.webp",
      "width": 800,
      "height": 600
    }
  ],
  "articleBody": "页面跳转了，但 input 中的 state 在页面中被保存。本文介绍了如何在 Next.js 应用中使用 Layout 组件和 React Context API 来在不同页面间保持组件状态。具体实现方式包括创建上下文、在 Layout 组件中初始化状态，以及在页面组件中使用上下文来访问和更新状态。"
})}/>

扩展阅读