Gatsby + Chakra 构建静态站点记录

2022-05-30 约 1016 字预计阅读 3 分钟

在开发之前

创建 Gatsby 项目

gastby new

---
Thanks! Here's what we'll now do:

    🛠  Create a new Gatsby site in the folder nav-gatsby-chakra
    🎨 Get you set up to use Emotion for styling your site
    🔌 Install gatsby-plugin-google-analytics, gatsby-plugin-image, gatsby-plugin-react-helmet, gatsby-plugin-sitemap, gatsby-plugin-manifest

在这里选择了诸如 Emotion 等。

添加 Chakra

Chakra 要求 React >= 18.0 而 Gatsby 要求 React 为 17，产生了矛盾。

我自己改成了：

"react": "^18.1.0",
"react-dom": "^18.1.0"

然后倒是安装成功了：

npm i @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion

此后必须添加配置，才能成功，否则要报错：

// gatsby-config.js
module.exports = {
  plugins: ["@chakra-ui/gatsby-plugin"],
}

开始开发

可供参考的代码

首先，我们在用一个组件库的时候，一般都是粘贴别人写好的代码来学习各个组件的用法，最后才能发挥自己的想象力来达成自己想要的效果。

那么对于 Chakra 来说，他有非常多免费可用的模板，并且有专门的网站来展示：

Chakra Template: Chakra UI 模板，特点是完全开源、容易定制、基于TypeScript。这个真的非常非常有用！
Templates Kart: 基于 Chakra UI 制作的组件，补充 Chakra 中没有的如时间线。
chakra-ui/awesome-chakra-ui: A collection of Chakra UI-related awesomeness (github.com)：关于 Chakra UI 的非常棒的开源项目合集。

CSS组件属性 Style Props¹

Margin and padding：m、my、mx、mt、ml等。
Color and background color：color、bg、bgColor、opacity等。
Gradient：bgGradient等。
Typography：fontSize、textAlign、fontFamily、textTransform等。
等等。

一些小技巧：

width={{md: 680, lg: 800, xl: 1000}}，可以指定响应式的元素宽度。但这么做，如果遇到更宽的显示器呢？显然不好，建议 w={'80vw'} ，效果还是好些的。
React 在 JSX 表达式中的条件渲染可以使用：&& 或 ?，例如 {navItem.href ? <Gatsby.Link to={navItem.href ?? '#'}>{navItem.label}</Gatsby.Link> : <Text>{navItem.label}</Text>}，还可以多重嵌套
JS 对数组倒序，调用 reverse()函数之后，原来的数组就已经倒序好了，所以还是传递原来的数组，返回的结果传递到 JSX 的组件属性中是没有任何变化
JSX 防止XSS攻击，因此要通过字符串显示HTML元素，需使用 dangerouslySetInnerHTMl 属性，是 React 为浏览器 DOM 提供 innerHTML 的替换方案²，例如<div dangerouslySetInnerHTML = {{__html:接口返回的值（包括html代码）}} ></div>。
JSX 中，由于 for 在 JavaScript 中是保留字，所以 React 元素中使用了 htmlFor 来代替。

免费可用资源

SVG 图片或图标：SVG Repo - Free SVG Vectors and Icons
- 可直接「复制图片链接」引用，没有跨域限制
SVG LOGO：Worldvectorlogo: Brand logos free to download
- 各大厂商的LOGO免费引用
占位图：占位图片 - 在线工具 (tool.lu)
- 占位图可以用一些API，可设置文字，如，https://iph.href.lu/400x400?text=CT

目录