gatsby_使用Gatsby加载外部JS文件

最新推荐文章于 2020-12-03 07:17:56 发布
最新推荐文章于 2020-12-03 07:17:56 发布
阅读量304 收藏
点赞数
文章标签： js javascript java css vue ViewUI
原文链接：https://flaviocopes.com/gatsby-load-external-js/
版权
本文介绍了在Gatsby（一个基于React的静态站点生成器）中如何处理包含外部JavaScript文件的情况，特别是如何在页面加载时添加和管理这些脚本，以实现如Wistia视频嵌入等功能。
摘要由CSDN通过智能技术生成

gatsby

In the modern JavaScript Web Development workflow it’s quite common to install JavaScript via npm packages.

在现代JavaScript Web开发工作流程中，通过npm软件包安装JavaScript是很常见的。

Sometimes however we must include an external JavaScript file, and modern tools might make this a little difficult.

但是有时我们必须包括一个外部JavaScript文件，而现代工具可能会使此操作有些困难。

In particular I had the need to include a video from Wistia in my site, and after a quick look everything looked quite more complicated than I wanted.

特别是，我需要在我的网站中包含来自Wistia的视频，快速浏览后，所有内容看起来都比我想要的复杂得多。

Wistia gave me this HTML snippet to embed:

Wistia给了我这个要嵌入HTML代码段： 

