Deutsch
Migration von Stripo
Diese Anleitung richtet sich an Teams, die E-Mail-Templates in Stripo erstellt haben — im gehosteten Editor oder über ein Produkt, das das Stripo-Plugin einbettet — und auf Templaticals visuellen Editor wechseln möchten. @templatical/import-stripo konvertiert Stripo-HTML in Templaticals TemplateContent-Format. Installieren Sie es, führen Sie es aus, und nutzen Sie die folgenden Abschnitte, um alles nachzuarbeiten, was es nicht automatisch abbilden kann.
Stripo speichert zwei verschiedene HTML-Oberflächen. Der Konverter erkennt selbst, welche Sie übergeben. Es gibt kein Mode-Flag.
| Oberfläche | Herkunft | Unterscheidungsmerkmal |
|---|---|---|
| Plugin- / Editor-Speicher | getTemplateData() → { html, css } | esd-stripe, esd-structure, esd-block-* auf Elementen |
| Kompilierter Export | Datei → HTML, oder compileEmail({ callback }) | es-wrapper, es-content-body, es-header-body — kein esd-* auf Elementen |
Eine übrig gebliebene Regel .esd-block-html in einem Stylesheet ist kein Unterscheidungsmerkmal. Rein CSS-seitige Reste werden als generisches HTML konvertiert.
Installation
bash
npm install @templatical/import-stripobash
pnpm add @templatical/import-stripobash
yarn add @templatical/import-stripobash
bun add @templatical/import-stripoOhne Build-Schritt (CDN)
html
<script type="module">
import { convertStripoTemplate } from 'https://cdn.jsdelivr.net/npm/@templatical/import-stripo/+esm';
// ...dann wie unter Verwendung konvertieren
</script>Verwendung
ts
import { convertStripoTemplate } from '@templatical/import-stripo';
// Plugin-Host — was Sie aus getTemplateData() gespeichert haben:
const { html, css } = await window.StripoApi.getTemplateData();
const { content, report } = convertStripoTemplate(html, { css });
// Marketer-Export Datei → HTML:
const exported = await fetch('/path/to/export.html').then((r) => r.text());
const compiled = convertStripoTemplate(exported);
const editor = await init({
container: '#editor',
content: compiled.content,
});convertStripoTemplate ist synchron und gibt ein ImportResult zurück mit:
content— das konvertierteTemplateContent, bereit für den Editorreport— ein Konvertierungsbericht mit dem Status jedes Quellelements (converted,approximated,html-fallbackoderskipped)
Übergeben Sie options.css zusammen mit dem Plugin-Speicher (getTemplateData().css). Diese Regeln gelten für jede Zelle, die der HTML-Importer konvertiert. Ein kompilierter Datei → HTML-Export trägt dieselben Regeln bereits inline.
Nicht erkanntes HTML (keine Stripo-Klassenattribute) läuft durch @templatical/import-html; der Bericht enthält eine Warnung, die diesen Fallback benennt.
Den Bericht lesen
Jeder Eintrag in report.entries beschreibt ein Quellelement:
| Status | Bedeutung |
|---|---|
converted | Auf einen Templatical-Block abgebildet, ohne Verlust. |
approximated | Auf einen Templatical-Block abgebildet, mit einer Begrenzung oder einem Flatten — note nennt die Änderung. |
html-fallback | Kein Block-Äquivalent; das Original-Markup liegt in einem HtmlBlock. |
skipped | Für die Parität mit den anderen @templatical/import-*-Paketen reserviert; dieser Konverter erzeugt das derzeit nicht. |
Der Bericht listet die Blöcke, die in content bleiben, einschließlich jedes Abschnitts, den Stripo erzeugt. Ein <tr>-Abschnitt, den der HTML-Importer beim Durchlaufen einer Zelle anlegt, entfällt. Warnungen aus diesem Durchlauf bleiben.
ts
console.log(report.summary);
// { total: 18, converted: 16, approximated: 1, htmlFallback: 1, skipped: 0 }
for (const entry of report.entries) {
if (entry.status === 'approximated') {
console.warn(`<${entry.sourceTag}> approximated:`, entry.note);
}
}Weg 1 — Visuell neu aufbauen, mit dem Stripo-Export als Referenz
Bei wenigen Templates ist der Neuaufbau per Hand neben einer kompilierten Vorschau oft schneller als ein Paket zu installieren:
- Exportieren Sie Datei → HTML aus Stripo und öffnen Sie es im Browser — das ist Ihr visuelles Ziel.
- Öffnen Sie den Templatical-Editor (oder den Playground) daneben.
- Ziehen Sie die entsprechenden Templatical-Blöcke herein (siehe die Mapping-Tabellen unten).
- Kopieren Sie den Text direkt. Hosting Sie Bilder über Ihre Medienbibliothek neu.
Die meisten Stripo-Templates sind in 10–20 Minuten umgezogen, sobald Sie eines oder zwei gemacht haben. Bei größeren Mengen führen Sie zuerst @templatical/import-stripo aus und nutzen diesen Weg nur, um nachzuarbeiten, was als approximated oder als html-fallback-Block gelandet ist.
Mapping des Plugin-HTML
Plugin-Speicher ist ein Tabellenbaum mit esd-*-Klassen. Jedes esd-structure wird ein SectionBlock; seine esd-container-frame-Kinder sind die Spalten.
| Stripo-Marker | Templatical-Block | Hinweise |
|---|---|---|
esd-structure mit 1–3 esd-container-frames | SectionBlock (columns "1" / "2" / "3") | Frames sind die Spalten. Das Padding kommt von es-p* an der Structure (Standard 0); ein Inline-padding überschreibt die Seiten, die es nennt. |
esd-structure mit 4+ Frames | SectionBlock columns: "1" | Auf eine Spalte reduziert; approximated. |
esd-block-text | title / paragraph | Generisches HTML-Mapping des inneren Markups. |
esd-block-image | image | Generisches HTML-Mapping des inneren <img>. |
esd-block-button | button | href, Text, target="_blank" → openInNewTab. Inline background / color / border-radius, sofern vorhanden. |
esd-block-menu (2+ Item-Zellen) | menu | Ein MenuItemData je Item-Zelle. |
esd-block-menu (1 Item-Zelle) | paragraph (oder das innere Mapping) | Ein gestapelter Schritt, keine Navigation — Password-Reset-Zeilen bleiben Fließtext. |
esd-block-social | social | Plattform aus title / src / alt; unbekannte Namen werden website. |
esd-block-spacer | spacer oder divider | Ein sichtbarer border-bottom oder border-top am Spacer oder in der inneren Zelle wird ein Trenner (Stil, Farbe, Stärke und die Breitenregel unten). Sonst ein Spacer: Höhe aus style, dem height-Attribut oder dem vertikalen Padding. |
esd-block-html | html | Inneres Markup bleibt erhalten. |
Mapping des kompilierten HTML
Der kompilierte Export entfernt esd-* von den Elementen und behält es-*-Reste. Jede direkte Zeile eines Streifens wird ein eigener Abschnitt, in Dokumentreihenfolge. Spalten sind die gefloateten Tabellen es-left / es-right in dieser Zeile.
| Stripo-Marker | Templatical-Block | Hinweise |
|---|---|---|
es-header / es-content / es-footer | ein oder mehrere SectionBlocks | Ein Abschnitt je direkter Zeile des es-*-body im Streifen. Ein Streifen ohne es-*-body verwendet seine eigenen Zeilen. Eine leere Zeile entfällt. |
| Inhalt neben den Spalten in derselben Zelle | einspaltiger SectionBlock | Führender Inhalt bleibt vor dem Spaltenabschnitt, nachfolgender Inhalt danach. Inhalt, der zwischen den Spalten stand, wird hinter den Spaltenabschnitt gesetzt (approximated). Eine Zelle mit Padding, die in mehr als einen Abschnitt zerfällt, ist approximated: das obere Padding bleibt am ersten Abschnitt, das untere am letzten, die Seiten an jedem. |
1–3 es-left / es-right in einer Zeile | columns "1" / "2" / "3" | Gefloatete Tabellen in dieser Zeile, auch Tabellen in einem Wrapper. Spalten innerhalb eines weiteren es-left / es-right bleiben darin. |
| 4+ gefloatete Tabellen in einer Zeile | columns: "3" | Weitere Spalten landen im dritten Slot; approximated. |
a.es-button | button | Inline background / color / border-radius, einschließlich vom umschließenden es-button-border. Widgets bleiben in Dokumentreihenfolge beim Text um sie herum. |
table.es-menu (2+ Item-Zellen) | menu | |
table.es-menu (1 Item-Zelle) | inneres Mapping | Eine Schrittzeile, dieselbe Regel wie beim Plugin-Pfad. |
table.es-social | social | Dasselbe Plattform-Mapping wie beim Plugin-Pfad. |
es-spacer mit sichtbarem Rahmen | divider | Stil, Farbe und Stärke aus border-bottom oder border-top. Die Breite folgt der Regel unten. |
es-spacer ohne Rahmen | spacer | Höhe aus style, dem height-Attribut oder dem vertikalen Padding. |
settings.backgroundColor ist die erste gesetzte Farbe von es-wrapper oder es-wrapper-color (#ffffff, wenn keine gesetzt ist). Eine es-*-body-Füllung ist der Hintergrund des Abschnitts. Ein transparenter Body lässt die Streifenfüllung auf dem Abschnitt. Eine Streifenfüllung, die sich von Seite und Body unterscheidet, wird section.wrapper.backgroundColor; dieser Abschnitt ist approximated. Ein background-image wird gemeldet und verworfen; die Farbe bleibt.
Das Padding der Strukturzelle ist das Padding des Abschnitts. Der Standard ist 0. Im Plugin-HTML setzt es-p20 jede Seite und es-p10t / es-p10r / es-p10b / es-p10l überschreibt eine Seite; ein Inline-Padding überschreibt die Seiten, die es nennt. Diese Klassen werden am Structure-Element gelesen.
Die Breite eines Trenners gilt für die Spalte, in der er steht. Fehlende Breite, auto oder 100% füllt diese Spalte. Ein anderer Prozentwert bleibt ein Prozentwert, auf zwei Dezimalstellen gerundet und auf 0–100 begrenzt. Eine px-Breite bleibt px, bis sie den Raum der Spalte füllt (der Anteil der Spalte an der Body-Breite, abzüglich des Abschnitts-Paddings an der Kante, die diese Spalte trägt, und des eigenen Seiten-Paddings des Trenners). double, groove, ridge, inset und outset werden als solid importiert. Eine schmalere Linie mit Ausrichtung links oder rechts wird zentriert; dieser Eintrag ist approximated. Eine schmalere Linie ohne Ausrichtung gilt als links.
Alles andere in einer Zeile läuft durch @templatical/import-html (Überschriften, Absätze, Bilder, <hr>-Trenner).
Wo das Mapping verlustbehaftet ist
- Spaltengeometrie — Templatical unterstützt fünf Spaltenlayouts (
1,2,3,2-1,1-2). Plugin-HTML mit 4+ Frames wird auf eine Spalte reduziert. Kompiliertes HTML mit 4+ gefloateten Tabellen in einer Zeile behält drei Slots und faltet den Rest in den letzten. Inhalt zwischen diesen Spalten wird ein eigener einspaltiger Abschnitt dahinter, und eine Zelle mit Padding, die über die entstehenden Abschnitte aufgeteilt wird, istapproximated. - Social-Icon-
alt— Plattformen werden abgeleitet; der ursprünglichealt-Text wird aufSocialIconnicht gespeichert. - Block-IDs — jeder importierte Block bekommt eine neu erzeugte ID.
- AMP / Timer / Module — kein Templatical-Äquivalent; inneres Markup landet als
htmloder wird mit Warnung übersprungen. - Plugin-CSS — übergeben Sie
options.cssmit dem Plugin-Speicher. Regeln, die nur in diesem Stylesheet stehen, werden auf die konvertierten Blöcke angewendet. Kompilierte Exporte tragen sie bereits inline.
Was nicht automatisch abgebildet wird
- Ein Roundtrip zurück nach Stripo — die Ausgabe ist Templatical-JSON, kein Stripo-Editor-HTML.
- Generisches HTML, das nie ein Stripo-Dokument war — verwenden Sie
@templatical/import-htmldirekt. Hier übergeben konvertiert es trotzdem, mit einer Warnung.
Weitere Hilfe
Eröffnen Sie eine Diskussion mit einem geschwärzten Ausschnitt Ihres Stripo-HTML und dem, was Sie erreichen wollen. Wir nutzen diese Rückmeldungen, um die Abdeckung von @templatical/import-stripo zu verbessern.