commit 0285b2a5d15bbfad899e378ccbd1272689350b26 Author: Wang Zhiyu Date: Thu Oct 8 12:29:59 2026 +0800 init diff --git a/README.md b/README.md new file mode 100644 index 0000000..e4713b2 --- /dev/null +++ b/README.md @@ -0,0 +1,61 @@ +# marp-tectonics + +克制、锐利、适于规模作图的科研汇报用 marp 主题, 专为高信息熵、层级突出和印刷品风格设计, 并带有若干排版辅助扩展语法. + +## 在其他幻灯片中使用 + +1. 在 `marp.config.mjs` 里把主题目录注册进来: + + ```js + export default { + themeSet: ['../tectonics/theme'], + allowLocalFiles: true, + } + ``` + +2. 在 frontmatter 里选中主题、声明画幅: + + ```yaml + theme: tectonics + size: 16:9 # 或 4:3, 主题两种都适配 + ``` + +3. 构建:`marp --html -o deck.html deck.md` + +主题的元数据里同时声明了 `@size 16:9 1280px 720px` 和 `@size 4:3 960px 720px` + +## 扩展语法 + +| 语法 | 效果 | +| :--- | :--- | +| `` + 四行文字(小字/`##` 主标题/学院+姓名/日期) | 封面: 通栏色带 + 居中三行 | +| `` + `## 报告内容` + 有序列表 | 目录页: 左侧大字标题 + 竖线 + 右侧「一、二、…」 | +| `` + 用 `
` 包住的两栏内容 | 左右两栏, 其余元素整行 | +| `` + `## 一、…` + 有序列表 | 章节页: 蓝底白字 01/02/… 编号条 | +| `` | 右上角页眉, 从这页起一直生效(封面/章节页自动不显示) | +| `

…

` / `

…

` | 整段红色居中 / 主色蓝居中 | +| `…` / `…` | 行内改色 | +| `

…

