问题标签 [prismic.io]

我的 nuxt 项目中有一个带有搜索字段的搜索页面。

当我输入搜索词并提交时，它会为 URL 设置一个查询参数，/search/?q=searchword但当我进行新搜索时页面没有更新。它更新 q 参数，但不调用 asyncData 来获取结果。

我试图设置watchQuery: ['q']无济于事。

我有这个 asyncData

我已经设置了这个

显然，我错过了一些东西，但我不知道是什么。

用 HTML 编辑

我一直在尝试诊断为什么我在useEffect单击一个组件时多次运行<Link>，即使依赖项为空。我找到了一个很好的方法来找出我的问题所在，使用这个答案中的解决方案。

本质上，我添加了一个useEffect记录console组件重新渲染的日志，然后我一直向上爬到树上，直到找到不重新渲染的最高级别组件。

我正在使用gatsby-plugin-layout，我AppLayout的组件是不会发生重新渲染的组件，这意味着问题出在我的页面模板中，如gatsby-source-prismic-graphql中定义的那样，这是下一个单击console时记录页面更改的树下的东西<Link>。综上所述，我不完全确定这里的问题出在哪里，或者我的内心是否有什么东西AppLayout正在gatsby-config.js抛弃它并导致这种行为发生。我该如何解决它，这样我的页面就不会不断地重新渲染？下面包括我的AppLayout和gatsby-config.js。

提前致谢。

盖茨比-config.js

应用布局.tsx

我开始使用 Prismic 作为前一个项目的无头 CMS，它运行良好，但在第二个项目中，我遇到了一个令我惊讶的问题，那就是 Prismic 无法进行简单的块引用。考虑到这个 HTML 元素在 HTML 中已经存在了几十年，这让我大吃一惊。根据他们的文档和论坛回复，他们正在考虑将其添加到他们的编辑器中，但是您必须通过使用标签并将它们应用到您的文本来跳过箍，这只是将文本包装在<span>具有您的标签名称类的标签中. 在您的前端，您必须使用 CSS 来定位这些跨度。

在他们的富文本编辑器中存在这个问题，如果您有一个要在较大的文本正文中引用的多段落块，编辑器会将它们视为多个段落，因此在您的输出中，而不是一个大块 -就像你会得到一个标准<blockquote>标签 - 你会得到多个段落包裹在单独的<span>标签中，这更难看起来像一个只有 CSS 的块。

我正在使用 的 Nuxt 应用程序中执行此操作v-html，并且由于突出显示的文本可能位于较大文本正文中的任何位置，因此我真的不想在 html 序列化程序或 api 数据中进行代码体操来识别标记的项目. 我真的不想为了解决这个问题而不得不切换到另一个 CMS 或本地降价。

当我尝试定位标签时，尝试这样做会变得很有挑战性，以使所有东西看起来都像一个大块。

1. 是否有任何 Prismic 用户知道我可以<blockquote>在 Prismic 编辑器本身的内容中实际获取标签的方法？在他们的编辑器中没有编辑原始 html 的选项，即使使用切片，我也没有看到在内容中插入标签的方法。
2. 有没有一种简单的 CSS 方法来定位这些多个段落，使它们看起来像一个块？我不是 CSS 专家，看起来它需要对填充和行高进行一些微调。

我正在使用 Prismic 构建一个 Gatsby 站点，当我们接近开发过程的尾声时，它开始拥有相当多的组件。
但是，我想知道，对于在整个站点的多个位置使用的组件，尽管它们可能具有不同的 props 或以不同的方式访问 GraphQL 查询，但它们的最佳实践是什么？例如，我有一个hero用于多个页面和模板的组件。
在一个地方，它可能用于 Prismic slice，而在另一个地方，它可能只是页面的一部分，没有slices.
考虑到这一点，如果我有一个headingwhich 将在切片的迭代中使用 模板化{slice.primary.heading.text}，而heading在 Prismic 的slices模板之外使用{document.heading.text}在这一点上，我坚持创建hero组件的多个版本，一个用于slice页面，另一个用于页面。
虽然在过去的一年里我对 React 和 Gatsby 有了一些很好的体验，但我对最佳实践还是很陌生。
这是使用多个组件的正确方法，还是有更好的方法来完成此操作？

我目前的工作流程很糟糕！这是由于对静态站点生成器缺乏经验。我有一个用 Gatsby 构建的网站。内容来自 Prismic headless CMS。我通过命令行 Git 部署到 Azure 静态 Web 应用程序。当我推送或手动运行 Github Action 时，该站点会从 Prismic 中获取所有内容，进行构建和部署。您必须首先在 Prismic 中发布，然后打开 Github 并运行操作。

Prismic 有一个 webhook 选项。您给它一个 API 端点和身份验证凭据，并且在发布内容时执行另一端的任何内容。我还在 Azure 中设置了一个 API 端点，但它现在什么都不做，只是在您访问它时返回一个字符串。

