# 日常分享内容说明

这个目录放 `/life` 下的日常分享文章。每篇文章是一个 `LifePost` 对象，字段定义在 `types.ts`。

## 文章字段

```ts
export const demoPost = {
  slug: "demo-post",
  date: "2026.06.26",
  title: "文章标题",
  description: "列表页和文章头部显示的简介。",
  content: [
    {
      type: "paragraph",
      text: "一段正文。",
    },
  ],
} satisfies LifePost;
```

- `slug`: 文章地址的一部分，例如 `demo-post` 会生成 `/life/demo-post`。
- `date`: 文章日期，格式用 `YYYY.MM.DD`。列表页会按这个字段倒序排序。
- `title`: 文章标题。
- `description`: 文章简介，会显示在列表页、精选文章和文章头部。
- `content`: 文章正文块数组。现在支持段落和图片，可以按阅读顺序穿插。

## 段落块

```ts
{
  type: "paragraph",
  text: "这里是一段正文。",
}
```

- `type`: 固定写 `"paragraph"`。
- `text`: 正文内容。一个对象对应一个段落。

如果某一段内部需要手动换行，可以在 `text` 里写 `\n`：

```ts
{
  type: "paragraph",
  text: "第一行\n第二行\n第三行",
}
```

如果正文里需要链接，可以用 Markdown 风格：

```ts
{
  type: "paragraph",
  text: "参考这篇文章：[Giffgaff eSIM 直装版](https://simonmy.com/posts/giffgaff-esim-mod-apk.html)",
}
```

支持站内路径、锚点、`http(s)` 和 `mailto:`。外部链接会新开标签。

## 图片块

```ts
{
  type: "image",
  src: "/life/demo/image.jpg",
  alt: "图片说明",
}
```

- `type`: 固定写 `"image"`。
- `src`: 图片路径。放在 `public` 里的图片，路径从 `/` 开始写。
- `alt`: 图片替代文本，用于无障碍和图片加载失败时展示。
- `caption`: 可选。图片下方的图注，不想显示图注就不写。
- `display`: 可选。图片展示方式，支持 `"cover"` 和 `"original"`。
- `align`: 可选。原图模式下的对齐方式，支持 `"left"`、`"center"`、`"right"`，默认左对齐。
- `width` / `height`: 可选。原图模式建议填写原始像素尺寸，避免页面加载时跳动。

## 图片展示方式

### 封面模式

```ts
{
  type: "image",
  src: "/life/demo/cover.jpg",
  alt: "横向封面图",
  display: "cover",
}
```

`cover` 会把图片放进固定比例的展示框里，适合横向照片、封面图、氛围图。图片会铺满容器，必要时会被裁切。

不写 `display` 时，默认也按封面模式显示，兼容旧文章。

### 原图模式

```ts
{
  type: "image",
  src: "/life/demo/screenshot.jpg",
  alt: "手机截图",
  display: "original",
  align: "left",
  width: 278,
  height: 472,
}
```

`original` 会按图片原始比例和尺寸展示，不加背景框、边框和阴影。图片超过正文宽度时才会缩小。适合手机截图、软件界面截图、聊天记录截图这类不想被裁切的图片。

`align` 只在原图模式下生效：

- `"left"`: 左对齐，也是默认值。
- `"center"`: 居中。
- `"right"`: 右对齐。

## 封面图规则

列表页和精选文章会把文章里的第一张图片当封面图。封面区域始终按封面方式显示，所以即使正文里这张图是 `display: "original"`，列表封面也会裁切展示。

如果某篇文章没有图片，列表页不会显示图片卡槽，只显示文字内容。

## 常用建议

- 手机截图、步骤截图：用 `display: "original"`，并填写 `width` 和 `height`。
- 横向照片、活动图、封面图：用 `display: "cover"` 或不写 `display`。
- 不想显示图注：不要写 `caption`。
- 新增文章后，把文章对象加到 `posts.ts` 的 `allLifePosts` 数组里即可，列表顺序会自动按日期排序。
