问题标签 [dynamic-pages]

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 投票
0 回答
26 浏览

reactjs - 单击查看所有按钮时,如何实现类似电子商务的功能以查看网格中存在于行滑块中的所有项目?

我正在自定义在 nextjs、laravel、react-query、restAPI 中制作的现有应用程序的登录页面。我对登录页面进行了一些更改,并添加了四个卡片组件,并将它们命名为“本周热门类别”、“新鲜食品”、“推荐”等。每个组件卡都有 30 到 40 个从 restAPI 获取的产品图像,并将它们包装在一个 react-slider 中,在一张幻灯片中显示 3 个产品。每个组件都有查看所有按钮,我想要一个功能,当单击它时,只需在具有指定路径的同一窗口中以网格方式显示所有产品。

这是我从中获取获取的数据并映射以显示产品图像的查询-

如何使用 getStaticProps 和 getStaticPaths 为其生成动态路径?

0 投票
0 回答
44 浏览

javascript - 使用 SVG 图像和 JS 创建动态页面

我的一个图形朋友请我帮忙制作带有动作的动态 svg 屏幕。为了实现这一点,我考虑过使用 JS,并且能够采取必要的措施。svg 屏幕的另一个规格是宽度等于 700 像素,高度等于 1000 像素。

出现的问题是在scoll阶段。我描述了问题...屏幕是垂直放置的,因此您需要向下滚动页面,然后在每个单独的屏幕上执行操作。

我要达到的目标是确保一旦完成单个屏幕上的操作,当前屏幕自动消失,并通过向下滚动页面显示下一个屏幕。所以我创建了一个解胶函数,设置scrollY (1000)属性并向下移动页面。我遇到的问题是我无法理解它的来源,例如,在第一个屏幕上完成操作后(通过单击闪烁的文本),我到达第二个但它没有居中。

我想在整个第一个屏幕消失并且可以看到整个第二个屏幕的时候。此外,一旦您到达最后一个并完成操作,我应该能够返回到第一个屏幕。

您有什么建议或意见吗?

如果我只发布了前两个屏幕,那么 Soffy,但我已经超过了单个答案的代码限制。

链接到 codepen 进行测试:codepen html 代码 via codepen.io:

0 投票
1 回答
95 浏览

.htaccess - Nextjs动态页面在服务器刷新时不出现(构建后)

我在构建后的 nextjs 应用程序中遇到问题,在服务器中,我可以访问所有页面,但是当我用动态路径刷新页面时(页面文章是一个文件夹包含一个 [id].js 页面,id 是文章标题)此错误显示在导航器上:

未找到

在此服务器上找不到请求的 URL。

Apache/2.4.41 (Ubuntu) 服务器在 myDomain.com 端口 80

我的.htaccess文件包含:

我的 htaccess 文件中是否有任何问题,或者我必须在我的应用程序代码中配置另一个文件?

0 投票
1 回答
28 浏览

reactjs - (Gatbsy-React) 动态路径:如何持久化使用 API 动态创建的页面以供 Google Bot 抓取,并由用户直接访问

我有这个大问题。我为汽车零部件市场开发了一个 Gatsby 网站。用户可以选择汽车型号和零件类型,并收到一个页面,其中包含他们特定汽车的零件。

我使用 React Route 动态创建新路径和调用数据的 API:https://mysiteAPI.com/{car.id}/{part.id}

将创建的路径类似于:https://mysite.com/comparison/{car.name}-{part.name}

我遇到的最大问题是只有当我点击时才会创建这条路径

使用这种方法,我在构建网站时无法生成页面,但只有在用户点击时才会生成页面。

实际上,出于 SEO 的原因,我需要这些页面可以从搜索引擎爬虫中读取。

我试图创建在 Gatsby Node 中插入 CreatePage 的每个页面,但由于页面数量巨大(超过 500 万),系统崩溃了。

我不知道如何生成可以被 crowler 读取并持久化的页面。我希望你们中的某个人可以帮助我改进我的网站。

提前致谢

0 投票
0 回答
42 浏览

next.js - 如何阻止 nextjs 对带有参数的路由进行服务器调用?

场景:我有一个这样的 url/posts/:id/edit 使用标准 nextjs 结构,文件位于 posts -> [id] -> edit.tsx

在这个 url 中,我们从 id 进行 AJAX 调用,从 react 获取帖子并向用户显示编辑表单。

我们希望避免 nextjs 每次调用服务器并为每个 id 运行 getStaticProps 和 getStaticPaths 的麻烦。

为所有不同的 id 重用 getStaticProps 就足够了,

而且我们根本不需要 getgetStaticPaths方法,但接下来会强制使用它。

现在 next 在 .next/static/pages 下为每个可能的 id 生成一个 html,json 对,从而导致大量无用数据。

所有不同的帖子 id 都有相同的 props,基本上对于这个特定的页面,我们想要返回,不管 id 相同的 js 和 html 返回,然后停止创建这么多页面并运行 getStaticPaths。

没有方法我们不能保留页面,否则下一次构建或启动不起作用。

知道如何优化这个用例吗?我们有很多这样的场景,还有电子邮件确认令牌等,在 .next/static/pages 下为每个 id 生成数十万个无用的 html。我们现在有 cron 作业删除那些但不是正确的解决方案

0 投票
2 回答
51 浏览

razor - Blazor - 需要动态创建页面

在我的应用程序中,我想创建 N 个页面,其中每个页面可能有一组不同的控件(再次动态填充)。

这是流程,我将选择一个文件,该文件将说明有多少页面以及每个页面要填充哪些控件。

例如,下面是文件的内容。

我创建了一个 Blazor 页面并编写了 HTML 代码来动态填充控件。但我不确定如何动态创建 Blazor 页面,以便在我的情况下,我可以创建两个页面。

任何输入都会有所帮助。

0 投票
0 回答
15 浏览

flutter - Flutter for web,制作动态页面,将 url 子目录中的字符串呈现到屏幕上

正如标题所示,我想创建一个网页,如果我在子目录的末尾放置一些内容,生成的页面将包含屏幕上某处的文本,使用任何方法,如 GetX 或默认的颤振框架小部件或任何包。这样做的目的是不创建后端数据库,而是让用户通过将其添加到 url 子目录的末尾来创建自己的链接/页面。

之后,我想实现一个文本字段,进一步更新子目录,用页面/屏幕上的字符串更新页面。

如果可以在单个页面上完成会更好,如果不能,我可能必须为文本字段创建一个单独的页面。

示例网站