Webpage HTML Export

ToDo

  • Content Sidebar: Links funktionieren nicht
    Website HTML Export: Export Options - Use Relative File Links (off)
  • Wenn eine Seite von einer anderen Seite angesprungen wird, funktioniert der Scroll Event nicht mehr
    Scroll Event muss bei jeder Änderung der Seite neu angehangen werden (MutationObserver)
  • Bei Seitenwechsel muss das Banner immer in der richtigen Größe gesetzt werden.
  • Code muss noch vereinfacht werden: benannte Funktion für den onscroll handler
  • Scroll Event: Änderungen nur wenn nötig
  • Startseite: Index
  • Aufrufe von alter Webseite testen
  • Aufruf mit Subdomain info.hwynen.de, Weiterleitung von wynen.info (Zertifikat testen)
  • Navbar Design
  • Banner Design
  • Folder Notes Integration unvollständig
  • Letzte Änderung automatisch anzeigen (mit embed-metadata plugin, wenn verfügbar)
    https://github.com/schemen/embed-metadata

Variablen selbst finden (Profi-Tipp)

Da es hunderte Variablen gibt, ist der sicherste Weg, sie direkt in deiner Obsidian-Instanz auszulesen: 

  1. Drücke Strg + Umschalt + I (Windows) oder Cmd + Opt + I (Mac), um die Entwicklertools zu öffnen.
  2. Gehe zum Reiter Sources (Quellen).
  3. Suche unter app.css ganz oben im Dokument; dort sind fast alle Core-Variablen aufgelistet. 

Empfohlene Plugins für die Verwaltung

Anstatt alles manuell in CSS zu schreiben, nutzen die meisten User diese Plugins:

  • Style Settings Plugin: Erlaubt es, Variablen (auch von Minimal) über eine grafische Oberfläche zu ändern.
  • Minimal Theme Settings: Speziell für Minimal-spezifische Layout-Optionen wie Fokus-Modus oder Sidebar-Kontrast.

Logo einbauen

Ja, das ist möglich. Da das Plugin keinen direkten Button für ein „Header-Logo“ besitzt, nutzt man dafür am besten die Funktion „Custom head content“ oder ein CSS-Snippet. [1, 2]

Hier sind die zwei einfachsten Wege, um dein persönliches Logo einzubinden:

1. Über ein Favicon (Logo im Browser-Tab)

Dies ist die einfachste Form eines Logos, die direkt in den Plugin-Einstellungen unterstützt wird.

  • Gehe in die Plugin-Einstellungen zu „Favicon path“.
  • Gib dort den Pfad zu deiner Bilddatei an (z. B. Anhang/mein-logo.png).
  • Das Logo erscheint nun als kleines Symbol im Tab des Webbrowsers. [2, 3]

2. Logo in der Sidebar (via CSS-Snippet)

Wenn das Logo permanent in der Seitenleiste (über der Navigation) sichtbar sein soll, kannst du ein CSS-Snippet verwenden. Das Plugin übernimmt aktive Snippets automatisch in den Export. [2]

  1. Erstelle eine neue CSS-Datei in deinem Vault-Ordner .obsidian/snippets/ (z. B. custom-logo.css).
  2. Nutze folgendes Beispiel-Code, um ein Bild über der Navigation einzufügen: 
    /* Logo über der Dateinavigation einfügen */
.nav-header::before {
    content: "";
    display: block;
    width: 150px; /* Breite anpassen */
    height: 50px; /* Höhe anpassen */
    background-image: url('DEINE_BILD_URL_ODER_PFAD');
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}
  3. Aktiviere das Snippet in Obsidian unter Einstellungen > Erscheinungsbild.

3. Fortgeschritten: Eigenes HTML-Element (Custom Head)

Du kannst eine kleine HTML-Datei (z. B. header-logo.html) erstellen und diese unter „Custom head content“ verknüpfen. Darin kannst du mit JavaScript oder CSS gezielt Elemente manipulieren, um dein Logo an einer exakten Position (z. B. oben rechts) einzublenden. [4, 5]

Wichtiger Hinweis zum Export-Modus:

  • Damit Bilder und Logos zuverlässig funktionieren, ist der Modus „Online Web Server“ am besten geeignet, da er Ressourcen sauber trennt.
  • Wenn du das Logo als lokale Datei einbindest, achte darauf, dass der Pfad auch nach dem Hochladen auf deinen Webserver noch stimmt. [6]

Soll das Logo an einer bestimmten Stelle erscheinen (z. B. fest oben fixiert oder nur auf der Startseite)? Ich kann dir gerne den passenden CSS-Code dafür geben.