<script src="https://fast.wistia.com/embed/medias/VIDEOURL.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" asy
最低0.47元/天 解锁文章
cuk0051
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
gatsby-blog：我制作了一个探索gatsbyjs的简单博客
02-15
盖茨比的默认启动器 使用此默认样板启动您的项目。 该入门工具随附主要的Gatsby配置文件，您可能需要使用React的快速应用生成器快速启动并运行。 还有其他更具体的想法吗？ 您可能需要查看我们充满活力的集合。 :rocket: 快速开始 创建一个Gatsby网站。 使用Gatsby CLI创建一个新站点，并指定默认启动器。 # create a new Gatsby site using the default starter gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default 开始开发。 导航到新站点的目录并启动。 cd my-default-starter/ gatsby develop 打开源代码并开始编辑！ 您的站点现在在http://localhost:8000 ！
打造个人博客的绝佳选择——Gatsby JS，让你的网站速度飞起来！
最新发布
Coco_Code的博客
01-30 421
Gatsby JS是一个基于React的静态网站生成器，它利用React的组件化思想，将静态页面与动态数据分离，使得开发者可以更加高效地构建高性能的静态网站。
怎么给网站加js_更现代化的建站方式——Gatsby.js系列教程(一)：简介&搭建环境等
weixin_39735509的博客
12-03 139
作为一名程序员，或许都有着建立一个个人网站或博客的想法。在平台太寄人篱下，老牌CSDN、博客园…后起之秀掘金、思否、简书甚至知乎…都是如此，动不动就审核不通过、违规、删帖、限流…虽然很多时候我们都不知道怎么违规：）这很打击创作热情！影响写文兴致！所以很多人把主力空间转而选择Github Pages、CDN甚至买vps、服务器，来搭建自己的网站，静态或动态。这是自己的地盘！我的地盘我做主！关于建站或...
gatsbyjs 了解
weixin_33674976的博客
11-03 381
1.  模型 2. 总结&amp;&amp;资料 从模型上可以看出和jamstack 提出的架构模型比较相似，可以看成是一个具体的实现，功能还是比较强大的 https://www.gatsbyjs.org        ...
gatsbyjs 使用
weixin_33790053的博客
11-04 276
1. 安装 npm install --global gatsby-cli 2. 使用 // 创建项目 gatsby new dalong cd dalong // 启动 gatsby develop -- 使用的是热加载端口 8000 // 编辑源码 src/pages. // 生产构建 gatsby build -- 优化的代码以及预加载的路由 //...
gatsby-cv:使用Gatsby生成的在线CVPortfolio
05-28
5. `gatsby-config.js`：Gatsby项目的配置文件，定义元数据、插件和其他设置。 6. `gatsby-node.js`：允许自定义Gatsby的节点生命周期和生成流程。 7. `gatsby-browser.js` 和 `gatsby-ssr.js`：用于客户端渲染和...
gatsby-bootstrap-project
02-18
在Gatsby项目中，开发者可能通过引入Bootstrap CSS和JS文件，或者使用Gatsby的Bootstrap插件，将这些样式应用到站点上。 4. **JAMstack**: Gatsby 遵循JAMstack（JavaScript、APIs、Markup）架构，强调使用静态生成...
gatsby-source-api:Gatsby源代码插件，用于使用Data API作为数据源构建网站
04-30
然后，在`gatsby-config.js`文件中添加以下配置，指定API的URL和其他参数： ```javascript module.exports = { plugins: [ { resolve: `gatsby-source-api`, options: { url: `...
gatsby-wordpress-demo
04-19
8. **预渲染与SSR（Server-Side Rendering）**：Gatsby的预渲染技术使网站在首次加载时无需等待JavaScript执行即可呈现内容，提高了用户体验和SEO性能。相比传统的SSR，预渲染更专注于静态站点的生成。 9. **CSS...
cms-gatsby-strapi
03-18
9. **源插件**：Gatsby的源插件用于从外部数据源（如Strapi API）拉取数据，将其转化为Gatsby可用的格式，使得前后端数据的同步变得更加简单。 10. **安全性**：由于Strapi是无头CMS，只提供API接口，因此可以通过...
gatsby-tailwindcss-starter:带有TailwindCSS和PostCSS的Gatsby.js入门主题
04-29
Gatsby和TailwindCSS入门 使用带有TailwindCSS的默认样板启动您的项目。 该入门工具随附了主要的Gatsby配置文件，您可能需要使用React的快速应用生成器来快速启动和运行。 还有其他更具体的想法吗？ 您可能需要查看我们充满活力的集合。 :rocket: 快速开始 创建一个Gatsby网站。 使用Gatsby CLI创建一个新站点，并指定默认启动器。 # create a new Gatsby site using the default starter gatsby new my-default-starter https://github.com/kosvrouvas/gatsby-tailwindcss-starter 开始开发。 导航到新站点的目录并启动。 cd my-default-starter/ gatsby develop 打开源代码并开始编辑
react-DevBlog一个使用GatsbyJS和React构建的轻量级可自定义的个人博客模板
08-15
DevBlog 一个使用GatsbyJS和React构建的轻量级，可自定义的个人博客模板
gatsby-plugin-load-script:将外部脚本添加到您的html页面
05-26
gatsby-plugin-load-script 将外部库添加到您的Gatsby网站 安装 npm install gatsby-plugin-load-script 或者 yarn add gatsby-plugin-load-script 用法 哨兵 将以下插件添加到您的gatsby-config.js // gatsby-config.js module . exports = { plugins : [ // https://docs.sentry.io/error-reporting/quickstart/?platform=browser { resolve : 'gatsby-plugin-load-script' , options : { disable : ! process . env . SEN
Gatsby JS和Netlify CMS：完美的一对！
编程故事的地方
03-14 1462
简要回顾一下为什么将这种组合排除在外的所有其他无头内容管理系统和静态Web应用程序生成器对。 当使用静态站点生成器来开发极快的Web应用程序时，可以使用Gatsby JS和Netlify将它们完美结合，然后可以使用无头CMS对其进行部署。 这种组合非常有效，并且对于只有一点技术专业知识的用户来说非常方便，因为这就是我们首先使用CMS的原因！ 在本文中，我们将讨论为何Gatsby JS和Net...
使用 Gatsby.js 搭建静态博客 4 标签系统
weixin_34238642的博客
12-29 139
原文链接：https://ssshooter.com/2018-12... 回顾：使用 Gatsby.js 搭建静态博客 3 样式调整 官方自带标签系统教程，英语过关可以直接阅读官方教程。 以下说一下重点： 提示：以下所有查询都可以在 localhost:8000/___graphql 测试 建立标签系统只需要以下步骤： 在 md 文件添...
使用 Gatsby.js 搭建静态博客 7 文章目录
weixin_33766168的博客
01-31 548
原文链接：https://ssshooter.com/2019-01... 前面说过基本功能已经添加完了，但是生成目录依然是我 TODO 的头号问题。今天终于把这个问题解决了，本来以为要自己解释 md 文件，没想到自带的插件就有这个功能我却没发现。 生成目录 获取目录数据 生成目录首先要获取目录数据，此功能由插件 gatsby-trans...
使用 Gatsby.js 搭建静态博客 6 评论系统
weixin_34168880的博客
01-18 428
原文链接：https://ssshooter.com/2019-01... 方案选择 大家都知道 disqus 等第三方评论系统的存在。disqus 几年前还是挺好使的，但是现在已经是不存在的网站了。虽然国内也有类似的服务，但是免费档位有可能会有大篇幅的广告。 不过其实最大的问题是：你的评论掌握在别人手上。作为一个博客都自己搭建的程序员，...
更现代化的建站方式——Gatsby.js系列教程(二)：了解Gatsby概貌&基础概念
优雅的程序员呀
01-16 600
Gatsby工程目录 创建gatsby工程后(如果不会创建，可参见上节)，用VSCode打开，目录如图所示： 标准的Node工程目录结构，根目录包含一个package.json。 src 源码目录 public 构建后生成到此目录 熟悉一下Gatsby界面 如上节所讲，进入工程根目录，运行$ gatsby develop以启动开发模式。浏览器https://localhost:8000 可以...
使用 Gatsby.js 搭建静态博客 2 实现分页
weixin_34209851的博客
12-11 315
原文地址：https://ssshooter.com/2018-12... 使用 Gatsby.js 搭建静态博客 1 关键文件 <- 本文将会介绍如何为初始项目添加分页功能。 理解页面创建原理 上一篇的 gatsby-node.js 介绍部分已经说明了页面生成的方法。 未修改前，首页 index.js 存在于 pages 文件夹...
Gatsby使用来做什么的
02-08
它是基于React框架构建的，并通过使用各种插件和工具，可以支持各种功能，如数据源的集成，自动代码分割和优化，以及对移动设备的优化等。Gatsby的目标是帮助开发人员构建快速，可扩展的网站，并为访问者提供极佳的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值