问题标签 [gridsome]

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

node.js - 从容器内提供一个网格网站

我有一个使用 gridsome 构建的静态网站,我正在尝试使用 docker 容器化,并提出了以下 Dockerfile:

在通过以下方式运行容器后,Gridsome 默认使用端口 8080:

它没有失败,但我无法使用链接访问我的网站:http://localhost:8080,容器在我运行后立即停止执行。我尝试通过以下方式从容器中复制 ``` dist/`` 文件夹:

然后使用以下命令从终端手动提供:

它从终端工作,但为什么它在容器内失败?

0 投票
0 回答
293 浏览

css - 如何将背景图像 CSS 属性转换为元素?

我正在构建一个通过静态生成器(Gridsome,盖茨比替代品)生成的网站。这个静态站点生成器的特点之一是它输出优化的渐进图像(实时调整大小和裁剪)。

典型的图像组件如下所示:

<g-image src="~/image.png" width="500"/>

~是我的 /src/文件夹的别名。

有关如何使用此组件的更多详细信息的文档在这里:Gridsome -- Images

话虽如此,我想将我的 CSS 背景图像转换为<img>元素,以便我可以利用进度图像功能。有谁知道我可以如何转换下面的 CSS 并将图像放入<g-image>元素中?注意:出于艺术原因,我使用 CSS 伪属性来倾斜标题。

这是我的代码(使用JSFIDDLE):

HTML:

CSS:

0 投票
1 回答
364 浏览

amazon-web-services - Gridsome + AWS Amplify - 导入事件总线中断注销按钮组件

我已经成功地将 AWS Amplify 的 Auth UI 功能和组件与 Gridsome 集成以实现简单的登录/注销功能,但是当我尝试使用 Amplify Event Bus 访问

import { AmplifyEventBus } from "aws-amplify-vue"

我得到错误:

Error in mounted hook (Promise/async): "TypeError: Cannot read property 'Logger' of undefined"

在 github 帖子上发现了一个类似的问题并添加了建议的

确实删除了警告,但 Auth UI Logout 组件将不再显示。我可以登录,但没有显示注销按钮。我不明白为什么当 UI 组件已经在没有它的情况下工作时,访问事件总线需要我将 Amplify 添加到 Vue 原型中,以及为什么即使我添加了它,组件仍然没有出现。

0 投票
0 回答
559 浏览

vue.js - Gridsome Graphql 过滤器变量

我试图查询一个集合并过滤它取决于 $path var,但它要么返回空,要么抛出错误

对于同一页面上的另一个查询,它工作得很好

0 投票
1 回答
846 浏览

vue.js - 从本地项目文件夹中打开 vue.js 中的 pdf 文件时出错

我正在一个投资组合网站上工作,我需要在resume.pdf单击按钮时从本地文件中打开一个文件,但我无法使其工作。我正在使用gridsome和 vue.js。我最初尝试了这段代码:

但是当我点击链接(按钮)时,我收到了这个错误:

它转到的网址是:

之前有人问过我面临的问题: 使用VueJS 在另一个窗口中打开 PDF 文件使用 VueJS 打开 PDF
我尝试使用提供的解决方案,但它们都没有真正起作用,而且我每次都遇到几乎相同的错误!我加载图像没有问题,但这个 pdf 文件不起作用。该文件位于src -> assets -> resume.pdf. 请注意,我尝试了许多打开文件的方法,但都失败了,包括使用 vue.jsmethodswindos.open()javascript 或required关键字或使用不同的方式来提供源文件的路径,例如 add@/assets/resume.pdf等。
下面是我的 package.json 文件:

网站的预览在这里: http: //farzinnasiri.ir。当然我还没有添加pdf文件,但理论上当有人点击MY CV按钮时,他/她应该被引导到浏览器中的简历文件......


最后一件事是我在最终构建的项目(文件夹)中找不到 pdf 文件,dist所以也许 vue.js 一开始就无法读取文件!
请在这里给我一些帮助。感谢您的关注

0 投票
1 回答
483 浏览

amazon-web-services - AWS Vue Amplify - PreBuilt 注销组件缺失

<amplify-authenticator>我在我的 Gridsome Vue 应用程序上使用 Cognito 登录用户并按预期工作,但我注意到“退出”按钮只有在未包含在标签中时才会显示。文档只是过时了还是有问题?

示例,而不是:

我正在写:

哪个有效。

这不遵循文档,但除此之外它似乎按预期工作。

以下是我在 main.js 中将 Amplify 添加到我的 Gridsome 项目的方法:

...

0 投票
1 回答
429 浏览

vue.js - Gridsome Full Calendar 构建错误 - 没有 SSR

我正在尝试在 Gridsome 项目中使用完整日历 vue 组件( https://github.com/fullcalendar/fullcalendar-vue ),如下所示:

但是,这会在构建时产生错误:

我了解完整日历不支持 SSR。因此,根据 Gridsome 文档(https://gridsome.org/docs/assets-scripts/#without-ssr-support),我这样做是为了导入组件:

我在 gridsome.config.js 中为它的依赖项创建了一个别名,如下所示:

并在mounted() 生命周期钩子中需要这些插件:

然后我将 FullCalendar 组件包装在:

mount() 挂钩中所需的额外依赖项没有问题。

但是我现在收到以下错误:

似乎 components() 无法导入“@fullcalendar/vue”组件。

导入“@fullcalendar/vue”组件时我做错了吗?

是否有另一种方法可以同时包含“@fullcalendar/vue”组件和没有 SSR 的插件依赖项?

0 投票
1 回答
485 浏览

vue.js - Gridsome Pages API - 在上下文中传递对象/数组

我是 Gridsome(和 GraphQL)的新手,我想构建以下内容。我有员工与项目的 n 对 n 关系,并希望为每个员工生成一个页面,列出该员工从事的所有项目。我使用 Pages API 创建页面,这是可以工作的部分。但是,传递上下文/列出每个员工的项目是行不通的。

所有数据都在标记中,如下所示: 项目:

雇员:

gridsome.server.js:

Employee.vue 中的页面查询:

现在这不起作用,至少我正在尝试将对象用作数组,但我确信它还有其他问题。我希望有人能指出我正确的方向,不幸的是 Gridsome 文档很浅。

0 投票
1 回答
126 浏览

javascript - Gridsome Vue - 路线之间的动画

我正在寻找一种解决方案来在网格中的路线之间制作动画。我想创建从左到右的全宽和全高叠加动画。当覆盖全宽时,它应该替换插槽中的内容。

我想做的是

并在方法中

风格

它几乎奏效了,但我认为这不是路线转换的好习惯。如果您知道如何制作它,我将不胜感激。谢谢

0 投票
0 回答
311 浏览

vue.js - Gridsome - 如何添加类别 slug 以发布 URL

我想将类别 slug 添加到我的博客文章的 URL 中。即:my-website.com/caterory-slug/post-slug

我正在设置这样的路径:

但是我在类别 slug 的 URL 中未定义。我可以用 ID 替换类别的 slug,它会起作用。类别的 ID 将在 URL 中。我可以在模板中访问类别的 slug,但不能在 URL 中访问。

在同一个模板中,我的图形 ql 查询如下所示:

查询的响应是: