css - flexbox


在上一篇文章[【First Theme】](/blog/translate/build-chrome-extensions/first-theme)学习了创建第一个主题。

这篇文章学习创建一个新标签插件，类似如图：

![F2yKhw](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/F2yKhw.jpg)

## 结构

```bash
mkdir new-tab-extension && cd new-tab-extension
```

将以下内容吸入`manifest.json`，这是任何浏览器扩展的主入口。

```json
{
  "manifest_version": 3,
  "version": "1.0",
  "name": "New Tab Extension",
  "description": "A demo first new tab experience",
  "action": {
    "default_icon": "icons/icon-48.png"
  },
  "icons": {
    "48": "icons/icon-48.png"
  },
  "chrome_url_overrides": {
    "newtab": "new-tab.html"
  }
}
```

新标签扩展插件的核心在于`chrome_url_overrides`，它告诉浏览器使用哪个页面打开新标签。

创建`new-tab.html`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>DDT New Tab</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
    <h1>Hello world 👋</h1>
  </body>
</html>
```

```css
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: grid;
  place-items: center;
  background-color: rgb(238 242 255);
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
h1 {
  font-size: 10vmin;
  color: rgb(218 0 96);
}
```

## 测试插件

![F2yKhw](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/F2yKhw.jpg)


基于react、tailwindcss开发自己的chrome插件

Chrome插件开发 - 新标签


react 使用`.map`遍历并显示列表组件。

```jsx
function SoccerPlayers() {
  const players = ['Messi', 'Ronaldo', 'Laspada']

  return (
    <div>
      {players.map((playerName) => (
        <SoccerPlayer key={playerName} name={playerName} />
      ))}
    </div>
  )
}
```

遍历输出的组件中`key`是必需的，因为它是用来唯一标识组件的。


React是一个JavaScript库，致力于使UI开发变得简单

React Lists


Spacing（间距）是指在网页设计和排版中，用于描述元素（如文本、图片、容器等）之间的距离的一种概念。它可以通过 CSS 属性来设置，通常包括以下几种属性：

- margin（外边距）：用于设置元素与其它元素之间的距离，即元素外部空白区域与周围元素之间的距离。它可以设置四个方向的值，分别为 margin-top、margin-right、margin-bottom 和 margin-left。如果只设置一个值，它将被应用于所有四个方向；如果设置两个值，则第一个值应用于 top 和 bottom，第二个值应用于 left 和 right；如果设置三个值，则第一个值应用于 top，第二个值应用于 left 和 right，第三个值应用于 bottom。如果设置四个值，则分别应用于 top、right、bottom 和 left。
- padding（内边距）：用于设置元素内部空白区域与元素内容之间的距离，即元素内容区域与元素边界之间的距离。它可以设置四个方向的值，分别为 padding-top、padding-right、padding-bottom 和 padding-left。如果只设置一个值，它将被应用于所有四个方向；如果设置两个值，则第一个值应用于 top 和 bottom，第二个值应用于 left 和 right；如果设置三个值，则第一个值应用于 top，第二个值应用于 left 和 right，第三个值应用于 bottom。如果设置四个值，则分别应用于 top、right、bottom 和 left。
- line-height（行高）：用于设置文本行之间的距离，即每行文本的高度。它通常被用于控制段落和标题的行间距。它可以设置为一个无单位的数字值，表示倍数关系，如 1.5 表示当前字体大小的 1.5 倍；也可以设置为具有单位的像素或 em 等值。

除了这些属性外，还有一些其它的间距相关的属性，如：

- border-spacing：用于设置表格中的单元格之间的距离，即单元格边框之间的距离。
- grid-gap：用于设置网格布局中各个网格之间的距离，即网格行列之间的距离。
- column-gap：用于设置多列布局中各个列之间的距离，即列与列之间的距离。

以下是一个使用间距属性的示例代码，用于在网页中创建一个简单的图片库：

```html
<div class="image-gallery">
  <div class="image-container">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="image-container">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="image-container">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="image-container">
    <img src="image4.jpg" alt="Image 4">
  </div>
