name: trmnl
description: 使用 TRMNL CSS 框架为 TRMNL 电子墨水屏设备生成内容，并通过 trmnl CLI 发送。适用于用户希望在 TRMNL 设备上显示信息、向电子墨水屏发送消息、创建仪表板内容、显示通知或更新其终端显示的场景。支持使用 TRMNL 框架创建丰富的布局（弹性盒子、网格、表格、进度条、排版工具）。

TRMNL 内容生成器

为 TRMNL 电子墨水屏设备生成 HTML 内容。

前提条件

安装最新版本的 trmnl CLI：

npm install -g trmnl-cli@latest

配置 Webhook 插件（一次性设置）：

# 添加插件
trmnl plugin add home "https://trmnl.com/api/custom_plugins/{uuid}"

# 验证配置
trmnl plugin

快速开始工作流

1. 安装/更新 CLI： 运行 npm install -g trmnl-cli@latest
2. 检查插件： 运行 trmnl plugin - 如果没有插件，提示用户添加
3. 确认设备类型（默认：TRMNL OG，2-bit，800x480）
4. 根据内容需求阅读相关参考文档
5. 使用 TRMNL 框架类生成 HTML
6. 将 HTML 写入临时文件并发送：
   bash trmnl send --file /tmp/trmnl-content.html # 或发送到特定插件： trmnl send --file /tmp/trmnl-content.html --plugin office
7. 仅做最小化确认 - 不要将内容回显到聊天中

发送内容

从文件发送（推荐）：

# 首先将 HTML 内容写入文件
cat > /tmp/trmnl-content.html << 'EOF'
<div class="layout layout--col gap--space-between">
  <div class="item">
    <span class="value value--xlarge value--tnums">Hello TRMNL!</span>
  </div>
</div>
<div class="title_bar">
  <span class="title">我的插件</span>
</div>
EOF

# 发送到显示屏
trmnl send --file /tmp/trmnl-content.html

发送前验证：

trmnl validate --file /tmp/trmnl-content.html

查看发送历史：

trmnl history
trmnl history --today
trmnl history --failed

Webhook 限制

全局设置套餐以进行准确验证：

trmnl tier plus  # 或 "free"

参考文档

根据需要阅读这些文件：

标准插件结构

每个插件都遵循此模式：

<div class="layout layout--col gap--space-between">
  <!-- 用分隔线分隔的内容区域 -->
</div>
<div class="title_bar">
  <img class="image" src="icon.svg">
  <span class="title">插件名称</span>
  <span class="instance">上下文</span>
</div>

• layout + layout--col = 垂直弹性容器
• gap--space-between = 将区域推到边缘
• title_bar = 始终在底部，位于布局之外
• divider = 分隔主要区域
• 关键： 每个视图仅允许一个 .layout 元素

快速参考

网格系统（10列）

<div class="grid">
  <div class="col--span-3">30%</div>
  <div class="col--span-7">70%</div>
</div>

项目组件

<div class="item">
  <div class="content">
    <span class="value value--xlarge value--tnums">$159,022</span>
    <span class="label">总销售额</span>
  </div>
</div>

数值排版

数字必须使用 value--tnums。

灰度类

使用抖动类，而非内联颜色：
- bg--black, bg--gray-60, bg--gray-30, bg--gray-10, bg--white
- text--black, text--gray-50

数据属性

最佳实践

1. 使用 layout + title_bar 结构
2. 数字始终使用 value--tnums
3. 核心指标使用 data-fit-value
4. 使用 bg--gray-* 抖动类
5. 保持负载在套餐限制内
6. 最小化确认 - 只需回复"已发送到 TRMNL"

故障排除