Standardordner für Jekyll und Bootstrap anlegen und anpassen

Bootstrapping Your DITA Teil 2 - Kopieren Sie die Jekyll- und Bootstrap-Ordner aus der Onlinedokumentation des DITA-OTs in den Branch gh-pages und passen Sie die Dateien an.

  1. Laden Sie die gezippte Onlinehilfe des DITA-OT von https://github.com/dita-ot/dita-ot.github.io als ZIP herunter und entpacken Sie das Archiv.
  2. Kopieren Sie folgende Ordner in Ihren Branch gh-pages:
    • _site (Jekyll)
    • _includes (Jekyll)
    • _layouts (Jekyll)
    • css (Bootstrap)
    • js (Bootstrap)
    • Datei _config.yml (Jekyll)
  3. Passen Sie die Datei _config.yml an. Zu meinem Beispielprojekt sah diese so aus:
    name: Baukasten oder Puzzle?
    baseurl: http://petersell.github.io/petersell-4/
    pygments: false
  4. Passen Sie die Dateien im Ordner _includes an. So habe ich in meine footer.html u.a. eingefügt:
    <a href="http://www.petersell.com/spielzeug-4/"
    target="_blank">Download EPUB oder PDF</a> | DITA-Quelldateien
     unter <a href="https://github.com/petersell/petersell-4"
  5. Passen Sie die Dateien im Ordner _layouts an. So habe noch in die base.html hinzugefügt:
    <meta name="DC.subject" content="PeBe Miniautos">
    <meta name="keywords" content="Spielzeug, Ministeckbausteine,
    Lego, DDR-Spielzeug, Miniauto, PeBe">
    <link rel="shortcut icon" href="{{ site.baseurl }}petersell.ico" type="image/x-icon" />
    

    Wenn Sie ein favicon erwähnen, müssen Sie auch die ico-Datei mit in das Hauptverzeichnis des gh-pages-Branches kopieren.

  6. Passen Sie die bootstrap.css-Dateien an, um Ihre Hauptfarbe via @linkColor zu erhalten. Am besten funktioniert dies hier bei Bootstrap selbst: http://getbootstrap.com/2.3.2/customize.html.

    bootstrap
    Abbildung 1. @linkColor individualisieren
  7. Passen Sie die main.css von Jarno Elorvirta an. Dort landen die individuellen Änderungen. Die main.css muss neben den bootstrap.css-Dateien ebenfalls in die base.html eingebunden werden. Da es mir nicht gefiel, dass die Bildunterschriften die selbe Schriftgröße hatten, habe ich in die main.css z.B. folgende neue Klasse hinzugefügt:
    .figcap
    {
         font-size: 80%;
         font-style: italic;
    }
Links zum Artikel
  1. Dokumentation des DITA-OT auf github pages, Jarno Elovirta, zum Link
  2. Beispielprojekt Baustein oder Puzzle?, Andreas Petersell, zum Link
  3. Bootstrap - Hauptfarbe @linkColor einstellen, zum Link