如何在 Prismic 发布内容时构建和重新部署这两者？

我正在使用 Nuxt 和 Prismic 创建产品目录网站。我目前正在从 Prismic 获取导航部分（产品类别）以显示在侧边栏中。

一切似乎都工作正常（内容加载并按预期显示），但是我在运行的终端窗口中看到以下错误npm run dev：

错误 组件/Sidebar.vue 中的错误：29:14
14:35:49 TS2339：类型 '{ data(): { header: string; 上不存在属性 'fetch' 部分：从不[]；}; 创建（）：无效；方法：{ fetch(): 承诺；}; }'。27 | }, 28 | 创建（） { 29 | this.fetch() | ^^^^^ 30 | }, 31 | 方法：{ 32 | 异步获取（）{

组件/Sidebar.vue:35:20 TS2339 中的错误：类型 '{ fetch(): Promise; 上不存在属性 '$prismic' }'。33 | 常量 = 这个；34 | // TODO : 将 Prismic 调用移动到 actions.ts - this.$store.dispatch('fetchSections') 35 | 等待这个。$prismic.api | ^^^^^^^^ 36 | .getByUID('导航', '类别') 37 | .then(function(document) { 38 | console.log(document)

components/Sidebar.vue:37:24 TS7006 中的错误：参数“document”隐式具有“any”类型。35 | 等待这个。$prismic.api 36 | .getByUID('导航', '类别') 37 | .then(function(document) { | ^^^^^^^^ 38 | console.log(document) 39 | that.heading = document.data.doc_name[0].text 40 | that.sections = document.data .nav

组件/Sidebar.vue:39:18 TS2339 中的错误：类型'{ fetch(): Promise; 上不存在属性'heading' }'。37 | .then(function(document) { 38 | console.log(document) 39 | that.heading = document.data.doc_name[0].text | ^^^^^^^ 40 | that.sections = document.data。导航 41 | }) 42 | }

components/Sidebar.vue:40:18 TS2339 中的错误：类型'{ fetch(): Promise; 上不存在属性'sections' }'。38 | console.log(文档) 39 | that.heading = document.data.doc_name[0].text 40 | that.sections = 文档.data.nav | ^^^^^^^^ 41 | }) 42 | 43 | }

组件/SidebarSection.vue:43:26 TS2339 中的错误：类型 '{ name: string; 上不存在属性 'section' 道具：{部分：{类型：ObjectConstructor；必需：布尔值；}; isCollapsed: { type: BooleanConstructor; }; }; 挂载（）：无效；}'。41 | }, 42 | 安装（）{ 43 | console.log(this.section.items[0].sub_nav_link_label[0].text) | ^^^^^^^ 44 | 45 | 46 |

尽管事实上我在 Chrome 控制台输出中没有看到任何错误。

这是export default在Sidebar.vue：

我能想到的唯一潜在问题是我正在使用以下声明文件来提供有关 Prismic API 的打字稿类型信息：https ://github.com/prismicio/prismic-vue/issues/5#issuecomment-723652806

也许我链接它的方式可能存在问题？它在一个types文件夹中，我在其中引用它：

在 tsconfig.json 中。

有没有人有什么建议？

编辑：

我只是尝试npm run dev从 VSCode 而不是单独的终端窗口中运行，现在每当我尝试使用 Prismic 类型时，我都会在整个项目中看到错误。这可能是最能说明问题的：

import { PrismicAPI } from '~/types/prismic'

找不到模块“~/types/prismic”或其相应的类型声明。

当我尝试在 Netlify 上部署我的 Gatsby 站点时，它会停止部署并抛出错误gatsby-source-prismic - invalid plugin options

本地它构建完美，我没有任何问题，我添加了一个.env文件，PRISMIC_REPOSITORY_NAME其中PRISMIC_ACCESS_TOKEN包含来自 Prismic.io 的值。

我的插件选项是：

堆栈：

我希望有人可以帮助我解决这个问题。我不知道错误是什么。

我正在构建一个 Next.js 应用程序，我需要向我的 Prismic API 服务器端请求导航内容，获取结果，并将它们传递给我的Header组件，以便我可以拥有一个持久的导航菜单。我不想在每个页面组件中都包含标题，也不想在每个页面中都查询文档。

有没有一种方法可以让我访问getServerSideProps, getStaticProps, 或getInitialProps在我的内部_app.js以便我可以拥有那个持久的导航？

这是我的_app组件，以及我的 Prismic 客户端和我的index页面组件，因此您对我正在使用的代码有所了解。

_app.js

棱镜客户端.ts

索引.tsx

我正在使用棱镜并尝试进行设置。它说要运行：

但是我得到一个错误，没有文件或目录存在。我将它与 Next.js 一起使用。

有谁知道为什么会这样？

我有这个产品结构：

我想通过uid玩具查询。但是，此查询不起作用：

不幸的是，它不起作用。