[1] https://www.adobe.com
[2] https://docs.obsidianweb.net
[3] https://www.w3schools.com
[4] https://forum.obsidian.md
[5] https://docs.obsidianweb.net
[6] https://forum.obsidian.md

Hintergrundfarben

Um die Hintergrundfarben der Sidebars (Dateinavigation links und Inhaltsverzeichnis rechts) zu ändern, kannst du ein einfaches CSS-Snippet verwenden. Das Plugin übernimmt diese Stile beim Export automatisch.

Hier sind die CSS-Selektoren, die du dafür benötigst:

1. CSS-Snippet erstellen

Erstelle eine Datei namens sidebar-style.css in deinem Ordner .obsidian/snippets/ und füge folgenden Code ein:

/* Hintergrund der linken Sidebar (Navigation) */
.nav-view, .workspace-leaf-content[data-type="file-explorer"] {
    background-color: #f0f2f5 !important; /* Deine Wunschfarbe */
}

/* Hintergrund der rechten Sidebar (Outline/Graph) */
.outline-view, .workspace-leaf-content[data-type="outline"] {
    background-color: #f0f2f5 !important;
}

/* Optional: Hintergrund des gesamten Sidebar-Containers */
.mod-left-split, .mod-right-split {
    background-color: #f0f2f5 !important;
}

