问题标签 [jamstack]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 如何使用 React/GatsbyJS 将 Contentful 数据随机呈现到 div onClick
盖茨比/反应菜鸟在这里。
我在 Contentful 中创建了一个名为 Topic 的内容类型。每个主题都包含一个标题、描述和主题页面的 slug。目前,我能够将每个主题呈现为页面上的卡片。我现在想弄清楚的是如何一次只渲染一张卡片,并在单击旋转按钮时随机更改卡片内容(标题/说明)。
我创建了这个快速演示,以直观地展示我的目标。
这是我渲染每个主题卡的地方:
我的理解是 gatsby 在构建时为每张卡片呈现 div,所以我对用户如何在点击时操作这些数据感到困惑。
reactjs - 如何在 Gatsby.js 中动态渲染组件并使用代码拆分?
我正在使用 Gatsby 和 Contentful 构建网站,到目前为止效果很好。我的问题是,我不知道如何根据 Contentful 中的数据动态呈现组件。
假设有一个页面内容类型,它作为组件的标题、url 和字段。这些组件可以是 YouTube 播放器、降价文本或照片。目前我正在使用一个自定义组件,它导入所有可用的组件,然后使用 switch 呈现页面的组件。
这样做的问题是 Gatsby 将在 webpack 块中包含所有可用的组件,如果有很多组件,这会导致站点崩溃。假设有一个只有文本的页面(例如印记),YouTube 播放器和照片组件也会被加载 - 只是没有使用。
那么......有没有办法根据数据渲染组件,然后导致正确的代码拆分?
太感谢了!
svelte - Sapper 中的 getStaticPaths 等价物是什么?
在 NextJS 中有一个函数getStaticPaths
告诉 NextJS 在导出时哪些路由实际可用。一个典型的例子是一个博客,其帖子位于/post/[id]
. 假设有两个帖子的 ID1
和2
. 在这种情况下,getStaticPaths
将确定并返回此信息,以便 NextJS 知道,它必须呈现一个站点/posts/1
以及/posts/2
何时next export
执行。
我想知道 Sapper 中的等价物是什么。我知道有该preload
功能,但是据我了解,这应该用于获取实际的发布数据,并且不能确定导出时实际存在哪些动态路由。
javascript - 如何将参数插入 netlify 函数?
我有一个输入,它在提交到 unsplash API 时发送一个 api 调用。我正在尝试将其转换为 netlify 函数,但不确定如何将参数从输入传递到函数中。我正在尝试隐藏 API 密钥。我从来没有使用过 qs 包并查找了文档,但还没有完全弄清楚。
脚本.js
令牌-hider.js
我在我的 netlify UI 中添加了 KEY 作为环境变量,并且能够访问函数的端点。非常感谢任何帮助,因为我是无服务器功能的新手,但非常想学习 JAMstack。
vue.js - 在带有表单的几页上进行完全静态给出问题
我有一个 nuxtJS 应用程序,我正在按照这个文档来实现 Jamstack: https ://nuxtjs.org/blog/going-full-static/
我能够成功生成部署文件。当我尝试使用本地测试构建时:
nuxt serve
. 我的一些带有表单的页面因以下错误而崩溃:
请问有什么线索吗?我们在我们的应用程序中使用 API,这些 API 在某些页面上成功运行。
javascript - Netlify 表单在提交时获取 GET 而不是 POST 请求
我有一个基本的 Netlify 表单(基于本指南),其中包含name
和email
字段message
。使用以下提交功能:
非常简单,除了验证之外,我创建了一个data
对象并用一对 data[input.name] = input.value
. 一切都按预期在本地工作,以及在develop
和build
模式下。我可以看到一个POST
请求,但是,在生产中,它变成了GET
:
我已经尝试将内置更改为fetch
,axios
但结果是一样的。我不知道是否需要在我的服务器中添加一些自定义配置或如何绕过它。
我生成的 HTML 结构是:
我已经阅读了很多类似的问题、文章和指南,但没有任何帮助。
javascript - 扩展 110 个基本模板的问题
我在扩展我的 Eleventy 基本模板时遇到问题,当我尝试在同一目录中的多个页面(即 index.html、about.html)上使用它时,标记内容被复制,但我链接的 css 以及其他依赖项没有不出现。有什么我想念的吗?
在它们出现之前,我不得不手动将一些文件复制到输出文件夹。
vue.js - Nuxt 2.14 通用模式下的 target: 'static' 和 target: 'server' 之间的真正区别是什么?
在最新版本的 Nuxt (2.14) 中,他们引入了在没有更改代码时构建应用程序的优化(以显着缩短构建时间)。
我在 jamstack 中制作网站,使用 netlify 部署nuxt generate
,直到现在,使用target: 'server'
. 我尝试了新target: 'static'
功能以利用此新功能,但我的代码无法构建,因为在此模式下应用程序似乎无法访问this.$route
以生成动态页面。
所以,我的问题是:这两者有什么不同?当我切换target
到我要注意什么?
static-site - 十一:在站点地图的永久链接中生成每个类别
我使用Skeleventy生成我的静态站点。
那里的 Njk 模板使用 collections.all 为所有可能的页面生成站点地图,就像这样
生成的站点地图中的输出之一是
这是所有可能页面的集合 - 有点乱。
例如,谷歌索引每个类别而不是“全部类别”会更好
但是我如何编辑该 njk 模板,以便它在站点地图中捕获和输出不同的类别?- 排除类别/全部 - 保留其他重要页面,如主页、每篇博客文章等。