</div>
```

```css
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.image-container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
```

在这个示例中，我们使用了以下的间距相关属性：

- gap：用于设置元素之间的间距，这里用于设置图片之间的间距。
- width 和 height：用于设置图片容器的宽度和高度，这里设置为 200px，以便容纳图片。
- overflow：用于设置图片容器的溢出行为，这里设置为 hidden，以便保证图片不会溢出容器。
- object-fit：用于设置图片的填充方式，这里设置为 cover，以便让图片填充整个容器。

![ky9A4y](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/ky9A4y.png)


css - Spacing


PostgreSQL 中的自连接是一种连接方式，可以让您将表连接到自身。当您有一个包含层次数据的表时，这很有用，比如员工表包含一个参考员工经理的 manager_id 列。

要执行自连接，首先在 SELECT 语句的 FROM 子句中指定要连接到自身的表。然后，您可以给表分配两个不同的别名，比如 a 和 b，以区分连接条件中的两个表实例。

例如，假设您有一个 employee 表，具有以下列： id、name 和 manager_id。要获取所有员工及其经理的列表，可以使用以下自连接查询：

```sql
SELECT a.name AS employee_name, b.name AS manager_name
FROM employee a
JOIN employee b ON a.manager_id = b.id
```

该查询将返回两列的结果集：employee_name 和 manager_name。结果集中的每一行都包含一个员工的姓名和他们的经理的姓名。

自连接可以非常强大，因为它可以轻松地在数据库中处理层次数据。但是，它们也可能很难编写和理解，因此在使用自连接查询前，要仔细考虑是否自连接是问题的最佳解决方案。


PostgreSQL 中的自连接是一种连接方式，可以让您将表连接到自身

Postgresql - SELF JOIN


Flexbox 是一种 CSS 布局模式，用于在容器中快速、灵活地排列和对齐子元素，可以有效地实现自适应布局和响应式设计。Flexbox 的全称是 Flexible Box Layout，即“弹性盒子布局”。

Flexbox 的核心是容器和子元素之间的关系，容器称为 flex container（弹性容器），子元素称为 flex item（弹性子元素）。通过在容器上设置 display: flex 或 display: inline-flex 属性，可以将容器变为一个 flexbox，然后可以使用一系列的 CSS 属性来控制子元素的排列和对齐方式。

以下是 Flexbox 常用的属性和其作用：

- flex-direction：定义 flex container 的主轴方向，取值包括 row、row-reverse、column 和 column-reverse 四种方向。
- justify-content：定义 flex container 中子元素沿主轴方向的对齐方式，包括 flex-start、flex-end、center、space-between、space-around、space-evenly 六种取值。
- align-items：定义 flex container 中子元素沿交叉轴方向的对齐方式，包括 flex-start、flex-end、center、baseline、stretch 五种取值。
- flex-wrap：定义 flex container 中子元素在一行放不下时如何换行，取值包括 nowrap、wrap 和 wrap-reverse 三种。
- align-content：定义多行子元素在交叉轴方向的对齐方式，仅当 flex-wrap 属性为 wrap 或 wrap-reverse 时生效，包括 flex-start、flex-end、center、space-between、space-around、stretch 六种取值。
- flex-grow：定义子元素的放大比例，如果容器有多余的空间，子元素会按照各自的放大比例分配这些空间。
- flex-shrink：定义子元素的缩小比例，如果容器空间不足，子元素会按照各自的缩小比例缩小。
- flex-basis：定义子元素的基准尺寸，用于计算子元素的放大和缩小比例。
- order：定义子元素的排列顺序，数值越小的子元素越靠前。

Flexbox 的优点是可以简化布局代码，减少使用 float 和 position 的情况，同时可以实现自适应和响应式设计，提高页面的可维护性和可扩展性。但是需要注意的是，Flexbox 不适用于所有场景，例如多行文本的垂直居中需要结合其他技术实现。

以下是一个使用 Flexbox 实现的简单的响应式布局案例，包含一个 header、一个 sidebar 和一个 content 区域，可以根据屏幕尺寸自适应布局：

HTML 代码：

```html
<div class="container">
  <header>Header</header>
  <div class="content">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main content</div>
  </div>
</div>
```

CSS 代码：

```css
.container {
  display: flex;
  flex-wrap: wrap;
}

header {
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.content {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  justify-content: flex-start;
  align-items: stretch;
}

.sidebar {
  flex-basis: 200px;
  background-color: #eee;
  padding: 20px;
}

.main {
  flex-grow: 1;
  padding: 20px;
}

@media screen and (max-width: 768px) {
  .sidebar {
    flex-basis: 100%;
  }
}
```

解释：

首先将容器设置为 flex 布局，使用 flex-wrap 属性允许子元素在需要时换行。

- header 元素使用宽度为 100%，背景颜色为深灰色，颜色为白色，使用 padding 属性来增加内边距，使其看起来更美观。

- content 元素作为 flex container，使用 flex-grow 属性让其占据剩余的空间，使用 justify-content 和 align-items 属性分别对子元素进行水平和垂直对齐。

- sidebar 元素使用 flex-basis 属性指定其基准尺寸为 200px，背景颜色为浅灰色，使用 padding 属性增加内边距。

- main 元素使用 flex-grow 属性让其占据剩余的空间，使用 padding 属性增加内边距。

- 在屏幕宽度小于 768px 时，将 sidebar 元素的基准尺寸设置为 100%，让其占据整行宽度。

这个案例展示了 Flexbox 的基本用法，通过简单的 CSS 属性设置，可以实现自适应和响应式布局。

更多请参考：[Flexbox 指南](/blog/css/tips/Flexbox指南)



Next.js 内置了 Typescript 支持。

首先，在项目根目录新建`tsconfig.json`，Next.js 会自动检测项目中的`tsconfig.json`文件，并将其解析为项目的配置。

![AF4Ur5](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/AF4Ur5.png)

接下来安装相关依赖

```bash
npm install -D typescript @types/react @types/node
```

启动服务

```bash
npm run dev
```

打开`tsconfig.json`，可以看到内容已经被`Next.js`修改

```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
```

创建`hello.ts`

```tsx
import {NextApiRequest, NextApiResponse} from 'next'
export default (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({
    message: 'Hello World'
  })
}
```