2. Farben anpassen

  • Ersetze #f0f2f5 durch deinen gewünschten Hex-Code oder eine Farbe wie sidebar-grey.
  • Wenn du für den Dark Mode und Light Mode unterschiedliche Farben möchtest, kannst du das so definieren: 
    .theme-light { --sidebar-bg: #ffffff; }
.theme-dark { --sidebar-bg: #1e1e1e; }

.nav-view, .outline-view {
    background-color: var(--sidebar-bg) !important;
}

3. In Obsidian aktivieren

  1. Öffne die Einstellungen > Erscheinungsbild.
  2. Scrolle nach unten zu CSS-Snippets.
  3. Klicke auf das "Neu laden"-Symbol und aktiviere den Schalter bei sidebar-style.

Ein wichtiger Hinweis zum Export

Damit diese Änderungen auf der Webseite sichtbar werden, stelle im Export-Dialog sicher, dass die Option "Include Custom CSS" (oder ähnliche Bezeichnungen je nach Version) nicht deaktiviert ist. Da das Plugin dein aktuelles Obsidian-Design spiegelt, sollte die Änderung sofort nach dem neuen Export greifen.

Möchtest du zusätzlich auch die Schriftfarbe oder die Trennlinien in den Sidebars anpassen, damit sie besser zum neuen Hintergrund passen?

Logo über die gesamte Breite und feste Position

Ja, das lässt sich über ein CSS-Snippet oder den „Custom Head Content“ umsetzen. Da das Plugin alle aktiven Snippets in den Export übernimmt, kannst du ein Logo mit position: fixed so definieren, dass es beim Scrollen an seiner Stelle bleibt. [1, 2, 3, 4, 5]

Hier sind die zwei Varianten für die Platzierung:

Variante 1: Logo über die gesamte Breite (fest oben)

Dieses Logo bleibt am oberen Bildschirmrand fixiert, während der Rest der Seite (Inhalt und Sidebars) darunter durchscrollt.

/* Logo oben fixiert über die gesamte Breite */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Höhe deines Logos/Headers */
    background-color: var(--background-primary); /* Hintergrundfarbe */
    background-image: url('DEINE_BILD_URL');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100; /* Stellt sicher, dass es über allem liegt */
    border-bottom: 1px solid var(--divider-color);
}

/* Den restlichen Inhalt nach unten schieben, damit er nicht verdeckt wird */
.workspace {
    margin-top: 60px;
}

Variante 2: Logo nur über dem Inhaltsbereich (zwischen den Sidebars)

Wenn das Logo nur im mittleren Bereich (dem eigentlichen Text) fixiert sein soll, musst du es an den Content-Container binden.

/* Logo fixiert nur im Hauptinhalts-Bereich */
.markdown-rendered {
    padding-top: 80px; /* Platz für das Logo schaffen */
}

.markdown-rendered::before {
    content: "";
    position: fixed;
    top: 20px;
    /* Zentrierung im Inhaltsbereich */
    left: 50%;
    transform: translateX(-50%); 
    width: 120px;
    height: 60px;
    background-image: url('DEINE_BILD_URL');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 50;
    pointer-events: none; /* Klicks gehen durch das Logo hindurch zum Text */
}

So gehst du vor:

  1. Bildquelle wählen: Nutze am besten eine URL (z. B. von einem Cloud-Speicher) oder einen relativen Pfad, wenn du weißt, wo das Bild auf deinem Webserver liegen wird.
  2. Snippet erstellen: Speichere den Code als .css-Datei im Ordner .obsidian/snippets/ deines Vaults.
  3. Aktivieren: Schalte das Snippet in den Obsidian-Einstellungen unter Erscheinungsbild ein.
  4. Export: Führe den Export mit dem Plugin erneut durch. Das CSS wird automatisch in die HTML-Dateien eingebettet. [2, 5, 6, 7, 8]

Wichtiger Tipp: Falls das Logo beim Export nicht erscheint, stelle sicher, dass du eine absolute Web-URL (z. B. https://deineseite.de) verwendest. Lokale Pfade aus Obsidian funktionieren nach dem Hochladen auf einen Webserver oft nicht mehr, wenn die Ordnerstruktur dort anders ist. [6, 9]

Soll das Logo bei kleineren Bildschirmen (z. B. am Handy) ausgeblendet werden oder sich in der Größe anpassen?

Möchtest du, dass das Logo:

  • Auf Mobilgeräten kleiner angezeigt wird?
  • Nur auf der Startseite erscheint?
  • Eine Verlinkung (z.B. zurück zur Homepage) erhält? (Dafür bräuchten wir die "Custom Head Content" Methode). [4]

[1] https://stackoverflow.com
[2] https://docs.obsidianweb.net
[3] https://docs.obsidianweb.net
[4] https://github.com
[5] https://github.com
[6] https://forum.obsidian.md
[7] https://help.obsidian.md
[8] https://help.obsidian.md
[9] https://github.com

Eigene Erkenntnisse:

  • In Obsidian 1.9.2 sind die IDs für die Sidebar (und auch für den zentralen Bereich) anders
  • Das in den Einstellungen vom Plugin (Custom Html/JS) angegebene Snippet wird in jeder erzeugten HTML Seite eingebunden durch
    <div class="parsed-feature-container" style="display: contents;"><link itemprop="include" href="site-lib/html/custom-head-content-content.html"></div>
    Ein dort angegebenes Script wird auch gestartet aber wenn wie unten eine Funktion an den Document Load Evenet angebunden werden soll, so bekommt sie diesen Event nicht mit. D.h. das Script kann schon direkt ausgeführt werden.
  • Cache in Firefox löschen mit shift-ctrl-del
  • Folgendes Snippet stammt im wesentlichen von Googles KI
    <div id="custom-sidebar-logo">
    <img src="_files/hw-logo.gif" alt="Logo">
    </div>
    <style>
    /* Styling für das Logo, sobald es in der Sidebar landet */
    #custom-sidebar-logo {
    order: -1;
    padding: 0;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--divider-color);
    background-color: #0080FF;
    height: 80px important;
    }
    #custom-sidebar-logo img {
    max-width: 100%;
    height: 80px;
    }
    /* Sicherstellen, dass die Sidebar Flex nutzt */
    #left-sidebar {
    display: flex !important;
    flex-direction: column !important;
    }
    </style>

<script>
//document.addEventListener("DOMContentLoaded", function() {
const logo = document.getElementById('custom-sidebar-logo');
const sidebar = document.getElementById('left-sidebar').getElementsByClassName('sidebar-topbar');
// oder = document.getElementById('navbar')
if (logo && sidebar) {
// Verschiebt das Logo-Element an den Anfang der Sidebar
sidebar[0].prepend(logo); // array bei getElementsByClass sonst node
} else
console.log("Verschieben geht nicht");
//});
</script>

  • folgender Code hat (noch) nicht funktioniert:
    /* Logo über der Dateinavigation einfügen */
    #left-sidebar::before {
    content: "mein logo";
    display: block;
    width: 150px; /* Breite anpassen */
    height: 100px; /* Höhe anpassen */
    background-image: url("_files/hw-logo.gif");
    background-size: contain;
    background-repeat: no-repeat;
    background-color: var(--my-nav-color-hover);
    margin-bottom: 10px;
    }

Änderung des Banners beim Scrollen

Ich erzeuge mit Obsidian und dem Plugin Webpage HTML Export meine Website. Dabei habe ich ein Banner über die gesamte Breite der Seite in dem div mit der ID navbar erzeugt. Das Banner scrollt dadurch nicht mit. Ich möchte aber das es durch ein Banner mit geringerer Höhe ersetzt wird, wenn die mittlere Bereich mit einen gewissen Betrag nach oben gescrollt wird.

