放假在家，刚好刷 Twitter 的时候看到有人写了一个券商注册的页面，一个简单的列表，挂上了目前常用的美港股做新人推荐，顺便就看了一下源码，发现使用 [[Gatsby]] 和 [[TailwindCSS]] 写的，于是就抱着学习的态度，上手了一下 Gatsby，简单的了解了一下 Gatsby 也是一个静态网页生成器，用来 React 和 [[GraphQL]]。而 [[TailwindCSS]] 是一个 CSS 框架，通过简单的 class 就能实现不错的界面效果。

从了解一个新的技术，到上手的过程就不多说了，官网的新手教程非常详细。这里就想记录一下中间遇到的一些问题，以及解决的过程。以及结合之前看过的 [[费曼学习法]] 聊一聊学习的过程。

费曼学习法

首先先说一下什么叫做费曼学习法，如果用简单的话来说就是将复杂的知识简单化，用最通俗的语言去解释。

费曼学习法的具体内容很细致，但如果将学习划分几个步骤来的话，可以简化成这样几部：

  • 确定学习目标
  • 理解学习对象
  • 以输出代替输入
  • 回顾
  • 简化学习内容，再吸收

套用我了解学习 Gatsby 的过程，首先我的目标非常明确，就是制作一个简单的页面可以展示列表。

理解学习对象，在我看来就是通过查看其官网，文档，以及简单的 Wiki 了解 Gatsby 是什么，可以做什么。我这里要了解的内容有两部分，一个便是静态网站生成器 Gatsby，另一个是 CSS 框架 [[TailwindCSS]]。

静态网站生成器和 CSS 框架两个概念都不是很陌生，类似的技术也都非常多，当前的这个博客就是 Ruby 下的 Jekyll 生成的静态页面，而这个博客用的就是 Bootstrap CSS 框架。所以使用类比就能大致的对其有一定的了解。

第三步，用输出代替输入，这就是实践的部分。当然也是个人认为最重要的一步，再以前我往往就是忽视了这一步。所以直接根据官网的教程，先实现一遍新手任务，然后根据我的需要，先从官网初始化了一个最基本的项目，然后在本地跑起来，引入 Tailwind CSS，然后尝试对页面进行修改，先构建了一个基本的样式，将图中的一个样式实现，研究如何获取数据，如何实现循环。

最后定下的方案就是通过 YAML 文件 ，将页面中需要显示的内容配置在其中，因为 Gatsby 通过插件的方式可以非常方便的引入不同类型的数据源，所以看一下插件的介绍。在实践中花了最多时间的就是将图片动态的显示出来，直接使用 StaticImage 只能将固定的图片显示出来。所以继续阅读官网的文档。以 image 为关键字把所有搜出来的结果都看了，还是一头雾水，并且昨天状态也不太好就直接先睡了。今天起来从原理上简单的了解了一下 Gatsby 的插件，然后逐渐就有了一个思路。

在 Gatsby 中有三类插件：

  • 数据源插件，一般名字中会带 source，数据源插件负责从外部数据获取，然后将数据放在数据层中，方便应用通过 GraphQL 来获取使用
  • 数据转化插件, 名字中带 transformer，转换特定的格式，比如将 markdown 文件内容转换为对象
  • 功能插件，一般就叫做某某 plugin

我已经通过 gatsby-transformer-yaml 将 YAML 文件内容可以在界面中读取，剩下的就是将 YAML 配置中配置的文件路径在界面中展示出来，Gatsby 这一块做过一些 API 的调整，需要通过 GraphQL 查询出来之后再使用 GatsbyImage 来展示。

整个上面的过程完成之后就大致做了一个类似的列表页。

回到费曼学习法的第四步，回顾，这一步也是正是我当前正在做的事情。

第五步，简化学到的内容，如果让我现在再去回忆我学到了什么，我脑海里首先会蹦出几个关键字，不是 Gatsby，也不是 [[TailwindCSS]]，而是 React，GraphQL，基础的 CSS 长宽模型。我之前没有接触过 React，但是在使用的过程中大概的了解了其模块化的设计，并且界面和数据分离，通过 GraphQL 做数据绑定和交互整个这个过程就形成了 Gatsby 这个技术。而在使用 Tailwind CSS 的过程中最费我时间的就是调整页面中元素的位置。如果之前学习基础 CSS 的时候能够对 margin，padding 有更多的了解就好了。

什么是好的学习

在费曼学习法这本书中对学习的解释，让我对[[教育]]有了更加深刻的理解。上周末在吃饭的时候，朋友顺口聊起了什么是你认为的「好的教育」，在去探讨什么是「好的教育」之前，什么是学习，在过去的时间里，我常常认为记得比别人多，学的比人快就是好的学习。但学习，不是去比拼知识的储备，也不是去竞争学位的高低，而是思维方式的培养。学习不是为了记住什么，而是通过学习建立自己行之有效的思维方式，然后将知识应用到实际生活中去解决问题。那么回到我认为的「好的教育」，学习如果是主动发起的，那么往往会收获不错的结果。那么好的教育就是要让人激发出学习的兴趣。

在没有了解 Gatsby 之前我对静态网站的印象就停留在了 markdown 文件的渲染，但是我在了解的过程中发现 Gatsby 使用了一套不一样的实现思路，通过 GraphQL 的帮助，Gatsby 让 markdown 成为了其可以选择的一个数据源，只要做一层数据转换，那么其内容可以从任何的数据源中获取，比如从 WordPress 的数据库，从其他任何 CMS 的数据源。这样就使得 Gatsby 拥有了其他静态网站不一样的能力。

最后

代码在 https://github.com/einverne/broker 界面在 https://broker.einverne.info。