问题标签 [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.

0 投票
1 回答
323 浏览

reactjs - 如何使用 React/GatsbyJS 将 Contentful 数据随机呈现到 div onClick

盖茨比/反应菜鸟在这里。

我在 Contentful 中创建了一个名为 Topic 的内容类型。每个主题都包含一个标题、描述和主题页面的 slug。目前,我能够将每个主题呈现为页面上的卡片。我现在想弄清楚的是如何一次只渲染一张卡片,并在单击旋转按钮时随机更改卡片内容(标题/说明)。

我创建了这个快速演示,以直观地展示我的目标。

这是我渲染每个主题卡的地方:

我的理解是 gatsby 在构建时为每张卡片呈现 div,所以我对用户如何在点击时操作这些数据感到困惑。

0 投票
2 回答
1038 浏览

reactjs - 如何在 Gatsby.js 中动态渲染组件并使用代码拆分?

我正在使用 Gatsby 和 Contentful 构建网站,到目前为止效果很好。我的问题是,我不知道如何根据 Contentful 中的数据动态呈现组件。

假设有一个页面内容类型,它作为组件的标题、url 和字段。这些组件可以是 YouTube 播放器、降价文本或照片。目前我正在使用一个自定义组件,它导入所有可用的组件,然后使用 switch 呈现页面的组件。

这样做的问题是 Gatsby 将在 webpack 块中包含所有可用的组件,如果有很多组件,这会导致站点崩溃。假设有一个只有文本的页面(例如印记),YouTube 播放器和照片组件也会被加载 - 只是没有使用。

那么......有没有办法根据数据渲染组件,然后导致正确的代码拆分?

太感谢了!

0 投票
1 回答
135 浏览

svelte - Sapper 中的 getStaticPaths 等价物是什么?

在 NextJS 中有一个函数getStaticPaths告诉 NextJS 在导出时哪些路由实际可用。一个典型的例子是一个博客,其帖子位于/post/[id]. 假设有两个帖子的 ID12. 在这种情况下,getStaticPaths将确定并返回此信息,以便 NextJS 知道,它必须呈现一个站点/posts/1以及/posts/2何时next export执行。

我想知道 Sapper 中的等价物是什么。我知道有该preload功能,但是据我了解,这应该用于获取实际的发布数据,并且不能确定导出时实际存在哪些动态路由。

0 投票
1 回答
411 浏览

javascript - 如何将参数插入 netlify 函数?

我有一个输入,它在提交到 unsplash API 时发送一个 api 调用。我正在尝试将其转换为 netlify 函数,但不确定如何将参数从输入传递到函数中。我正在尝试隐藏 API 密钥。我从来没有使用过 qs 包并查找了文档,但还没有完全弄清楚。

脚本.js

令牌-hider.js

我在我的 netlify UI 中添加了 KEY 作为环境变量,并且能够访问函数的端点。非常感谢任何帮助,因为我是无服务器功能的新手,但非常想学习 JAMstack。

0 投票
0 回答
69 浏览

vue.js - 在带有表单的几页上进行完全静态给出问题

我有一个 nuxtJS 应用程序,我正在按照这个文档来实现 Jamstack: https ://nuxtjs.org/blog/going-full-static/

我能够成功生成部署文件。当我尝试使用本地测试构建时: nuxt serve. 我的一些带有表单的页面因以下错误而崩溃:

请问有什么线索吗?我们在我们的应用程序中使用 API,这些 API 在某些页面上成功运行。

0 投票
1 回答
153 浏览

javascript - Netlify 表单在提交时获取 GET 而不是 POST 请求

我有一个基本的 Netlify 表单(基于本指南),其中包含nameemail字段message。使用以下提交功能:

非常简单,除了验证之外,我创建了一个data对象并用一对 data[input.name] = input.value. 一切都按预期在本地工作,以及在developbuild模式下。我可以看到一个POST请求,但是,在生产中,它变成了GET

在生产中获取请求

我已经尝试将内置更改为fetchaxios但结果是一样的。我不知道是否需要在我的服务器中添加一些自定义配置或如何绕过它。

我生成的 HTML 结构是:

我已经阅读了很多类似的问题、文章和指南,但没有任何帮助。

0 投票
0 回答
50 浏览

javascript - 扩展 110 个基本模板的问题

我在扩展我的 Eleventy 基本模板时遇到问题,当我尝试在同一目录中的多个页面(即 index.html、about.html)上使用它时,标记内容被复制,但我链接的 css 以及其他依赖项没有不出现。有什么我想念的吗?

在它们出现之前,我不得不手动将一些文件复制到输出文件夹。

0 投票
1 回答
6993 浏览

vue.js - Nuxt 2.14 通用模式下的 target: 'static' 和 target: 'server' 之间的真正区别是什么?

在最新版本的 Nuxt (2.14) 中,他们引入了在没有更改代码时构建应用程序的优化(以显着缩短构建时间)。

我在 jamstack 中制作网站,使用 netlify 部署nuxt generate,直到现在,使用target: 'server'. 我尝试了新target: 'static'功能以利用此新功能,但我的代码无法构建,因为在此模式下应用程序似乎无法访问this.$route以生成动态页面。

所以,我的问题是:这两者有什么不同?当我切换target到我要注意什么?

0 投票
1 回答
111 浏览

netlify - 使用 Netlify CMS 为 Hugo 制作多语言内容文件夹模板

关于如何为服务于内容页面的 Netlify CMS 模板制作更深的子文件夹结构的任何想法。是否可以使用 Netlify CMS config.yml 模板来完成。

这就是我目前所拥有的:

/内容/主题文件夹/主题部分文件夹/语言文件.md

雨果结构

目前我有这个

0 投票
1 回答
110 浏览

static-site - 十一:在站点地图的永久链接中生成每个类别

我使用Skeleventy生成我的静态站点。

那里的 Njk 模板使用 collections.all 为所有可能的页面生成站点地图,就像这样

生成的站点地图中的输出之一是

这是所有可能页面的集合 - 有点乱。

例如,谷歌索引每个类别而不是“全部类别”会更好

但是我如何编辑该 njk 模板,以便它在站点地图中捕获和输出不同的类别?- 排除类别/全部 - 保留其他重要页面,如主页、每篇博客文章等。