问题标签 [static-site-generation]

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 回答
273 浏览

next.js - 如何使用自定义 App 组件在 next.js 中启用 ssg/ssr

我有一个自定义的 _app.js,如下所示:

现在,我想使用 ssg/ssr 数据获取方法来获取数据,以帮助 SEO 团队处理我的页面组件。但是,似乎任何方法都没有按预期工作,它们都没有真正将道具传递给页面组件。这是我的页面组件。

我可能肯定会错过一些东西,到目前为止我还没有弄清楚。任何帮助将不胜感激。谢谢。

0 投票
1 回答
128 浏览

svelte - 如何将 remark-math, katex 应用于我的 Elder.js 博客?

我可以问你我的问题吗?我正在尝试将 remark-math 应用于我的 Elder.js 博客。它没有正确渲染。像这样。

降价

呈现的 html

现在我的博客链接

https://twinstae.github.io/category-for-functional/

我做了以下事情。

  • npm install remark-math remark-katex
  • 将 katex css 添加到头部
  • 将所有默认管道和 remarkMath、remarkKatex 添加到 Elder.config.js

Elder.config.js

Elder.config.js 链接 https://github.com/twinstae/twinstae.github.io/blob/master/elder.config.js

备注插件链接的文档

https://www.npmjs.com/package/@elderjs/plugin-markdown#remark-plugins

我正在尝试几个插件订单,搜索,再次阅读 Elder.js 文档......

感谢您的阅读。:)

0 投票
3 回答
488 浏览

wordpress - 静态站点生成:检查 WordPress 是否可以从 172.20.0.3 向自身发出请求

我有一个在 Mac OS 之上的 docker 容器中运行的 simlpe wordpress 网站。当我尝试运行简单的静态插件时,它根本不起作用。我看不到任何日志。诊断部分显示如下失败。

在此处输入图像描述

Checking if WordPress can make requests to itself from 172.20.0.3 X FAIL

我使用 docker-compose 启动容器,如此处所述 - https://docs.docker.com/samples/wordpress/

我在这里想念什么?我真的很想生成我网站的静态版本。任何帮助表示赞赏。

我已经在这里尝试了建议的修复,但这对我不起作用。

问候,沙姆兰。

0 投票
0 回答
21 浏览

html - Nunjucks 打印宏调用命令而不是标记

我正在使用 Nunjucks 和 Metalsmith 作为静态站点生成器来创建大量 html 文件。

我正在尝试创建一个部分,我可以更改其中的一些信息,并尝试对其使用宏。但是,字符串{{ breadcrumb.levelOne( activeLink='current page title' ) }}会按原样打印在生成的 html 文件中,而不是调用宏并将我在 breadcrumb.njk 中设计的标记放入 html 文件中。

我有以下结构:

模板

  • 基地.njk

部分

  • 面包屑.njk

页面

  • 我的页面.njk

为什么会发生这种情况,我该如何解决这个问题?

0 投票
1 回答
1746 浏览

svelte - 在 SvelteKit 中设置 SSG 和 Prerender

我刚开始使用 SvelteKit 并阅读了文档。我想在我的应用程序中使用 SSG 并预渲染每个页面。我按照文档中的说明配置了我的应用程序,但似乎没有像描述的那样工作。

我想要达到的目标:

1.SSG (渲染)

在构建时将静态内容(例如<h1>, <p>)生成到 HTML 中。不要在客户端使用 JS 水合页面。我想尽可能避免这种情况,它增加了加载时间,一些用户禁用了 JS,而且它对 SEO 不友好。我真的看不出你为什么要这样做有什么好处。用 JS 生成数据只有在数据变化的时候才有用,对吧?我也看不出“不补水”和“预渲染”之间有什么区别。

2.禁用SSR

不要在服务器上运行代码并呈现页面或请求。那么我可以假设 localStorage 等可用。

3.不使用节点服务器打开app

这一点并不重要,但如果应用程序只需在本地浏览器中打开 index.html 文件即可运行,那就太好了。那时它将与 Github Pages 一起使用。在构建了一个用纯 Svelte 编写的应用程序之后,你会怎么做。

4. 仅限 SvelteKit

如果只配置 SvelteKit 就足够了,那就太好了。无需任何外部库或其他 Svelte 框架的帮助。

我试过的

这是github上的一个示例。在第一个目录中是一个可重现的示例,其中生成了构建。第二个大致是我希望构建给我的输出,我手动编写。

我开始了新的 SvelteKit 项目并通过npm i -D @sveltejs/adapter-static@next. 然后我设置svelte.config.js文件:

由于我全局关闭了 ssr,我认为使用 localStorage 是安全的。所以我在我导入的外部脚本(store.js)中使用了它。但是在构建时我收到了这个错误信息: 构建时 SvelteKit 错误

我还注意到它说“构建 SSR 捆绑包”,我想知道为什么会这样......

当我查看构建时,每个元素仍然使用 JS 呈现,并且仅在浏览器中打开它是行不通的。

这就是我想说的,感谢您的阅读和您的帮助!

Edit1:有点想通第一部分。
Hydration 仅呈现必要的内容。所以其他的可以预渲染成 HTML。客户端路由器是使用 JS 进行渲染的主要原因。所以我启用了水合作用并禁用了路由器。但是当启动应用程序时,什么都不会出现。所以我不得不启用ssr(即使我不想)。
这是如何svelte.config.js改变的:

现在内容是按照我想要的方式生成的,但是启用了 ssr。

0 投票
1 回答
854 浏览

next.js - 根据 Next.js next.config.js 中的标头或 cookie 进行重定向

我们正在使用 Next.js,并希望根据浏览器标头将所有路径(不仅仅是根路径)路由到基于区域设置的路径Accept-Language。但是,如果用户设置他们的区域,我们将设置一个 cookie,需要首先检查以尊重用户偏好。

因此,我们需要检查 cookie,如果不存在,请尝试基于浏览器语言标头进行重定向。我们使用的是 ISG,因此仅限于 next.config.js 重定向服务器端。

根据文档,这应该可以,但是由于我们使用的是 ISG,因此我们需要在next.config.js重定向功能中执行此操作。

我们已经尝试过这个解决方案,但它不起作用(我们得到无限重定向,因为 cookie 和标头匹配):

0 投票
2 回答
138 浏览

javascript - 如何将我的布局路径正确定位到使用 HTML、EJS 和 Markdown 构建的 11ty (Eleventy) 博客目录?

我正在尝试解决资产(css 和 img)文件夹的路径,但它出错或在我的 markdown 文件和 base.ejs 文件中完全找不到路径...

请帮帮我,我知道这是我的配置问题或我不太了解的问题...

Github 仓库:https ://github.com/MikeTeddyOmondi/crypto-blogs

0 投票
1 回答
98 浏览

hugo - 如何从 Hugo 的公共目录中排除图像?

我正在使用 Hugo 生成一个静态站点。我正在使用Hugo 的图像函数来创建同一图像的不同尺寸版本(160 像素、240 像素和 480 像素)。

这一切都很好,但 Hugo 还在公共目录中提供了原始图像(例如 IMG_7307.jpeg)。我不想发布原始图像。我怎么能告诉雨果不要包括他们?

Hugo 的公共目录结构的一部分

0 投票
0 回答
137 浏览

next.js - 在 GitHub 页面上托管 Nextra(Next.js 静态站点生成器)网站

几天前,我遇到了Nextra,这是一个基于Next.js的静态站点生成器。

文档解释了如何将站点部署到Vercel,我想知道是否可以将站点部署到GitHub Pages或任何其他托管静态 HTML 站点的平台。

据我了解,yarn build创建一个包含 html、css 和 js 文件的文件夹,这些文件可以上传到 GitHub pages。我在正确的轨道上吗?Nextra 页面可以分别托管在 GitHub Pages 上吗?

我找不到build包含生成的网站或类似内容的文件夹。

提前感谢您的每一个建议。

0 投票
1 回答
68 浏览

javascript - 静态站点生成器、mvc、laravel 或 plain 包括...使用什么

我很难找到合适的工具。当然,主要的句子是:“这取决于……”

我仍在构建小型公司网站,同时将“包含”用于导航、页脚、联系表单等,但有什么更好的方法呢?没有 CMS,只有静态站点,因为更新不够频繁。

我一直在研究像 11ty 这样可以完成这项工作的静态站点生成器,但我也在努力提高 php,所以我应该看看 laravel 吗?

市场上有这么多,我有点迷路了。社区用什么?得到一些想法或例子真的很棒。非常感谢您,祝您有美好的一天!