` | 图片说明的小灰字 | +| `
…
` / `
…
` | 内容偏多时整块缩到 0.85em / 0.78em | +| `
…
` / `
…
` | 块内水平居中 / 在正文页里靠底 | +| `
` + `.flow-box`(可加 `is-bad` / `is-good`) + `.flow-arrow` | 纯 CSS 的简易流程图 | +| ` ```mermaid ` 代码块 | 构建时渲染成内联 SVG(需挂 `tools/marp-mermaid-engine.mjs`) | + +## 可调参数 + +- `--tectonics-accent` 主色(默认 `#004e98`, 取自 `design.1.png`), `--tectonics-red` 强调红 +- `--tectonics-sans` / `--tectonics-serif` 标题与正文字体 +- `--tectonics-title-size` / `--tectonics-title-rule` 页标题字号与下方细线 +- `--toc-*`(目录页位置与字号)、`--step-*`(章节编号条尺寸)按画幅各自一组 + +## 示例与构建 + +example 目录带有一份示例 + +```sh +marp --html -o pre.html pre.md # 重新生成示例 +``` + +## 开放源代码协议 + +该主题在 MIT 协议的约束下开放源代码(vendor 下引用的第三方代码遵循它们自己的协议), 欢迎发起拉取请求并贡献改进. diff --git a/example/marp.config.mjs b/example/marp.config.mjs new file mode 100644 index 0000000..7515bb3 --- /dev/null +++ b/example/marp.config.mjs @@ -0,0 +1,5 @@ +export default { + themeSet: ['../theme'], + allowLocalFiles: true, + engine: '../tools/marp-mermaid-engine.mjs', +} diff --git a/example/pre.assets/三花猫与人类玩耍.jpg b/example/pre.assets/三花猫与人类玩耍.jpg new file mode 100644 index 0000000..5347f86 Binary files /dev/null and b/example/pre.assets/三花猫与人类玩耍.jpg differ diff --git a/example/pre.assets/多种家猫.png b/example/pre.assets/多种家猫.png new file mode 100644 index 0000000..6b3c90a Binary files /dev/null and b/example/pre.assets/多种家猫.png differ diff --git a/example/pre.assets/结构.png b/example/pre.assets/结构.png new file mode 100644 index 0000000..8af350d Binary files /dev/null and b/example/pre.assets/结构.png differ diff --git a/example/pre.assets/镜子实验.png b/example/pre.assets/镜子实验.png new file mode 100644 index 0000000..d51906f Binary files /dev/null and b/example/pre.assets/镜子实验.png differ diff --git a/example/pre.md b/example/pre.md new file mode 100644 index 0000000..4544597 --- /dev/null +++ b/example/pre.md @@ -0,0 +1,122 @@ +6202 级研究生毕业答辩 + +高活泼性 *Felis catus* 系猫科动物及可爱性质应用研究 + +地球猫咪及资源学院 哈基人 + +2026 年 9 月 28 日 + +(原稿这里还有 "报告人: zhiyu3826" 和 "指导教师: zhiyu3826", 按 design.1 改版时去掉了, 需要就加回) + +--- + +报告内容 +1. 选题背景与意义 +2. 研究内容与进展 +3. 工作总结及未来展望 +4. 致谢 + +--- + +一、选题背景与意义 +(本页小节用编号条样式: 蓝底白字 01-05 + 灰底条, 对应 design.4) + +1. 研究背景 +2. 研究现状 +3. 存在问题 +4. 研究思路 +5. 技术路线 + +--- + +1.1 研究背景 + +(页眉: 选题背景与意义, 从这一页起后续各页右上角都显示) + +**家猫**凭借着响应快, 尺寸小, 成本低, 高活泼型等优点而得到广泛关注(关键的介绍话语, 高度凝练) + +(左图) pre.assets/结构.png 说明: 家猫结构示意图 +(右图) pre.assets/多种家猫.png 说明: 多种家猫示意图, 家猫陪伴应用 + +(蓝色居中) 高活泼性的家猫性格是提供高质量, 持久, 可靠的陪伴体验的关键所在 + +--- + +1.1 研究背景 + +人群对家猫性质要求 +[] 相近的良好性格 +[] 较长的陪伴周期 +[] 较高的对象智商 +[] 优异的活泼可爱性 +[] 高液态灵活性 + +(右图) pre.assets/镜子实验.png 说明: 家猫镜子实验示意图 + +--- + +1.1 研究背景 + +三花猫优势 +[v] 寿命较高 +[v] 性格稳定 +[v] 不闯祸 +[v] 亲近人类 + +(右图) pre.assets/三花猫与人类玩耍.jpg 说明: 三花猫与人类玩耍示意图, 引用出处: 哔哩哔哩猫猫频道 + +--- + +1.2 研究现状 + +家养猫科动物研究现状 + +| 体系 | 应激易度(单位: 哈) | 寿命长度(单位: a) | Reference | +| :--- | ---: | ---: | :--- | +| 美国短毛猫 | 520 | 15 | 猫科陪伴协会年报 | +| 西伯利亚森林猫 | 505 | 14 | 家猫行为观察报告 | +| 阿比西尼亚猫 | 610 | 12 | 猫科陪伴协会年报 | +| 日本短尾猫 | 540 | 14 | 哔哩哔哩猫猫频道 | +| 巴厘猫 | 570 | 16 | 家猫行为观察报告 | +| 中国狸花猫 | 460 | 17 | 本实验室实测 | + +(红色居中) 国际主要研究的家猫应激易度在 500 哈以上, 无法满足高玩极端环境下应用 + +--- + +1.3 存在问题 + +**使用强度与应激易度无法满足极端玩耍环境** +**传统训猫工艺造成猫猫缺陷风险高, 耗时耗力** + +(下方流程图, 原生 mermaid) +```mermaid +graph LR + A["✗ 训猫、玩耍分开进行"] --> B["✓ 匹配共训"] +``` + +(红色居中) 如何实现活泼与难应激性质匹配共存? + +--- + +1.4 研究思路 + +用视觉模型从高速摄像里量化「活泼度」: + +```python +import cv2, numpy as np +from ultralytics import YOLO + +model = YOLO("yolov8n.pt") # COCO 类别 15 = cat +cap = cv2.VideoCapture("cat.mp4") # 96 fps 高速摄像 +shift, prev = [], None +for _ in range(600): + boxes = model.predict(cap.read()[1], classes=[15], verbose=False) + box = boxes[0].boxes.xyxy[0] # 取第一只猫 + center = np.array([(box[0] + box[2]) / 2, (box[1] + box[3]) / 2]) + shift.append(np.linalg.norm(center - prev) if prev is not None else 0) + prev = center +print(f"平均活泼度 {np.mean(shift[1:]) / 3.2:.0f} 哈") +``` + +(蓝色居中) 活泼度达标才谈得上陪伴, 应激易度达标才算得上安全 diff --git a/theme/tectonics.css b/theme/tectonics.css new file mode 100644 index 0000000..bea9058 --- /dev/null +++ b/theme/tectonics.css @@ -0,0 +1,474 @@ +/*! + * Tectonics — 答辩模板主题 + * + * @theme tectonics + * @author zhiyu3826 + * @size 16:9 1280px 720px + * @size 4:3 960px 720px + * @auto-scaling fittingHeader + */ + +/* 以 Marp Core 内置 default 主题为底, 这里只覆盖版式 */ +@import-theme "default"; + +/* ===== 可调参数 ===== */ +section { + --tectonics-accent: #004e98; /* 主色: 取自 design.1.png 的色带 */ + --tectonics-fg: #393939; /* 封面的深灰文字色 */ + + --tectonics-sans: "Noto Sans CJK SC", "Source Han Sans SC", "PingFang SC", + "Microsoft YaHei", sans-serif; + --tectonics-serif: "Source Han Serif CN VF", "Source Han Serif CN", + "Noto Serif CJK SC", "Songti SC", SimSun, serif; + + --tectonics-header-color: #555; /* 右上角章节名的灰 */ + --tectonics-title-size: 34px; + --tectonics-title-rule: 2px; + + width: 1280px; + height: 720px; + padding: 48px 64px 44px; +} + +/* ===== 正文页: 标题钉在左上角, 内容自上而下 ===== */ +section:not(.cover) { + display: flex; + flex-flow: column nowrap; + align-content: flex-start; + justify-content: flex-start; +} + +/* 「本页第一个标题」的两种情形: + * 没有页眉时, 标题是 section 的第一个子元素 (:first-child) + * 有页眉时, 框架会把
插成第一个子元素, 标题紧跟其后 + * 所以每条标题规则都要写这两个选择器, 否则加了页眉的页会掉样式。 + */ +section:not(.cover):not(.toc) > :is(h1, h2, h3):first-child, +section:not(.cover):not(.toc) > header:first-child + :is(h1, h2, h3) { + flex: none; + margin: 0 0 28px; + padding: 0 0 12px; + border-bottom: var(--tectonics-title-rule) solid var(--tectonics-accent); + font-size: var(--tectonics-title-size); + line-height: 1.25; +} + +/* ===== 封面 (对应 design.1.png) ===== + * 三行文字 + 一条通栏色带, 位置按设计稿比例量出来的, 单位是 1280x720 画布上的 px + */ +section.cover { + display: flex; + flex-flow: column nowrap; + justify-content: flex-start; + padding: 0; /* 让色带通栏 */ + text-align: center; + color: var(--tectonics-fg); +} + +section.cover > p { + margin: 0; + line-height: 1; + font-family: var(--tectonics-sans); + font-weight: 700; + font-size: 42px; +} + +/* 第一行: 顶部小字 */ +section.cover > p:first-of-type { + padding-top: 63px; +} + +/* 第二行: 通栏色带里的主标题 */ +section.cover > :is(h1, h2):first-of-type { + margin: 60px 0 0; + padding: 21px 64px 15px; + background: var(--tectonics-accent); + color: #fff; + font-family: var(--tectonics-serif); + font-size: 70px; + font-weight: 700; + line-height: 1.45; + text-align: center; +} + +/* 第三行: 学院 + 姓名 */ +section.cover > p:nth-of-type(2) { + margin-top: 30px; + font-size: 37px; +} + +/* 第四行: 日期 */ +section.cover > p:nth-of-type(3) { + margin-top: 164px; + font-size: 28px; + font-weight: 400; +} + +/* ===== 左右两栏: 用 div 包住的内容各占一栏, 其余元素整行 ===== */ +section.cols { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem 2rem; + align-content: start; +} + +section.cols > :is(h1, h2, h3):first-child, +section.cols > header:first-child + :is(h1, h2, h3), +section.cols > p, +section.cols > ul, +section.cols > ol, +section.cols > blockquote { + grid-column: 1 / -1; +} + +section.cols > div { + min-width: 0; +} + +/* ===== 块级小工具 ===== + * markdown 里用 div 包住段落 (div 标签与文字之间留空行, 段内公式/加粗才会被解析): + *
…
水平居中 + *
…
靠底 (正文页是 flex 列, 把该块推到底部) + */ +section .mid { + text-align: center; +} + +section .bottom { + margin-top: auto; +} + +/* ===== 目录页 (对应 design.2.png) ===== + * 左侧大字标题 + 竖直分隔线 + 右侧条目, 位置按设计稿比例量出来的 (1280x720 画布上的 px) + */ +section.toc { + --toc-line-x: 411px; /* 竖线左沿 */ + --toc-line-y: 114px; /* 竖线顶端 */ + --toc-line-h: 519px; /* 竖线高度 */ + --toc-line-w: 4px; + --toc-title-left: 59px; /* 大字标题左沿 (相对版心) */ + --toc-title-width: 260px; /* 限制宽度, 让"报告内容"自然折成两行 */ + --toc-title-size: 91px; + --toc-title-line: 1.15; + --toc-list-left: 269px; /* 列表相对大字标题右沿的缩进 */ + --toc-item-size: 51px; + --toc-item-line: 1.77; + + display: flex; + flex-flow: row nowrap; + align-items: center; + padding: 48px 64px 88px; +} + +/* 竖直分隔线 + * 注意: 不能用 section::after —— 框架把页码也画在 section::after 上, 且它的规则带 id + * 选择器, 优先级压过主题, content 会被换成页码。所以借内容的 ::before 来画 + * (它是 static 定位, 绝对定位的包含块仍然是 section) + * 目录条目既可以写成列表 (ul/ol), 也可以写成纯文本行 (p), 两种都挂竖线。 + */ +section.toc > :is(ul, ol, p)::before { + content: ''; + position: absolute; + top: var(--toc-line-y); + left: var(--toc-line-x); + width: var(--toc-line-w); + height: var(--toc-line-h); + background: var(--tectonics-accent); /* = #004e98 */ +} + +/* 左侧大字标题 */ +section.toc > :is(h1, h2, h3):first-child, +section.toc > header:first-child + :is(h1, h2, h3) { + flex: none; + width: var(--toc-title-width); + margin: 0 0 0 var(--toc-title-left); + padding: 0; + border: none; + font-size: var(--toc-title-size); + font-weight: 700; + line-height: var(--toc-title-line); + text-align: left; +} + +/* 右侧条目 + * 两种写法都支持: + * 有序列表 —— 序号由主题生成成「一、二、…」(cjk-ideographic) + * list-style-position: outside 时序号挂在左侧空白里, 条目文字的左沿保持在设计稿位置 + * 纯文本行 —— 写成连续几行, 渲染成一个

, 条目自带「一、二、…」 + */ +section.toc > :is(ul, ol, p) { + margin: 9px 0 0 var(--toc-list-left); + padding: 0; + font-size: var(--toc-item-size); + line-height: var(--toc-item-line); +} + +section.toc > ul { + list-style: none; +} + +section.toc > ol { + list-style-type: cjk-ideographic; + list-style-position: outside; +} + +section.toc > :is(ul, ol) > li { + margin: 0; +} + +/* ===== 4:3 (960x720) 下重新量一遍目录页 ===== + * 主题元数据里的 @size 已声明 16:9 与 4:3 两种尺寸, Marp 会给每个 section + * 打上 data-size 属性, 所以尺寸适配写在主题里就够 —— markdown 不必再写