Um diesen Effekt zu erzielen, benötigst du ein kleines JavaScript, das die Scroll-Position überwacht und bei einem Schwellenwert eine CSS-Klasse umschaltet.
Da der Webpage HTML Export oft eigene Strukturen nutzt, ist dies der sauberste Weg:

1. Das JavaScript (Logik)

Füge dies in deine Obsidian-Notiz (via HTML-Block) oder in die Export-Einstellungen ein. Es fügt der Navbar die Klasse shrunk hinzu, sobald 50 Pixel gescrollt wurden:

<script>
window.onscroll = function() {
  const nav = document.getElementById('navbar');
  if (window.scrollY > 50) {
    nav.classList.add('shrunk');
  } else {
    nav.classList.remove('shrunk');
  }
};
</script>

2. Das CSS (Styling)

Ergänze dein CSS (z. B. in einem Snippet), um das Aussehen beim Scrollen zu verändern. Nutze transition, damit der Übergang flüssig wirkt:

#navbar {
  height: 200px; /* Deine Start-Höhe */
  transition: all 0.3s ease-in-out;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

/* Zustand wenn gescrollt wurde */
#navbar.shrunk {
  height: 60px; /* Die geringere Höhe */
  background-color: rgba(255, 255, 255, 0.9); /* Optional: Transparenz */
}

Wichtige Tipps:

  • Padding-Top: Da dein Banner fixed ist, muss der Inhaltsbereich (.obsidian-app oder .markdown-preview-view) ein padding-top haben, das der ursprünglichen Bannerhöhe entspricht, damit kein Text verdeckt wird.
  • Inhalt anpassen: Wenn im Banner Text oder Bilder sind, kannst du diese ebenfalls über #navbar.shrunk .dein-element verkleinern oder ausblenden.

Soll das Banner beim Verkleinern auch die Hintergrundfarbe ändern oder nur die Höhe reduzieren?

Das window scrollt aber nicht, sondern nur der innere Bereich

In diesem Fall musst du den Event-Listener direkt an den scrollbaren Container binden, anstatt an das globale window-Objekt. Da center-content der Bereich ist, der sich bewegt, überwachen wir dessen scrollTop-Wert. [1, 2]

1. Das angepasste JavaScript

Ersetze das vorherige Skript durch dieses. Es wartet, bis das Dokument geladen ist, sucht den Container mit der ID center-content und reagiert auf dessen Scroll-Bewegungen. [1, 3]

<script>
document.addEventListener("DOMContentLoaded", function() {
  const scrollContainer = document.getElementById('center-content');
  const nav = document.getElementById('navbar');

  if (scrollContainer && nav) {
    scrollContainer.onscroll = function() {
      // Schwellenwert: 50 Pixel
      if (scrollContainer.scrollTop > 50) {
        nav.classList.add('shrunk');
      } else {
        nav.classList.remove('shrunk');
      }
    };
  }
});
</script>

2. CSS-Anpassung

Damit der Übergang geschmeidig aussieht, sollte die Navbar eine feste Position behalten und eine transition besitzen. [4, 5]

#navbar {
  height: 150px; /* Deine ursprüngliche Bannerhöhe */
  transition: height 0.3s ease;
  position: sticky; /* Oder fixed, je nach Layout-Struktur */
  top: 0;
  width: 100%;
  z-index: 100;
  overflow: hidden;
}

#navbar.shrunk {
  height: 60px; /* Die neue, geringere Höhe */
}

Was du beachten solltest:

  • ID-Check: Stelle sicher, dass die ID im exportierten HTML exakt center-content geschrieben wird (manchmal nutzen Plugins Bindestriche oder Unterstriche wie center_content).
  • CSS Spezifität: Falls die Höhe nicht überschrieben wird, füge !important hinzu (z. B. height: 60px !important;), da Obsidian-Themes oft sehr spezifische CSS-Regeln haben. [6]

Soll der Inhalt innerhalb des Banners (wie ein Logo oder Text) beim Verkleinern ebenfalls seine Größe ändern oder ausgeblendet werden? [7, 8]

Weiterführende Links:

[1] https://www.geeksforgeeks.org
[2] https://developer.mozilla.org
[3] https://www.youtube.com
[4] https://www.youtube.com
[5] https://www.youtube.com
[6] https://www.obsidianstats.com
[7] https://www.youtube.com
[8] https://stackoverflow.com