# video_covers

**Repository Path**: baklib/video_covers

## Basic Information

- **Project Name**: video_covers
- **Description**: 企业数字体验视频封面模板：多版式横竖屏预览，支持横屏/竖屏视频与口播文案托管。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-27
- **Last Updated**: 2026-06-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Baklib CMS — cover 封面模板（简体中文）

专用于 **宣传海报封面** 的主题：一次填写简报，页面展示 **全部版式变体**；每行 **16:9 横屏（左）+ 9:16 竖屏（右）** 并排预览，无页头页脚，便于截图与导出。

---

## 包含内容

- **布局**（`layout/theme.liquid`）：极简外壳、Chivo/Noto Sans、DaisyUI 运行时配色
- **模板**：首页 `index`（子简报列表）、`page`（单简报多版式画廊）、`search`
- **片段**：`_cover_layout_registry`、`_cover_fit`、`_cover_preview_gallery`、`_cover_fit_by_layout`、`_cover_01…05_fit`、`_cover_dispatch`、各版式 stage 片段
- **构建**：Tailwind v4 + daisyUI、Alpine.js、Stimulus（`cover-fit` 按竖屏 stage 独立测量）、esbuild

---

## 一页 = 一份简报，全部版式

用户创建页面时只选 `page` 模板，填写文案与图片一次即可。页面按注册表顺序渲染所有版式行，**无需**在创建时选择 cover_01 / cover_02 等。

简报字段为空时，画廊帧内会显示 **演示占位文案**（仅展示，不写入后台）。

### 按版式自适应（内部逻辑）

字号、间距、区块显隐 **不是** 用户可编辑字段。每个版式在 `snippets/_cover_XX_fit.liquid` 中根据简报内容在渲染时计算（见 `snippets/_cover_brief.liquid`）。Stimulus 在页面加载时按各竖屏 stage 的 `data-cover-fit-*` 阈值进一步收缩主标题，避免与人物图重叠。

新增 `cover_06`：见英文 [README.md](./README.md) 中 **Add a new cover layout** — 需增加 fit 片段 + stage + 在 `_cover_preview_gallery.liquid` 注册，**不用**新建 page 模板。

## 种子数据

`cover-1`、`cover-2`、`cover-3`、`cover-6` 均使用 `page` 模板；每页都会展示全部已注册版式预览。

---

## 预览示例

```bash
yarn install && yarn build
baklib theme dev
baklib theme preview set --path /covers/cover-1 --template page --vars '{
  "badge": "www.baklib.com",
  "description": "Integrated workflow designed for product teams. We create world-class development and branding",
  "headline_line_1": "We are",
  "headline_line_2": "awesome team",
  "headline_line_3": "for your business dream",
  "highlight_line": 2
}'
```

英文说明见 [README.md](./README.md)。