7. Dies dateis der Konfiguration des konverters
![]() |
Die Konfigurationsdatei [config.pyin einem Dokument werden Informationen gesammelt, die sich von einem Dokument zum anderen ändern können. Er verwendet sechs weitere Konfigurationsdateien. In diesen wurden die Einstellungen gesammelt, die sich am wahrscheinlichsten ändern, wenn man bei der Konvertierung von einem Dokument zum anderen wechselt.
Die Datei [config.py] importiert den Inhalt der anderen sechs Konfigurationsdateien :
from config_urls import URLS
from config_texts import TEXTS
from config_code import CODE
from config_styles import STYLES
from config_colors import COLORS
from config_presentation import PRESENTATION
config_urls
In dieser Datei werden die drei URL der Konfiguration [config.py] zusammengefasst. Diese ändern sich mit jedem Dokument.
URLS = {
"site_url": "https://stahe.github.io/de-word-odt-vers-html-janv-2026/",
"repo_url": "https://stahe.github.io/de-word-odt-vers-html-janv-2026",
"author_site": "https://tahe.developpez.com",
}
- zeile 2: URL der Site web, wo Sie die vom Konverter produzierte Site HTML bereitstellen werden;
- zeile 3: der URL aus Ihrem Git-Repository (siehe Absatz 12) ;
- zeile 4: die Seite web des Erstellers der Seite web. Diese URL wird am unteren Ende der Seiten der Website web platziert. Kann leer sein.
config_texts
Diese Datei sammelt die Texte von [config.py], die sich ändern können, wenn die Sprache der erzeugten HTML-Website geändert wird.
TEXTS = {
"home_label": "Startseite",
"site_name": "Konvertieren Sie ein Word- oder ODT-Dokument in eine statische, MkDocs-kompatible HTML-Website mit den KI-Modellen Gemini 3 und ChatGPT 5.2",
"site_description": "Konvertieren Sie ein Word- oder ODT-Dokument in eine statische, MkDocs-kompatible HTML-Website mit den KI-Modellen Gemini 3 und ChatGPT 5.2",
"toggle_to_dark": "In den Dunkelmodus wechseln",
"toggle_to_light": "In den Hellmodus wechseln",
"footer_license_sentence": (
"Dieser von <strong>Serge Tahé</strong> verfasste Kurs-Tutorial wird der Öffentlichkeit gemäß den Bedingungen der\n"
" <em>Creative Commons-Lizenz ‚Namensnennung – Keine kommerzielle Nutzung –\n"
" Weitergabe unter gleichen Bedingungen 3.0 nicht portiert</em>.\n"
),
"copy_label": "Kopieren",
"copy_copied_label": "Kopiert",
}
- zeile 2: Der Name des ersten Links im Inhaltsverzeichnis. Sein Inhalt fasst alles zusammen, was sich im Dokument vor der ersten Überschrift der Ebene 1 (Titel 1) befindet. Dies ist der Anfang des Dokuments ;
- zeile 3: der Titel des Dokuments. Er wird im oberen Banner der generierten web angezeigt;
- zeile 4: Ebenfalls der Titel des Dokuments, diesmal für Suchmaschinen bestimmt;
- zeile 5-6: Die Sprechblasen, die angezeigt werden, wenn man mit der Maus über das Symbol in der oberen Leiste der Website fährt, um von einem hellen zu einem dunklen Modus oder umgekehrt zu wechseln;
- zeilen 7-11: Die Lizenz der Website. Sie wird im pied der Seite der erzeugten Site angezeigt;
- zeilen 12-13: der angezeigte Code auf der Website l'est, zusammen mit einer Schaltfläche, mit der Sie den Code in die Zwischenablage kopieren können. Zeile 12 ist die Beschriftung der Schaltfläche vor dem Kopieren, Zeile 13 die Beschriftung, wenn der Code kopiert wurde ;
So sieht diese Datei für eine englische Version des Dokuments aus :
TEXTS = {
"home_label": "Welcome",
"site_name": "Convert a Word or ODT document into a static HTML website using Gemini 3 and ChatGPT 5.2",
"site_description": "Convert a Word or ODT document into a static HTML website using Gemini 3 and ChatGPT 5.2 AI",
"toggle_to_dark": "Switch to dark mode",
"toggle_to_light": "Switch to light mode",
"footer_license_sentence": (
'This tutorial written by <strong>Serge Tahé</strong> is made available to the public under the terms of the\n'
'<em>Creative Commons Attribution – Non-Commercial –\n'
'ShareAlike 3.0 Unported</em>.'
),
"copy_label": "Copy",
"copy_copied_label": "Copied",
}
config_styles
Diese Datei wird verwendet, um den Stilnamen für den Titel des Dokuments zu vergeben. Für ein DOCX-Dokument ist dies in der Regel "Titel", für ein ODT-Dokument ändert sich dies jedoch mit jedem Dokument.
STYLES = {
"style_names": [
"P1"
]
}
- zeile 2: [styles_names] ist eine Tabelle. Hier können wir die Namen der Stile eintragen, die der Titel des Dokuments haben kann;
- zeile 3: Das Dokument [word-odt-vers-html-janv-2026.odt] hat einen Titel mit dem Stil P1 ;
config_code
Die Codeblöcke im Dokument DOCX oder ODT können in zwei Formen gefunden werden:
- angereicherter Code (Farben, fett, kursiv, ...). In diesem Fall wird er unverändert in HTML kopiert;
- des Rohcodes (plain text). In diesem Fall gibt man den Konvertern Hinweise, damit sie selbst herausfinden, welche Sprache im Codeblock verwendet wird. Dazu gibt man ihm Schlüsselwörter :
CODE = {
# Automatic language detection rules based on content
"detection_rules": {
"csharp": [
"using", "Console.WriteLine", "public static void Main", "WebMethod",
"TryParse", "EventArgs", "String.Format", "System.Web.Services"
],
"java": [
"System.out.println", "public static void main(String", "package",
"JUnitTest", "Class.forName", "PreparedStatement", "private static void",
"private void", "getAgendaMedecinJour", "@PostConstruct", "@ResponseBody",
"@RequestMapping", "getMedecin", "@Entity", "@Autowired", "@Bean",
"Serializable", "getClient", "getCreneau", "getRv", "PostAjouterRv",
"PostSupprimerRv", "@EnableJpaRepositories", "@Component", "getAgendaMedecinJour",
"getResponse", "getMessagesForException", "getBase64", "ajouterRv",
"Reponse", "getPartialViewAgenda", "setModelforAgenda", "ActionContext",
"getActionContext", "PostLang", "PostUser", "PostGetAgenda", "@NotNull",
"@EnableAutoConfiguration", "HttpSecurity"
],
"html": [
"<html>", "</div>", "<body>", "<script>", "href=", "<span>", "<p>",
"<h2>", "<form", "<table", "<input"
],
"sql": [
"SELECT", "INSERT INTO", "UPDATE", "DELETE FROM", "WHERE",
"CREATE TABLE", "AlTER TABLE"
],
"python": [
"def", "import", "print(", "from"
],
"xml": [
"<?xml", "<project", "<version>", "<configuration>", "<build>",
"<dependency>", "<properties>", "<configuration>", "<start-class>"
],
"javascript": [
"use strict", "console.log", "let", "constructor", "async", "export"
],
"php": [
"<?php", "declare", "require"
],
"vbscript": [
"Option", "Dim", "Explicit"
],
"markdown": [
"# ", "## ", "### ", "**", "__", "; "
"backdrop-filter:saturate(180%) blur(6px); "
"cursor:pointer; user-select:none; "
"transition:transform .08s ease, box-shadow .12s ease, background .12s ease; "
"z-index:5;"
),
"btn_hover": (
"box-shadow:0 3px 10px rgba(0,0,0,.18); "
"transform:translateY(-1px);"
),
"btn_copied": "opacity:.85;"
},
# -------------------------------------------------------------------------
# Images
# -------------------------------------------------------------------------
"images": {
"shadow": {
"enabled": True,
"border_radius": "8px"
}
},
# -------------------------------------------------------------------------
# Frame / header border
# -------------------------------------------------------------------------
"frame": {
"header_top_border_width": "4px"
}
}
Wenn Sie möchten, können Sie das Aussehen ändern :
- zeilen 5-10: aus dem Titel des Dokuments ;
- zeilen 15-19: Zeilen mit angereichertem Code ;
- zeile 24-45: der Schaltfläche [Kopieren], mit der Sie Code in die Zwischenablage stellen können;
- zeilen 50-55: Von den Schatten der Bilder ;
- zeilen 60-62: vom Rahmen, der grenzt die obere Leiste der Seiten auf der Website ein;
config_colors
In dieser Datei steuern Sie die Farben Ihrer Website, vor allem die Hintergrundfarbe des oberen Banners der Seiten:
COLORS = {
"theme": {
"palette": {
"light": {
"media": "(prefers-color-scheme: light)",
"scheme": "default",
"primary": "teal",
"accent": "purple"
},
"dark": {
"media": "(prefers-color-scheme: dark)",
"scheme": "slate",
"primary": "teal",
"accent": "purple"
}
}
},
"frame": {
# "header_bg_light": "#1E88E5", (blau)
"header_bg_light": "#CC7722",
"header_bg_dark": "#CC7722",
"header_top_border_light": "",
"header_top_border_dark": ""
},
"document_title": {
"color": "#2c3e50"
},
"copy_button": {
"border": "rgba(0,150,136,.45)",
"background": "rgba(0,150,136,.12)",
"text": "rgb(0,150,136)",
"background_hover": "rgba(0,150,136,.20)"
},
"images": {
"shadow": {
"zoomable": "0 8px 24px rgba(0,0,0,.28), 0 18px 60px rgba(0,0,0,.20)",
"zoomable_hover": "0 12px 30px rgba(0,0,0,.32), 0 26px 80px rgba(0,0,0,.22)",
"lightbox": "0 24px 80px rgba(0,0,0,.65)"
}
}
}
Hier muss man ein wenig in CSS geübt sein, was bei mir nicht der Fall ist. Ich habe nur die Farben aus den Zeilen 7 und 13 verwendet, die die Farbe der oberen Leiste festlegen.
config_files_to_copy
Diese Datei listet die Dateien auf, die in das Stammverzeichnis der erzeugten web kopiert werden müssen:
FILES_TO_COPY =[
"google5179c0eaff293e02.html",
"robots.txt",
"word-odt-vers-html-janv-2026.pdf",
"word-odt-vers-html-janv-2026.zip"
]
- zeilen 2-3: werden für das Google-Tracking der generierten Website benötigt (siehe Absatz 13) ;
- zeilen 4-5: die Dateien, die Sie in das Stammverzeichnis Ihrer Website web kopieren möchten, um sie Ihren Besuchern zur Verfügung zu stellen ;
config
Die Datei [config.py] ist die Konfigurationsdatei, die von beiden Konvertern verwendet wird. Er sammelt alle Informationen, von denen sie benötigen. Dies ist eine Datei, die normalerweise nie verändert werden sollte. Sie ist komplex und deshalb wurde beschlossen, die Konfigurationseinstellungen, die sich ändern können, aus ihr zu extrahieren und diese in externen Dateien abzulegen.
from config_urls import URLS
from config_texts import TEXTS
from config_code import CODE
from config_styles import STYLES
from config_colors import COLORS
from config_presentation import PRESENTATION
from config_files_to_copy import FILES_TO_COPY
config = {
"toc": {
"home_label": TEXTS["home_label"]
},
"mkdocs": {
"site_name": TEXTS["site_name"],
"site_url": URLS["site_url"],
"site_description": TEXTS["site_description"],
"site_author": "Serge Tahé",
"repo_url": URLS["repo_url"],
"repo_name": "GitHub",
"use_directory_urls": False,
"theme": {
"name": "material",
"custom_dir": "overrides",
"features": [
"navigation.sections",
"navigation.indexes",
"navigation.expand",
"toc.integrate",
"navigation.top"
],
"palette": [
{
"media": COLORS["theme"]["palette"]["light"]["media"],
"scheme": COLORS["theme"]["palette"]["light"]["scheme"],
"primary": COLORS["theme"]["palette"]["light"]["primary"],
"accent": COLORS["theme"]["palette"]["light"]["accent"],
"toggle": {
"icon": "material/brightness-7",
"name": TEXTS["toggle_to_dark"]
}
},
{
"media": COLORS["theme"]["palette"]["dark"]["media"],
"scheme": COLORS["theme"]["palette"]["dark"]["scheme"],
"primary": COLORS["theme"]["palette"]["dark"]["primary"],
"accent": COLORS["theme"]["palette"]["dark"]["accent"],
"toggle": {
"icon": "material/brightness-4",
"name": TEXTS["toggle_to_light"]
}
}
]
},
"markdown_extensions": [
"admonition",
"attr_list",
"pymdownx.superfences",
"pymdownx.mark",
{
"pymdownx.highlight": {
"anchor_linenums": True,
"linenums": None
}
},
"md_in_html",
"footnotes"
],
"extra_javascript": [
"javascripts/focus.js"
],
"extra_css": [
"stylesheets/focus.css"
]
},
"footer": (
"{% block footer %}\n"
" <div class=\"md-footer-meta md-typeset\">\n"
" <div class=\"md-footer-meta__inner\">\n\n"
" <div>\n"
f" <a href=\"{URLS['author_site']}\" target=\"_blank\">\n"
f" {URLS['author_site']}\n"
" </a>\n"
" <br>\n"
f" {TEXTS['footer_license_sentence']}\n"
" </div>\n\n"
" </div>\n"
" </div>\n"
"{% endblock %}"
),
"extra": {
"analytics": {
"provider": "google",
"property": "G-XXXXXXXX"
}
},
"document_title": {
"style_names": STYLES["style_names"],
"css": (
f"font-size: {PRESENTATION['document_title']['font_size']}; "
f"font-weight: {PRESENTATION['document_title']['font_weight']}; "
f"margin-bottom: {PRESENTATION['document_title']['margin_bottom']}; "
f"line-height: {PRESENTATION['document_title']['line_height']}; "
f"color: {COLORS['document_title']['color']};"
)
},
"code": {
"case_insensitive_languages": ["sql", "html", "vbnet", "vbscript"],
"style_keywords": ["code"],
"default_language": "text",
"rich_line_height": PRESENTATION["code"]["rich_line_height"],
"rich_font_family": PRESENTATION["code"]["rich_font_family"],
"rich_font_size": PRESENTATION["code"]["rich_font_size"],
"detection_rules": CODE["detection_rules"],
"copy_button": True,
"copy_label": TEXTS["copy_label"],
"copy_copied_label": TEXTS["copy_copied_label"],
"copy_only_recognized_language": True,
"copy_min_lines": 4,
"copy_allow_pygments_heuristic": True,
"copy_style": {
"container": PRESENTATION["copy_button"]["container"],
"btn": (
PRESENTATION["copy_button"]["btn"]
+ f"border:1px solid {COLORS['copy_button']['border']}; "
+ f"background:{COLORS['copy_button']['background']}; "
+ f"color:{COLORS['copy_button']['text']}; "
),
"btn_hover": (
f"background:{COLORS['copy_button']['background_hover']}; "
+ PRESENTATION["copy_button"]["btn_hover"]
),
"btn_copied": PRESENTATION["copy_button"]["btn_copied"]
}
},
"images": {
"shadow": {
"enabled": PRESENTATION["images"]["shadow"]["enabled"],
"border_radius": PRESENTATION["images"]["shadow"]["border_radius"],
"zoomable": COLORS["images"]["shadow"]["zoomable"],
"zoomable_hover": COLORS["images"]["shadow"]["zoomable_hover"],
"lightbox": COLORS["images"]["shadow"]["lightbox"],
}
},
"frame": {
"header_bg_light": COLORS["frame"]["header_bg_light"],
"header_bg_dark": COLORS["frame"]["header_bg_dark"],
"header_top_border_light": COLORS["frame"]["header_top_border_light"],
"header_top_border_dark": COLORS["frame"]["header_top_border_dark"],
"header_top_border_width": PRESENTATION["frame"]["header_top_border_width"]
},
"files_to_copy": FILES_TO_COPY,
"debug": True
}
- zeilen 1-7: Wir importieren alle Konfigurationsdateien ;
- zeile 9 : die Konfigurationsdatei ist eine script Python-Datei. Sie definiert eine einzige Variable [config]. Diese ist ein Wörterbuch, das alle Werte der Konfiguration enthalten wird;
- zeile 11: die Beschriftung des Links "Startseite" ;
- linie 14 : Das Wörterbuch [mkdocs] wird die Datei [mkdocs.yml] konfigurieren, die vom Gemini-Konverter / erzeugt wurde ChatGPT. Diese Datei wird dann von script [build] verwendet, um aus der vom Konverter erzeugten MkDocs eine HTML-Site zu bauen ;
- zeilen 15-20 : konfigurieren die Seite GitHub, die die Seite HTML beherbergen wird, die aus dem Dokument ODT / erstellt wurde DOCX (siehe Absatz 12)
- llinie 21 : Diese Zeile ist wichtig. Wenn sie fehlt, wird der Browser statt einer HTML-Seite den Ordner dieser Seite öffnen ;
- zeile 24 : MkDocs schlägt mehrere Themen für eine Website MkDocs / HTML vor. Ici wir haben das Thema "material" gewählt, Zeile 24 ;
- zeilen 27-31 : Konfiguration der Navigation auf der Seite. Diese erfolgt mit Hilfe eines Inhaltsverzeichnisses, das sich in der linken Spalte der angezeigten Seite befindet (Zeile 30) ;
- zeilen 33-54 : definieren zwei Farbpaletten: den hellen Modus (Linien 35-42) oder der dunkle Modus (Linien 45-52). Über ein Symbol in der oberen Leiste der angezeigten Seiten können Sie zwischen den beiden Seiten wechseln ;
- zeilen 57-70 : Erweiterungen der Sprache MarkDown, die von MkDocs verwendet wird. Diese Erweiterungen wurden von Gemini auf einige meiner Anfragen hin generiert;
- linie 73 : Der script [focus.js] ist ein script Javascript, das von Gemini generiert wurde. Es ist mit der Schaltfläche in der oberen Leiste der Website zum Ein- und Ausblenden des Inhaltsverzeichnisses verbunden ;
- linie 76 : der CSS, der von dieser Schaltfläche verwendet wird ;
- linien 80-95 : die Definition von pied von Seite HTML. Wurde von Gemini aus einem Textbeispiel, das ich ihm gegeben habe, generiert;
- zeilen 97-100 : Definition des Google Analytics-Markers (GA), mit dem die Besuche der Website verfolgt werden;
- linie 99 : Setze deinen Marker GA ;
- zeilen 103-112 : der Stil des Dokumententitels, der Stil, der im Dokument ODT / vorkommtDOCX vor der ersten Überschrift auf Ebene 1. Der angegebene Stil Zeile 104 ändert sich mit jedem Dokument ODT. Dagegen kann er für DOCX-Dokumente konstant sein ('Titel'). Standardmäßig loggt der Konverter die Stile aller Absätze des Dokuments ODT / DOCX der vorausgehtnt die erste Überschrift auf Ebene 1. Wir müssen also einen ersten Durchlauf machen, den Stil des Absatzes, den wir als Überschrift verwenden wollen, ausfindig machen und dann mit in der Datei [config_styles] ;;
- zeilen 105-111 : der Stil CSS, den Sie dem Titel des Dokuments geben möchten. Dieser Titel befindet sich auf der Seite "Startseite", der ersten Seite, die angezeigt wird, wenn die Website geöffnet wird ;
- zeile 115: Sie setzen dort die Sprachen, die nicht auf Groß- und Kleinschreibung achten;
- ligne 116 : Codeblöcke werden durch ihre Stile im Dokument ODT / gekennzeichnet DOCX. Es kann auch mehrere geben. Zeile 116in diesem Abschnitt werden alle Schlüsselwörter angegeben, mit denen ein Codestil erkannt werden kann. In meinen Dokumenten haben alle meine Codestile das Wort "Code" in ihrem Namen. Und kein anderer Stil hat dieses Wort in seinem Namen. Also kann ich mich damit begnügen, ein einziges Schlüsselwort zu verwenden. Wenn es mehrere gibt, werden sie durch Kommas getrennt 116 ;
- linie 117 : legt die Standardsprache fest. Im Fall eines Codeblocks "plain text" ist, wenn keine Sprache erkannt wird, die Standardsprache "text". Bei "MkDocs" bedeutet dies einen Codeblock ohne Syntaxhervorhebung. Dies ist beispielsweise der Fall bei Ausführungsergebnissen ;
- zeile 121 : Diese Einstellung wird für Codes in "plain text" verwendet, die ursprünglich nicht syntaktisch gefärbt sind. Diese Zeilen zielen auf ihre in geben eine je nach der im Codeblock verwendeten Sprache. Beachten Sie, dass Sie in diesem Teil der Konfiguration nichts eintragen müssen, wenn Ihre Codes alle angereichert sind, weil sie von einem IDE wie Eclipse, Visual Studio, ... stammen, und Sie keinen Codeblock "plain text" haben, der mit einer Sprache verknüpft ist. Sie können die den Sprachen zugeordneten Tabellen leer lassen. All dies geschieht in der Konfigurationsdatei des Codes [config_code] ;
- zeilen 118-120 : Diese Zeilen beziehen sich auf angereicherte Codeblöcke (fett, kursiv, unterstrichen, hervorgehoben, Zeichenfarbe). Diese Blöcke werden nicht der Behandlung von Codeblöcken "plain text" unterzogen. Sie werden in der HTML identisch wiedergegeben;
- linie 118 : legt die Zeilenhöhe von Codezeilen fest ;
- linie 119 : legt die Schriftart CSS des Codeblocks fest ;
- linie 120 : legt die Schriftgröße fest ;
- zeilen 144-152: legen das Aussehen der Bilder fest ;
- zeilen 154-160: legen das Aussehen des Rahmens fest, in dem die Seite web angezeigt wird;
- linie 162 : die Liste der Dateien, die in das Stammverzeichnis von HTML kopiert werden sollen;
- linie 164 : [debug] zu True erlaubt die Stilprotokolle der Absätze, die der ersten Überschrift der Ebene 1 des Dokuments ODT / DOCX vorangehen. In diesen Logs findet man den genauen Stil des Absatzes, der als Titel auf der Startseite der Website dienen soll;
Am Ende, wenn man von einem Dokument ODT / DOCX zu einem anderen wechselt, wir werden nichts an der Datei [config.py] ändern. Wir ändern nur die anderen Konfigurationsdateien.
