正在加载(StaticQuery) Gatsby上的白屏 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Gatsby入门指南—使用GraphQL解析Markdown（2）

1.什么是GraphQL GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。...GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。...src>components>Header.js里面， import { StaticQuery, graphql } from 'gatsby' import React from "react" const...TitleAndDescription = ({ data }) => { //这里的数据是下面查出来的 const title = data.site.siteMetadata.title;.../div> ); } //这里是所有数据，传到了TitleAndDescription组件里，react组件数据传递 const Header = () => { return ( StaticQuery

1.1K5 0

一杯茶的时间，上手 Gatsby 搭建个人博客

然而考察过后发现其正在 v1 到 v2 的更替期，v1 功能比较简陋，v2 还在 alpha 期不稳定。且 VuePress 目前还是针对静态文档优化比较多，作为博客依然比较简陋。...StaticQuery 组件[15]或者 useStaticQuery[16] hook。...markdown 文件上并且具有相同的类型，插件才会生成相应的 fields，否则可能会抛出异常或者更糟糕的，默默失败了。...通过实现自定义路径基本上可以了解 Gatsby 页面生成的方式了。下节中我会继续谈谈其它个性化的配置，如草稿模式和显示上下篇博文。草稿模式草稿模式即可以将文章保存为草稿而不被渲染出来。...如果是新的博客这个问题不大，如果是迁移过来的，有两个解决方式，第一个是手动写个脚本给文章都补上域，另一个是利用 Gatsby 的 Node APIs 在 fields 上生成特定域，鲁棒性更好些。

4.3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

最完备的懒加载错误兜底方案，再也不会白屏了！

为了优化首屏加载渲染速度，减小首屏包体积，项目中很多代码是通过懒加载动态导入（dynamic import）的。...但是在使用时并没有对动态导入的失败做处理，我们通过项目的监控平台发现了上百例因「包资源下载失败导致的页面白屏」，用户无法正常使用。...webpack 懒加载源码换 CDN 的原理其实就是在 scriptA 加载失败后插入新的 scriptB，scriptC ... 重新加载。...仍然无法加载回资源有了以上的处理，但资源仍然无法加载回来，此时错误并不会抛出，只是页面上不展示资源对应的功能，用户仍然可以正常使用页面，不会白屏。...总结通过针对业务优化场景中遇到的懒加载失败问题，我们分析了 webpack 源码，借助了 import() 网络重试加载机制，提高了程序的鲁棒性，降低前端白屏率，一定程度上提升了用户体验，对于前端工程的收益较为明显

1.6K2 0

AnimationDrawable 实现正在加载的旋转动画

要实现这样的效果就是中间的那个正在拼命加载数据中然后是那个动画在不停的旋转，其实这个过程是在你访问网络数据请求的时候，出现的，一般只停留几秒钟的效果看了效果图，接下来介绍下这个如何实现的...，首先我们需要去了解他的原理，我这里面使用的是：AnimationDrawable 原理： Drawable animation可以加载Drawable资源实现帧动画。...android:layout_below="@+id/lodding" android:layout_centerHorizontal="true" android:text="正在拼命加载数据中...： public class LoadingAinm { public static void ininLoding(Activity activity){//正在加载的旋转动画 ImageView...，界面上显示的是正在加载的动画其他的知识：注意：一旦给指定View设置Drawable Animation之后，其BackGround就变成AnimationDrawable对象，代码如下

2.5K8 0

Gatsby入门指南—使用GraphQL解析Markdown（2）

1.什么是GraphQL GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。...GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。...webkit-text-stroke-width: 0px; background-position: inherit inherit; background-repeat: inherit inherit;">import { StaticQuery..., graphql } from 'gatsby' import React from "react" const TitleAndDescription = ({ data }) => { //这里的数据是下面查出来的...p> ); } //这里是所有数据，传到了TitleAndDescription组件里，react组件数据传递 const Header = () => { return ( StaticQuery

9352 0

OC底层探索17 - 类的加载（上）OC底层探索17 - 类的加载（上）

在OC底层探索16 -应用程序加载中提到了dyld与objc的关系，主要是通过两个函数:map_images、load_images来完成类的初始化。...一、类的加载 1、从_objc_init入手通过dyld调起libobjc库的初始化方法_objc_init，至此进入runtime的初始化流程。...2.2 非懒加载类data的加载 //代码很长，只放出核心代码 void _read_images(header_info **hList, uint32_t hCount, ...) { //...总结类的加载（上）中，对类的名称、data、方法、属性、协议的注入完成了分析。期间还对非懒加载类、懒加载类做了简单的介绍。...发现一个宗旨就是能晚一点加载就晚一点加载，可以看到苹果开发人员对性能优化做出的努力。由于篇幅问题，类的分类在下文中完成分析。OC底层探索18 - 类的加载（下）

5491 0

基于SwipeRefreshLayout的上拉加载控件

大家好，又见面了，我是你们的朋友全栈君。距离上一篇博客，居然已经过了大半年的时间，时间过得真快啊！...实际项目中，后台肯定的接口肯定都是分页的，那么，分页加载也是自然而然的事，下面基于Google原生的下拉刷新控件SwipeRefreshLayout，实现上拉加载更多的功能。...private int mTouchSlop; // ListView private ListView mListView; // 上拉监听器, 到了最底部的上拉加载操作...一起用于滑动到底部时判断是上拉还是下拉 private int mMoveY; // 是否在加载中 (上拉加载更多) private boolean mIsLoading = false...由于SwipeRefreshLayout本身就是下拉加载控件，这样封装后，该控件就具备了下拉刷新上拉加载更多的功能，用法没有任务变化： <com.jackie.sample.custom_view.CustomSwipeRefreshLayout

1.3K1 0

优雅地实现RecyclerView的上拉加载

RecylerView 上拉加载更多上拉加载的多状态 ---- 这篇博客是承接上一篇博客--探索Android架构的DataLayer层(DataManager方式)具体实现，其实是上篇博客的一个使用比较普遍的例子...，当然如果把上一篇博客设计的数据加载回调接口提炼出来也是可以做一篇单独的文章。...先说说我们希望的RecycerView应该有的样子：上拉加载更多，没有更多，加载错误然后点击重试。...先谈谈思路，其实很简单，就是通过getItemViewType()加载不同的布局，这里就是把加载更多布局封装进adapter中。...接着上篇写的数据加载接口来看，开始加载的时候加入加载的itemView，完成加载后去掉它。通过给RecyclerView添加的滑动事件来判断加载时机。

1.3K4 0

重新加载故障节点上的 Ceph 卷

，经过 5 分钟（由 --pod-eviction-timeout 参数指定），Master 会开始尝试删除故障节点上的 Pod，然而由于节点已经失控，这些 Pod 会持续处于 Terminating...一旦 Pod 带有一个独占卷，例如我现在使用的 Ceph RBD 卷，情况就会变得更加尴尬：RBD 卷被绑定在故障节点上，PV 映射到这个镜像，PVC 是独占的，无法绑定到新的 Pod，因此该 Pod...要让这个 Pod 在别的节点上正常运行，需要用合适的路线重新建立 RBD Image 到 PV 到 PVC 的联系。...docker_process.split(" ")[0] print "Dev: {}\tDocker ID: {}\n".format([dev, docker_id]) 上面的脚本功能很简单，使用 mount 命令列出所有加载卷...，然后过滤出 /dev/rbd\d+ 的加载，并识别其中是否符合 Pod 加载的特征，最终会用容器 ID: 设备名称的格式输出结果。

3K2 0

【用户体验】加载——Websocket与加载在前端交互上的体验提升

无缝加载，是提升加载体验的一种办法，在加载的过程中，用户可无法做其他事情，而过程又很漫长的情况下用户心情就会很烦躁，比如在高铁上我不能玩任何游戏，也没用书给我阅读，只能静坐着等待到达广州。...加载也如此，用户操作后没有反馈，或是久久没有结果，会让用户觉得是不是自己的动作没有生效，是不是自己的电脑卡住了此时有一个指示，告诉乘客“当前在郑州，还有x站到达北京”，体验上提升了几亿个数量级。...如果此时再加上列车速度，更能让乘客感觉到“这车真快”，心理上更加舒服而程序上，用户按下按钮后，反馈上的交流很重要，运行一段复杂程序时，尽可能把关键步骤告诉用户，比如“正在启动”、“正在初始化”、“正在处理...”、“正在保存”。...，用户知道自己做的事件有所反馈图片图片“缝”如上面所说，崩坏3的加载确实有些差劲，我们把它放到三维视图看看这么差劲的加载是怎么回事图片甚至图片在加载过程中，应用弹了一个非常阴间的加载动画层，阻止了整个应用的操作

3.4K0 0

用 Gatsby 创建一个博客

Gatsby 的 CLI包含了许多常见的开发特性，比如 gatsby build (构建一个生产、静态生成的项目版本)、 gatsby develop(启动一个热加载的web开发服务器)等等。...在安装了这些功能插件之后，我们将编辑 gatsby-config.js。Gatsby 在构建时加载指定插件的公开功能。...一个 options 对象可以传递给一个插件，我们正在传递文件系统路径(也就是我们的 Markdown 文件将被定位的位置)，然后是源文件的名称。...每个公开的属性(在节点上)都可以用于查询。我们正在有效地创造一个GraphQL数据库，然后我们可以通过页面级的GraphQL查询对它进行查询。...创建博客列表我在这一节中没有详细介绍，因为我们已经对我们的博客模板做了一些非常相似的事情！看看我们，我们在这一点上已经是一个专业级的 Gatsby 使用者了！

3.5K3 0

Flutter 中的下拉刷新和上拉加载

在Flutter的官方SDK中给我们提供了下拉刷新的组件RefreshIndicator，但是没有提供上拉分页加载更多的组件。...当然，我们是可以找一些第三方的库来实现上拉加载下拉刷新的效果的，比如flutter_easyrefresh这个第三方组件，但是我并不推荐flutter_easyrefresh，因为它有一些小Bug。...所以这篇文章，我们就聊一下，如何自己去实现上拉加载下拉刷新的效果。..._dataSources = resultList; } else { //上拉刷新（将新加载的数据拼接到原来的数据数组中） this....1的时候， * 说明当前的ListTile是最后一个ListTile， * 此时需要上拉加载新的数据，因此要在最底部显示一个加载中的圈圈

4.8K2 0

iScroll上拉加载下拉刷新 -> 遇到的问题

上拉加载下拉刷新，在网上找的大部分代码都能用点，但是感觉不是特别的友好，总是有点缺陷，都得需要自己修改，缺陷比如：（1）这种（2）这种其实，修改几处地方即可，截图附上：即可！

1K3 0

查看 Linux 上正在运行的所有 Java 程序列表

查看 Linux 上正在运行的所有 Java 程序列表在Linux上查看正在运行的所有Java程序列表，可以通过多种方法实现。...用于列出所有运行的Java进程。...基本使用方法如下： jps -l 这将列出所有正在运行的Java进程的PID和主类的全路径名。-l选项可以显示主类的全路径名或jar文件的路径。...如果你的JDK安装和配置正确，这应该是查看Java进程最直接的方法。使用ps命令：ps命令是用于查看当前系统进程状态的工具。...这样，你可以看到每个Java进程的详细信息。记住，你需要有足够的权限来查看进程。如果你的用户没有足够的权限，你可能需要使用sudo命令来获取管理员权限。

2K1 0

获取屏幕上正在显示的activity 博客分类： Android小技巧

用过ActivityManager的童鞋估计都知道，可以从ActivityManager里面可以获取到当前运行的所有任务，所有进程和所有服务，这是任务管理器的核心。...仔细看getRunningTasks的文档，里面说获取的是系统中"running"的所有task，"running"状态包括已经被系统冻结的task。...而且返回的这个列表是按照顺序排列的，也就是说第一个肯定比第二个后运行。 getRunningTasks有个整型参数，表示返回列表的最大个数。...那么，我们如果把1作为参数给进去，那么他返回的task就是当前运行的那个task，然后从task中获取到最顶层的activity，这个activity就是当前显示给用户的那个activity了。...("", "pkg:"+cn.getPackageName()); Log.d("", "cls:"+cn.getClassName()); 至于这个能做什么，嘿嘿，我相信你知道的。

3.6K3 0

微信小程序分页加载数据～上拉加载更多～小程序云数据库的分页加载

我们在开发小程序时，一个列表里难免会有很多条数据，比如我们一个列表有1000条数据，我们一下加载出来，而不做分页，将会严重影响性能。所以这一节，我们来讲讲小程序分页加载数据的实现。...可以看到我们每页显示10条数据，当滑动到底部时，会加载第二页的数据，再往下滑动，就加载第三页的数据。由于我们一共21条数据，所以第三页加载完以后，会有一个“已加载全部数据”的提示。...关于云数据库可以看下面这个视频，简单了解下本节知识点 1，小程序分页加载 2，小程序列表显示 3，云数据库的使用 4，云数据库分页请求数据的实现一，先定义数据我们做分页数据加载，肯定要先准备好数据...//老师微信：2501902696 上面的代码就是我们实现分页加载的所有逻辑代码。...loadMore}}">正在载入更多... <view class="loading" hidden="{{!

2.8K2 0

Spring读源码系列04----bean的加载---上

Spring读源码系列04----bean的加载---上 Bean的加载 AbstractBeanFactory#getBean(String name)----根据名字获取bean AbstractBeanFactory...singletonsCurrentlyInCreation缓存中 DefaultSingletonBeanRegistry#afterSingletonCreation---从singletonsCurrentlyInCreation缓存中移除当前bean正在加载的状态记录...--->ThreadLocal中去 //一开始当前线程只有一个正在创建的bean时，存放一个string，多余两个时，会变为set集合来存放 //当前正在创建的PrototypeBeans...{ //在指定的scope上实例化bean //获取当前beanDefinition绑定的scopeName String scopeName = mbd.getScope...} ---- DefaultSingletonBeanRegistry#afterSingletonCreation—从singletonsCurrentlyInCreation缓存中移除当前bean正在加载的状态记录

5472 0

特斯拉正在建设世界上最大的电池——这是它的工作原理

特斯拉Powerpack 2系统到今年年底，如果Elon Musk和特斯拉做出了雄心勃勃的承诺，南澳州将成为世界上最大的电池。...想象一个巨大的金霸王电池突破地面是很有趣的，但实际上，大规模的安装将是一个位于特斯拉制造的单位叫做“电源”的电池网络。...他们一起将弥补该公司所谓的“世界上最大的锂离子电池存储项目”，特斯拉并不表示该项目需要多少个电源包，而是将包含100兆瓦的能源供电能力据该公司称，超过3万户家庭。...“这实际上是锂离子系统成熟度的一个迹象，正在考虑这样的大型项目，”亚伯拉罕指出，十年前，电池价格太贵，像这样的项目“甚至不在任何人的视野”。...先进微电网解决方案的Tholke说，像这样的巨型电池可以在减轻这样一个事实上发挥重要的作用：用可再生能源发电，风不会吹，太阳并不总是闪耀。

7221 0

你的博客用不着什么JavaScript框架

这里就有些不对劲——Gatsby 需要你以 React 组件的形式再加载一次页面；在完成多出来的这一步之前，所有需要 JavaScript 的元素（例如按钮、菜单、自定义输入）实际上都不能交互。...华丽的 Gatsby 网站在 2,000 美元的 MacBook 上可能很快，但对于使用 3G 连接和廉价智能手机的用户来说，它显示是能显示出来，但是没有响应；用户等待加载 JavaScript 的过程要持续...特性来切换到新内容上，而不会触发页面加载。...不再需要整页重新加载的问题在于，浏览器和辅助技术将页面加载用作触发某些有用行为的信号，包括宣布新页面的标题或将键盘焦点重置到文档的开头。...相比之下，Gatsby 中出色的 gatsby-image 插件可以生成延迟加载和响应式的图片元素，并能在加载全分辨率文件后在低分辨率或 SVG 版本的图像间平滑切换。

5.5K1 0

vue 的上拉加载，下拉刷新（基于better-scrol）

你是不是想实现下拉刷新（比较难点），上拉加载例如下面这样 ?...，你要理解一件事，上拉刷新和下拉加载是根据什么原理，去判断的，是高度，是高度，根据你滚动条的距离来判断的，万变不离js，最原始的js的方法先看看 better-scroll 提供的方法有那些 props...，用于上拉加载 */ pullup: { type: Boolean, default: true },...false, down: false, up: true, pulldownTip: { text: '下拉刷新', // 松开立即刷新 textup: '上拉加载更多...*/ data: { type: Array, default: null }, /** * 是否派发滚动到底部的事件，用于上拉加载 */

2.9K2 0

点击加载更多

Gatsby入门指南—使用GraphQL解析Markdown（2）

一杯茶的时间，上手 Gatsby 搭建个人博客

最完备的懒加载错误兜底方案，再也不会白屏了！

AnimationDrawable 实现正在加载的旋转动画

Gatsby入门指南—使用GraphQL解析Markdown（2）

OC底层探索17 - 类的加载（上）OC底层探索17 - 类的加载（上）

基于SwipeRefreshLayout的上拉加载控件

优雅地实现RecyclerView的上拉加载

重新加载故障节点上的 Ceph 卷

【用户体验】加载——Websocket与加载在前端交互上的体验提升

用 Gatsby 创建一个博客

Flutter 中的下拉刷新和上拉加载

iScroll上拉加载下拉刷新 -> 遇到的问题

查看 Linux 上正在运行的所有 Java 程序列表

获取屏幕上正在显示的activity 博客分类： Android小技巧

微信小程序分页加载数据～上拉加载更多～小程序云数据库的分页加载

Spring读源码系列04----bean的加载---上

特斯拉正在建设世界上最大的电池——这是它的工作原理

你的博客用不着什么JavaScript框架

vue 的上拉加载，下拉刷新（基于better-scrol）

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