Een sitesjabloon maken op basis van Bootstrap of een websiteontwerpsjabloon

De open architectuur van Oracle Content Management houdt in dat u werk kunt gebruiken dat in andere coderingsframeworks, zoals Foundation of Bootstrap, is uitgevoerd. Met enkele wijzigingen kunt u een Bootstrap-sjabloon omzetten in een thema en dit deel laten uitmaken van een Oracle Content Management sjabloon.

Basisproces

Hier volgt een overzicht van de stappen die in detail worden beschreven in de secties die hierop volgen:

Vereisten

Stel de Oracle Content Management desktop-app in en voer deze uit voor de synchronisatie van mappen en bestanden met uw lokale computer.
Download de mappen, bestanden en inhoud van het Bootstrap-sjabloonthema naar uw lokale computer en zorg dat ze gereed zijn voor gebruik.

Een site maken

Een site maken op basis van een Oracle Content Management startersjabloon:

Klik in de zijnavigatie op Sites.

Er wordt een lijst met bestaande sites weergegeven.
Klik op Maken.
Selecteer in het dialoogvenster 'Site maken' de optie JET-startersjabloon of Startersjabloon om deze als de basis voor uw site te gebruiken.
Voer in het dialoogvenster een naam voor de site in. Deze naam wordt gebruikt in de site-URL. U kunt kleine letters, cijfers, onderstrepingstekens (_) en streepjes (-) gebruiken. Als u een spatie invoert, wordt deze automatisch vervangen door een streepje.

Gebruik niet de volgende namen voor sjablonen, thema's, componenten, sites of sitepagina's: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. De volgende namen kunt u wel gebruiken voor sitepagina's, maar niet voor sjablonen, thema's, componenten of sites: documents, sites.
Opmerking:

Het pad voor een Oracle Content Management site-URL is hoofdlettergevoelig. Hoofdlettergebruik in de zoekvraag of fragmentstrings wordt beheerd door ontwikkelaars in hun aangepaste code.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Voer desgewenst een beschrijving voor de site in.
Wanneer u klaar bent, klikt u op Maken.

In een voortgangsbalk ziet u de naam en aanmaakstatus van de nieuwe site. Wanneer de site is gemaakt, wordt de naam ervan weergegeven in de lijst met sites. De initiële status van de site is 'Offline'.

Als u de zojuist gemaakte site snel wilt vinden in de lijst, sorteert u de lijst op Laatst bijgewerkt. De site die u zojuist hebt gemaakt, wordt boven aan de lijst weergegeven.

De themamap synchroniseren

Wanneer u een site maakt op basis van een startersjabloon, wordt er een kopie van het startersjabloonthema gemaakt en krijgt deze de naam van de site, gevolgd door de naam van het thema. Het thema voor My_New_Site is bijvoorbeeld My_New_SiteTheme.

Gebruik de desktop-app om de themamap en -bestanden voor de site te synchroniseren met uw lokale computer. Zie voor meer informatie: Inleiding tot synchronisatie in Samenwerken aan documenten met Oracle Content Management.

U zou nu de maphiërarchie en de bestanden van het sjabloonthema moeten kunnen zien op uw lokale desktop. Hier volgt een voorbeeld:

    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

Het basisthema instellen

Kopieer deze Bootstrap-bestanden in de gesynchroniseerde themamappen op uw lokale desktop om de bestaande bestanden te overschrijven.
- html-bestanden worden opgeslagen in de map themanaam/layouts.
- css-bestanden worden opgeslagen in de map themanaam/assets/css.
- js-bestanden worden opgeslagen in de map themanaam/assets/js.
- image-bestanden worden opgeslagen in de map themanaam/assets/images, die mogelijk is gegroepeerd in submappen met afbeeldingen voor achtergrond, voettekst, personen, enzovoort.
Wijzig de html-bestanden in de map layout om relatieve paden bij te werken en vereiste elementen toe te voegen. Voor een typisch Bootstrap-thema zijn er veel relatieve paden naar de map /assets, dus moet u deze wijzigen zodat ze naar dezelfde themamap wijzen.

Corrigeer de paden voor de mappen css, js en images zodat ze het volgende gebruiken:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Opmerking:
Zodra deze stap is voltooid, wordt het deel _scs_theme_root automatisch aangepast aan de omgeving waarin het thema wordt gebruikt.
Er zijn drie vereisten voor elke Oracle Content Management lay-out:
1. Neem de volgende tags op in de tag <head> van het html-bestand:
  - 
  - 
  - 
2. Neem het rendererscript aan het einde van de lay-outbestanden op, net binnen de tag <body>. Deze beide paden worden automatisch aangepast in de sitebuilder en in de runtime-omgevingen.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Neem de volgende tags op nadat u het bestand renderer.js hebt opgenomen:
  - 
  -

Controleer of de gewijzigde themabestanden zijn gesynchroniseerd met de site in Oracle Content Management.

De sitepagina's bijwerken

