Sitevorlage aus Bootstrap- oder Websitedesignvorlage erstellen

Dank der offenen Architektur von Oracle Content Management können Sie Arbeit aus anderen Programmier-Frameworks wie Foundation oder Bootstrap einsetzen. Sie können eine Bootstrap-Vorlage mit nur wenigen Änderungen in ein Theme umwandeln und in eine Oracle Content Management-Vorlage einbinden.

Grundlegender Prozess

Überblick über die Schritte, die in den folgenden Abschnitten im Detail beschrieben werden:

Voraussetzungen

Stellen Sie sicher, dass die Oracle Content Management-Desktop-App zum Synchronisieren von Ordnern und Dateien im lokalen Rechner eingerichtet ist und ausgeführt wird.
Laden Sie die Ordner, Dateien und Inhalte des Bootstrap-Vorlagen-Themes auf den lokalen Rechner herunter, sodass diese für die Nutzung zur Verfügung stehen.

Site erstellen

Erstellen Sie eine Site aus einer Oracle Content Management-Startvorlage:

Klicken Sie in der seitlichen Navigation auf Sites.

Eine Liste vorhandener Sites wird angezeigt.
Klicken Sie auf Erstellen.
Wählen Sie im Dialogfeld "Site erstellen" JET-Startvorlage oder Startvorlage als Basis für die Site aus.
Geben Sie im Dialogfeld einen Namen für die Site ein. Dieser Name wird in der Site-URL verwendet. Sie können Buchstaben, Zahlen, Unterstriche (_) und Bindestriche (-) verwenden. Wenn Sie ein Leerzeichen eingeben, wird es automatisch durch einen Bindestrich ersetzt.

Verwenden Sie keinen der folgenden Namen für Vorlagen, Themes, Komponenten, Sites oder Siteseiten: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice, _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Die folgenden Namen dürfen für Siteseiten, jedoch nicht für Vorlagen, Themes, Komponenten oder Sites verwendet werden: documents, sites.
Hinweis:

Beim Pfad für eine Oracle Content Management-Site-URL muss die Groß- und Kleinschreibung beachtet werden. Die Groß-/Kleinschreibung in den Abfrage- oder Fragmentzeichenfolgen wird von Entwicklern in deren eigenem Code verwaltet.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Optional geben Sie eine Beschreibung für die Site ein.
Wenn Sie bereit sind, klicken Sie auf Erstellen.

In einer Fortschrittsleiste werden der neue Sitename und der Erstellstatus angezeigt. Nachdem die Site erstellt wurde, wird der Name in der Liste der Sites angezeigt. Der anfängliche Status ist "Offline".

Um die neu erstellte Site schnell in der Liste zu finden, sortieren Sie die Liste nach Zuletzt aktualisiert. Die Site, die Sie gerade erstellt haben, wird am Anfang der Liste angezeigt.

Theme-Ordner synchronisieren

Beim Erstellen einer Site aus einer Startvorlage wird eine Kopie des Themes der Startvorlage erstellt und mit dem Namen der Site gefolgt vom Theme-Namen benannt. Beispiel: Das Theme für My_New_Site hat den Namen My_New_SiteTheme.

Synchronisieren Sie den Theme-Ordner und die Theme-Dateien für die Site über die Desktop-App mit Ihrem lokalen Rechner. Siehe Erste Schritte mit der Synchronisierung in Mit Oracle Content Management an Dokumenten zusammenarbeiten.

Die Ordnerhierarchie und die Dateien des Vorlagen-Themes sollten jetzt auf dem lokalen Desktop angezeigt werden. Beispiel:

    theme_name
        assets
            css
                main.css
            js
                topnav.js
        designs
            default
                design.css
                design.json
                facebook.png
                googleplus.png
                linkedin.png
                twitter.png
                youtube.pgn
        layouts
            index.html
        responsepages
            404.html
        _folder.json
        _folder_icon.png
        components.json
        viewport.json

Grundlegendes Theme einrichten

Kopieren Sie diese Bootstrap-Dateien in die synchronisierten Theme-Ordner auf dem lokalen Desktop, sodass sie die vorhandenen Dateien überlagern.
- html-Dateien werden im Ordner theme_name/layouts abgelegt
- css-Dateien werden im Ordner theme_name/assets/css abgelegt
- js-Dateien werden im Ordner theme_name/assets/js abgelegt
- image-Dateien werden im Ordner theme_name/assets/images abgelegt (dieser kann in Unterordner mit Bildern für Hintergrund, Footer, Personen usw. unterteilt sein)
Ändern Sie die html-Dateien im layout-Ordner, indem Sie relative Pfade aktualisieren und erforderliche Elemente hinzufügen. Ein typisches Bootstrap-Theme umfasst viele relative Pfade zum Ordner /assets. Diese müssen Sie ändern, sodass sie auf den Theme-Ordner verweisen.

Korrigieren Sie die Pfade für die Ordner css, js und images wie folgt:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Hinweis:
Anschließend wird der Teil _scs_theme_root automatisch an die Umgebung angepasst, in der das Theme verwendet wird.
Für jedes Oracle Content Management-Layout müssen drei Voraussetzungen erfüllt werden:
1. Nehmen Sie die folgenden Tags in das <head>-Tag der html-Datei auf:
  - 
  - 
  - 
2. Nehmen Sie das Renderer-Skript am Ende der Layoutdateien innerhalb des <body>-Tags auf. Beide Pfade werden automatisch in Sitebuilder und den Laufzeitumgebungen angepasst.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Nehmen Sie die folgenden Tags nach der Datei renderer.js auf:
  - 
  -

Stellen Sie sicher, dass die geänderten Theme-Dateien mit der Site in Oracle Content Management synchronisiert werden.

Siteseiten aktualisieren

Wenn Sie die Site in Sitebuilder öffnen, werden zunächst die Seiten in der Standardsite angezeigt. Sie können die nicht erforderlichen Seiten löschen und das Layout auf den anderen Seiten in eines der neuen Layouts ändern.

Klicken Sie in der seitlichen Navigation auf Sites.

Eine Liste vorhandener Sites wird angezeigt.
Wählen Sie die Site und dann im Kontextmenü die Option Öffnen aus, oder klicken Sie in der Aktionsleiste auf .
Geben Sie einen Namen für das Update und optional eine Beschreibung ein, und klicken Sie auf Erstellen.

Der Updatename kann Buchstaben, Zahlen, Unterstriche (_) und Bindestriche (-) enthalten. Wenn Sie ein Leerzeichen eingeben, wird es automatisch durch einen Bindestrich ersetzt.

Wenn bereits Updates für die Site vorhanden sind, wählen Sie ein Update aus der Liste und klicken auf .
Sitebuilder wird im Vorschaumodus geöffnet. Um Änderungen vorzunehmen oder die Navigationsoptionen in der Randleiste zu verwenden, muss der Schalter "Bearbeiten" auf Bearbeiten gestellt sein.
Um eine bestimmte Seite zu bearbeiten, wählen Sie die Seite über den Sitebaum in der Randleiste oder mit der Navigation für die Site aus.
Um eine nicht gewünschte Seite zu entfernen, wählen Sie die Seite aus, und klicken Sie auf .
Um eine neue Seite hinzuzufügen, klicken Sie auf Seite hinzufügen. Sie können die Position der Seite per Drag-and-Drop im Sitebaum ändern.
Um das mit einer Seite verknüpfte Layout zu ändern, wählen Sie die Seite im Sitebaum aus, und klicken Sie auf , um die Seiteneinstellungen anzuzeigen.

Gehen Sie zum Feld Seitenlayout, und wählen Sie ein anderes Layout im Menü aus. Anzahl und Typ der Seitenlayouts hängt von dem Theme ab, das mit Ihrer Site verknüpft ist.
Klicken Sie auf Speichern, um die Änderungen am aktuellen Update zu speichern. Sie können weiter mit dem aktuellen Update arbeiten oder bei Bedarf neue Updates erstellen.

Navigation aktualisieren

Die Navigation in der Sitevorschau stimmt jetzt nicht mit der aktuellen Hierarchie überein, da die Navigation im Layout aus dem Bootstrap-Theme hartcodiert ist.

Aktualisieren Sie die Navigation, um den hartcodierten Code im Bootstrap-Theme durch dynamisch generierten Code von der Sitehierarchie zu ersetzen.

Bearbeiten Sie die lokalen synchronisierten Kopien der Theme-Dateien.

Entfernen Sie den hartcodierten Navigationscode aus den Layouts. Hier sehen Sie ein Beispiel für hartcodierte Navigation, die aus einem typischen Bootstrap-Theme entfernt werden muss. Das ist ein typischer Headerabschnitt mit dem Logo, den Teilen für "Navigation umschalten" für das "Hamburger"-Menü, wenn die Seite zu schmal ist, (der responsive Teil) und der hartcodierten Seitennavigation für die anderen Seiten.

<header id="header" class="header navbar-fixed-top">  
        <div class="container">       
            <h1 class="logo">
                <a href="index.html"><span class="text">Velocity</span></a>
            </h1><!--//logo-->
            <nav class="main-nav navbar-right" role="navigation">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button><!--//nav-toggle-->
                </div><!--//navbar-header-->
                <div id="navbar-collapse" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active nav-item"><a href="index.html">Home</a></li>
                        <li class="nav-item"><a href="features.html">Features</a></li>
                        <li class="nav-item"><a href="pricing.html">Pricing</a></li>
                        <li class="nav-item dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">Pages <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li><a href="download.html">Download Apps</a></li>
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="blog-single.html">Blog Single</a></li>
                                <li><a href="blog-category.html">Blog Category</a></li>
                                <li><a href="blog-archive.html">Blog Archive</a></li>
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="contact.html">Contact</a></li>                    
                            </ul>                            
                        </li><!--//dropdown-->                         
                        <li class="nav-item"><a href="login.html">Log in</a></li>
                        <li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary" href="signup.html">Sign Up Free</a></li>
                    </ul><!--//nav-->
                </div><!--//navabr-collapse-->
            </nav><!--//main-nav-->                     
        </div><!--//container-->
    </header><!--//header-->

Schreiben Sie JavaScript-Code zum Durchlaufen der Informationen der Sitestruktur, und generieren Sie den Navigationscode. Nehmen Sie anschließend den JavaScript-Code für die Layouts auf. Beispiel:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Ändern Sie die genaue Ausgabe der Datei topnav.js so, dass sie dem erwarteten Markup im speziellen CSS entspricht.

Sitelayouts aktualisieren

Jetzt ist die Site funktionsfähig, hat aber keine bearbeitbaren Bereiche (Slots) in den Layouts.

Suchen Sie ein DIV-Element in einem Layout, oder fügen Sie eines hinzu, und legen Sie es als Slot fest.

Slots sind DIV-Elemente im Layout mit dem Wert "scs-slot" im Klassenattribut. Jeder Slot muss ein eindeutiges id-Attribut aufweisen. Beispiel:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Nehmen Sie das Klassenattribut "scs-responsive" auf, damit der Slot automatisch an die Größe des Browser-Viewports angepasst wird.
Wiederholen Sie diesen Schritt gegebenenfalls, um weitere Slots im Layout oder in anderen Layouts zu erstellen.

Site veröffentlichen

Nachdem Sie alle Änderungen an einer Site vorgenommen und gespeichert haben, müssen Sie die Site veröffentlichen.

Beim Veröffentlichen der Site werden alle Änderungen im aktuellen Update mit der Basis zusammengeführt, sodass der Inhalt des Updates zur neuen Basissite wird.

Neue Vorlage erstellen

Jetzt ist die Site funktionsfähig und mit einem Theme verknüpft. Sie können sie nun als Vorlage mit anderen teilen, damit diese Sites daraus erstellen können.

Klicken Sie in der seitlichen Navigation von Oracle Content Management auf Entwickler.
Klicken Sie auf Alle Vorlagen anzeigen.
Klicken Sie auf Erstellen, und wählen Sie Aus vorhandener Site aus.
Wählen Sie die neue Site aus, die Sie mit einer Startvorlage und der Bootstrap-Vorlage erstellt haben.
Geben Sie einen Namen für die neue Vorlage ein, und klicken Sie auf Erstellen.
Um die Vorlage für die Verwendung mit anderen Oracle Content Management-Instanzen zu verpacken, wählen Sie die Vorlage aus, und klicken Sie auf die Menüoption Exportieren, um eine herunterladbare ZIP-Datei zu erstellen.