问题标签 [nuxt-content]
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.
docker - @nuxt-content 在使用 Docker 环境的生产中返回 404 错误
nuxt:^2.14.6
@nuxt/内容:^1.12.0
你好,
我目前正在开发具有 SSR 模式的 nuxt 应用程序。我正在使用@nuxt/content模块来显示保存在content/fr/
文件夹中的降价文件。
在我的计算机上本地,一切正常。但是,当我在生产模式下部署原始应用程序(在远程服务器上的Docker 环境中运行)时,我收到一个404 Not Found错误,如下所示:
有没有人遇到过这个问题?有什么帮助解决这个问题吗?
谢谢 !
解决方案
您需要content
在 Dockerfile 中添加该文件夹:
nuxt.js - 如何在生产模式下使 Nuxt Content 热重载工作
我正在使用Nuxt Content来存储应用程序内容(JSON 文件)。它在开发模式下工作很酷,热重载。我网站的后端会更改内容文件夹中的任何文件,并且会立即在浏览器中更改,而无需重新加载页面。但是在生产模式下,即使在页面重新加载后也没有任何变化。我试过无条件使用处理热重载process.dev
:
但它甚至不适用于页面重新加载。如何使生产模式下的热重载无需重新加载或至少在重新加载的情况下工作
nuxt.js - 让 Nuxt.js 从 markdown frontmatter 生成路由
我正在使用nuxt-content从 markdown 文件生成一个静态站点,并试图弄清楚如何从 frontmatter 数据生成嵌套路由。例如给定一个帖子的frontmatter:
我想为 frontmatter 中列出的每个媒体项/posts/post-title/1
生成嵌套路由。/posts/post-title/2
你可以在这里看到我正在进行的工作。我有适当的功能(单击或键左/右箭头以浏览帖子和嵌套的帖子媒体),但尚未生成嵌套路由,因此这些图像丢失了。
我想我需要扩展 nuxt 的路由生成器来解析 md frontmatter 并遍历这些项目,但还没有弄清楚如何。任何帮助深表感谢。
javascript - NuxtJS:在开发中工作但在生产中工作的路由(netlify)
仍然非常学习 JS,但我正在努力解决这个问题。
在 VS 代码调试环境中,一切正常,但是当我部署到 Netlify 时,某些路由仅在某些时候工作。例如,这条路线,连同其他 /interests 路线,或者 404,加载一个空白页面,或者偶尔可以正常工作。
这些页面背后的代码在这里。/posts、/tags 和 /wip 中的其他 nuxt-content 页面都可以正常工作。
我在开发环境中没有看到与此相关的错误。我还是 js 故障排除的新手,但是当我在 Chrome 中加载开发工具时,有时会看到错误“DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.”
我研究了该错误导致我发布了有关该主题的一些帖子:
我从那里尝试了各种解决方案,包括用 v-show 替换 v-if,清理<p>
标签,以及包装各种东西,<client-only>
但问题仍然存在。
任何人都知道我做错了什么?
vue.js - Nuxt Content - 从 firebase 加载后显示内容
我们如何使用@nuxt/content
从字符串中显示降价?这个想法是,我想从我的 firestore 数据库中获取一些数据,然后显示它。
所以它会像,
现在在模板中,我只想nuxt-content
用来显示这个字符串 ( data
)
请注意,我最好@nuxt/content
只为此使用它,我知道其他降价previerers,但我也有一些静态文件正在使用同一个库进行渲染,所以我只想重用它来渲染东西也来自数据库。
nuxt.js - 根据路径获取动态 Nuxt 内容
我的 nuxt 项目中有一个文件夹结构,如下所示:
在我的页面文件夹中,我有一个 _slug.vue 文件
当我访问时/page1
一切正常,但是当我请求/doc/page2
没有页面被呈现时。现在我很困惑,因为我添加{ deep:true }
了实现这种行为,但这不起作用。如何确保文件夹结构与我的路线相似?
javascript - Nuxt.js:@pivale/nuxt-image-loader-module 不以图像样式创建图像
我正在尝试向我的网站添加动态图像缩放,因为我已经发布了很多大图像并且它开始加载非常缓慢。
我的网站是基于 nuxt 和 nuxt-content 的,代码可以在github上的一个分支中找到这个特性。该站点是静态部署的。
似乎进行这种动态图像缩放的共识包是Pivale 图像加载器模块。我对其他简单实施的解决方案持开放态度。
我已将自述文件的设置部分中建议的代码添加到我的nuxt.config.js中,创建了一个新的 vue 组件VImgNew,它调用<nuxt-img>
. 一个测试帖子比较新旧组件。
问题是 pivale 图像加载器似乎没有在 /static 中创建 image-styles 文件夹,并且绝对没有用较小的图像填充它。在开发模式下运行时,v-img-new
组件在渲染页面中不显示任何图像,并且开发控制台指示尝试加载缩略图的正确路径时出现 404 错误。
GM 已正确安装在我的系统上,使用 GM 的小型测试程序确实可以正常工作,就像gm
从命令行调用一样。
我不知道如何进一步调试或深入了解问题所在。我的控制台没有显示任何错误或警告供我遵循。
看起来有两个未解决或未解决的类似性质的未解决问题( 33和34 )。
任何指导或建议将不胜感激!
nuxt.js - 如何进行 nuxt-content 提取连接(或深度提取)?
我有多个需要加入的 json5 文件。就像在 MySQL 中一样,但是nuxt-content
对于一个static
没有SSR
. 我做了一些事情,但是当我做的时候它不起作用nuxt generate
前任:
最终对象
javascript - 如何在 Nuxt.js Nuxt/Content 博客中使用内容文件夹中的图像设置 og:image
如何获取已部署映像的最终位置的字符串表示形式,我可以将其提供给 og:image 标头代码并在部署时让 og:header 指向正确的 url?
我有一个基于 Nuxt.js 和 Nuxt Content的网站。为了使事情井井有条,我修改了通常的 nuxt 设置,以便我可以将发布的 .md 文件和它们引用的图像捆绑到一个文件夹中,而不是将所有图像保存在单独的 /static 或 /assets 文件夹中。该站点以静态/生成模式部署在 netlify 上。
当我分享帖子时,我希望 reddit 等服务选择合适的缩略图,所以我想在每个帖子上配置 og:image 标题。
Github 代码在这里。帖子位于/content/posts中,我使用降价文件中的v-img 组件来显示该帖子文件夹中的图像。
我已经想出了如何在slug 文件中为帖子添加 og:image 标题:
但是,在部署博客时,这不起作用,因为部署的图像链接发生了变化。例如,在开发模式下,this.post.image
可能指向 pos_DSC01447.jpg,但在已部署的站点中,图像已移动到 pos_DSC01447.37e98b4.jpg,其中附加位随每次部署而变化。在部署的版本中,this.post.image
缺少这个额外的位,导致 og:image 的 url 不正确。
vue.js - Nuxt/Content 中的“超出最大调用堆栈大小”
我尝试设置一个非常简单的 nuxt 内容示例,但即便如此,我Maximum call stack size exceeded
在打开 localhost:port/ 时也遇到了错误
页面/_slag.vue:
内容/索引.md:
nuxt-config.js:
包.json:
我究竟做错了什么?