Wanneer u de site opent in de sitebuilder, ziet u in eerste instantie de pagina's die zich op de standaardsite bevinden. U kunt de pagina's verwijderen die u niet wilt en de lay-out van de pagina's die u wilt behouden wijzigen in een van de nieuwe lay-outs.

Klik in de zijnavigatie op Sites.

Er wordt een lijst met bestaande sites weergegeven.
Selecteer de site en kies Openen in het snelmenu of klik op in de actiebalk.
Voer een naam in voor de update en desgewenst een beschrijving en klik vervolgens op Maken.

Voor de naam van de update kunt u letters, cijfers, onderstrepingstekens (_) en streepjes (-) gebruiken. Als u een spatie invoert, wordt deze automatisch vervangen door een streepje.

Als u al updates voor de site hebt, selecteert u een update in de lijst en klikt u op .
De sitebuilder wordt geopend in de voorbeeldmodus. Als u wijzigingen aanbrengt of de navigatieopties in de zijbalk gebruikt, moet u zorgen dat de schakelaar 'Bewerken' op Bewerken staat.
Als u een bepaalde pagina wilt bewerken, kiest u de pagina met behulp van de sitestructuur in de zijbalk of de navigatie van de site.
Als u een pagina wilt verwijderen die u niet wilt behouden, selecteert u de pagina en klikt u op .
Klik op Pagina toevoegen om een nieuwe pagina toe te voegen. U kunt de pagina opnieuw positioneren in de sitestructuur door de pagina te slepen en neer te zetten.
Als u de lay-out wilt wijzigen die aan een pagina is gekoppeld, kiest u de pagina in de sitestructuur en klikt u op om de pagina-instellingen weer te geven.

Ga naar het veld Paginalay-out en selecteer een andere lay-out in het menu. Het aantal paginalay-outs en de typen lay-outs zijn afhankelijk van het thema dat aan de site is gekoppeld.
Klik op Opslaan om uw wijzigingen op te slaan in de huidige update. U kunt doorgaan met werken in de huidige update of u kunt zo nodig nieuwe updates maken.

Navigatie bijwerken

Wanneer u naar de navigatie in het sitevoorbeeld kijkt, komt deze niet overeen met de huidige hiërarchie vanwege de vaste navigatie in de lay-out van het Bootstrap-thema.

Werk de navigatie bij om de vaste code in het Bootstrap-thema te vervangen door dynamisch gegenereerde code van de sitehiërarchie.

Bewerk de lokaal gesynchroniseerde kopieën van de themabestanden.

Verwijder de vaste navigatiecode uit de lay-outs. Hier volgt een voorbeeld van de vaste navigatiecode die moet worden verwijderd uit een typisch Bootstrap-thema. Dit is een typisch koptekstgedeelte, met het logo, de delen 'Toggle Navigation' (Navigatie in-/uitschakelen) voor het menu 'Hamburger' wanneer de pagina te smal is (het responsieve deel) en de vaste paginanavigatie voor de andere pagina's.

<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-->

Schrijf JavaScript-code om de gegevens van de sitestructuur te doorlopen en de navigatiecode te genereren en neem de JavaScript-code op in de lay-outs, bijvoorbeeld:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Wijzig de exacte uitvoer van het bestand topnav.js zodat deze overeenkomt met de markup die wordt verwacht in uw specifieke CSS.

Sitelay-outs bijwerken

Op dit punt is de site bruikbaar, maar bevat deze geen bewerkbare gebieden (slots) in de lay-outs.

Zoek een DIV-element of voeg dit toe in een lay-out en wijs dit aan als een slot.

Slots zijn DIV-elementen in de lay-out die de waarde "scs-slot" hebben in het klassenattribuut. Elke slot moet een uniek id-attribuut hebben. Bijvoorbeeld:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Als u ervoor wilt zorgen dat de slot automatisch wordt aangepast aan de grootte van de browserviewport neemt u het klassenattribuut "scs-responsive" op.
Herhaal deze stap zo nodig om aanvullende slots in de lay-out te maken of in andere lay-outs.

De site publiceren

Nadat u alle wijzigingen hebt aangebracht en opgeslagen op een site, moet u de site Publiceren.

Door het publiceren van de site worden alle wijzigingen in de huidige update in de basis samengevoegd, waardoor alles wat in de update zat op de nieuwe basissite terechtkomt.

De nieuwe sjabloon maken

U hebt nu een bruikbare site met een gekoppeld thema, zodat u hier een sjabloon van kunt maken die u met anderen kunt delen en zij op basis hiervan sites kunnen maken.

Klik in de zijnavigatie van Oracle Content Management op Ontwikkelaar.
Klik op Alle sjablonen bekijken.
Klik op Maken en kies Op basis van bestaande site.
Selecteer de nieuwe site die u hebt gemaakt met behulp van een startersjabloon en de Bootstrap-sjabloon.
Voer een naam in voor de nieuwe sjabloon en klik op Maken.
Als u een package van de sjabloon wilt maken voor gebruik met andere Oracle Content Management instances, selecteert u de sjabloon en kiest u de menuoptie Exporteren om een .zip-bestand te maken dat kan worden gedownload.