问题标签 [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.
node.js - 从容器内提供一个网格网站
我有一个使用 gridsome 构建的静态网站,我正在尝试使用 docker 容器化,并提出了以下 Dockerfile:
在通过以下方式运行容器后,Gridsome 默认使用端口 8080:
它没有失败,但我无法使用链接访问我的网站:http://localhost:8080
,容器在我运行后立即停止执行。我尝试通过以下方式从容器中复制 ``` dist/`` 文件夹:
然后使用以下命令从终端手动提供:
它从终端工作,但为什么它在容器内失败?
css - 如何将背景图像 CSS 属性转换为
元素?
我正在构建一个通过静态生成器(Gridsome,盖茨比替代品)生成的网站。这个静态站点生成器的特点之一是它输出优化的渐进图像(实时调整大小和裁剪)。
典型的图像组件如下所示:
<g-image src="~/image.png" width="500"/>
~
是我的 /src/
文件夹的别名。
有关如何使用此组件的更多详细信息的文档在这里:Gridsome -- Images
话虽如此,我想将我的 CSS 背景图像转换为<img>
元素,以便我可以利用进度图像功能。有谁知道我可以如何转换下面的 CSS 并将图像放入<g-image>
元素中?注意:出于艺术原因,我使用 CSS 伪属性来倾斜标题。
这是我的代码(使用JSFIDDLE):
HTML:
CSS:
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 原型中,以及为什么即使我添加了它,组件仍然没有出现。
vue.js - Gridsome Graphql 过滤器变量
我试图查询一个集合并过滤它取决于 $path var,但它要么返回空,要么抛出错误
对于同一页面上的另一个查询,它工作得很好
vue.js - 从本地项目文件夹中打开 vue.js 中的 pdf 文件时出错
我正在一个投资组合网站上工作,我需要在resume.pdf
单击按钮时从本地文件中打开一个文件,但我无法使其工作。我正在使用gridsome
和 vue.js。我最初尝试了这段代码:
但是当我点击链接(按钮)时,我收到了这个错误:
它转到的网址是:
之前有人问过我面临的问题:
使用VueJS 在另一个窗口中打开 PDF 文件
并使用 VueJS 打开 PDF。
我尝试使用提供的解决方案,但它们都没有真正起作用,而且我每次都遇到几乎相同的错误!我加载图像没有问题,但这个 pdf 文件不起作用。该文件位于src -> assets -> resume.pdf
. 请注意,我尝试了许多打开文件的方法,但都失败了,包括使用 vue.jsmethods
和windos.open()
javascript 或required
关键字或使用不同的方式来提供源文件的路径,例如 add@/assets/resume.pdf
等。
下面是我的 package.json 文件:
网站的预览在这里: http: //farzinnasiri.ir。当然我还没有添加pdf文件,但理论上当有人点击MY CV
按钮时,他/她应该被引导到浏览器中的简历文件......
最后一件事是我在最终构建的项目(文件夹)中找不到 pdf 文件,dist
所以也许 vue.js 一开始就无法读取文件!
请在这里给我一些帮助。感谢您的关注
amazon-web-services - AWS Vue Amplify - PreBuilt 注销组件缺失
<amplify-authenticator>
我在我的 Gridsome Vue 应用程序上使用 Cognito 登录用户并按预期工作,但我注意到“退出”按钮只有在未包含在标签中时才会显示。文档只是过时了还是有问题?
示例,而不是:
我正在写:
哪个有效。
这不遵循文档,但除此之外它似乎按预期工作。
以下是我在 main.js 中将 Amplify 添加到我的 Gridsome 项目的方法:
...
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 的插件依赖项?
vue.js - Gridsome Pages API - 在上下文中传递对象/数组
我是 Gridsome(和 GraphQL)的新手,我想构建以下内容。我有员工与项目的 n 对 n 关系,并希望为每个员工生成一个页面,列出该员工从事的所有项目。我使用 Pages API 创建页面,这是可以工作的部分。但是,传递上下文/列出每个员工的项目是行不通的。
所有数据都在标记中,如下所示: 项目:
雇员:
gridsome.server.js:
Employee.vue 中的页面查询:
现在这不起作用,至少我正在尝试将对象用作数组,但我确信它还有其他问题。我希望有人能指出我正确的方向,不幸的是 Gridsome 文档很浅。
javascript - Gridsome Vue - 路线之间的动画
我正在寻找一种解决方案来在网格中的路线之间制作动画。我想创建从左到右的全宽和全高叠加动画。当覆盖全宽时,它应该替换插槽中的内容。
我想做的是
并在方法中
风格
它几乎奏效了,但我认为这不是路线转换的好习惯。如果您知道如何制作它,我将不胜感激。谢谢
vue.js - Gridsome - 如何添加类别 slug 以发布 URL
我想将类别 slug 添加到我的博客文章的 URL 中。即:my-website.com/caterory-slug/post-slug
我正在设置这样的路径:
但是我在类别 slug 的 URL 中未定义。我可以用 ID 替换类别的 slug,它会起作用。类别的 ID 将在 URL 中。我可以在模板中访问类别的 slug,但不能在 URL 中访问。
在同一个模板中,我的图形 ql 查询如下所示:
查询的响应是: