Oprette en siteskabelon ud fra en Bootstrap-skabelon eller webdesignskabelon

Den åbne arkitektur i Oracle Content Management betyder, at du kan bruge arbejde, der er udført i andre kodningsstrukturer, for eksempel Foundation eller Bootstrap. Med nogle få ændringer kan du omdanne en Bootstrap-skabelon til et tema og gøre den til en del af en Oracle Content Management-skabelon.

Basisproces

Her er en oversigt over trinnene, som beskrives i detaljer i de efterfølgende afsnit:

Forudsætninger

Oracle Content Management-desktop-appen til synkronisering af mapper og filer til din lokale computer skal være konfigureret og køre.
Bootstrap-skabelonens temamapper, -filer og -indhold skal være downloadet til din lokale computer og klar til brug.

Oprette et site

Opret et site fra en Oracle Content Management-startskabelon:

Klik på Sites i sidenavigationen.

Der vises en liste over eksisterende sites.
Klik på Opret.
Vælg JET-startskabelon eller Startskabelon i dialogboksen Opret site. Den skal bruges som basis for dit site.
Skriv et navn til sitet i dialogboksen. Dette navn bruges i site-URL'en. Du kan bruge bogstaver, tal, understregningstegn (_) og bindestreger (-). Hvis du indsætter et mellemrum, erstattes det automatisk af en bindestreg.

Brug ikke følgende navne til skabeloner, temaer, komponenter, sites eller sitesider: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Du kan ganske vist bruge følgende navne til sitesider, men ikke til skabeloner, temaer, komponenter eller sites: documents, sites.
Bemærk:

Der skelnes mellem små og store bogstaver i stien til en URL til Oracle Content Management-sitet. Store/små bogstaver i forespørgsels- eller fragmentstrenge håndteres af udviklere i deres tilpassede kode.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Indtast eventuelt en beskrivelse af sitet.
Klik på Opret, når du er klar.

En statuslinje viser navnet på det nye site og status for oprettelsen. Når sitet er oprettet, vises navnet på listen med sites. Det har som udgangspunkt offlinestatus.

Du kan hurtigt finde det site, som du lige har oprettet, på listen ved at sortere listen efter Sidst opdateret. Det site, som du netop har oprettet, vises øverst på listen.

Synkronisere temamappen

Når du opretter et site fra en startskabelon, oprettes der en kopi af startskabelonen, og den navngives med sitenavnet efterfulgt af temanavnet. Temaet for My_New_Site er for eksempel My_New_SiteTheme.

Brug desktop-appen til synkronisering af temamappen og -filerne til sitet til din lokale computer. Se Kom i gang med synkronisering i Samarbejde om dokumenter med Oracle Content Management.

Du skulle nu kunne se skabelontemaets mappehierarki og filer på din lokale computer. Her er et eksempel:

    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

Konfigurere basistemaet

Kopier disse Bootstrap-filer til de synkroniserede temamapper på din lokale computer, så de overskriver de eksisterende filer.
- html-filer placeres i mappen theme_name/layouts
- css-filer placeres i mappen theme_name/layouts
- js-filer placeres i mappen theme_name/layouts
- image-filer placeres i mappen theme_name/layouts, som kan være opdelt i undermapper med billeder til baggrund, sidefod, personer og så videre.
Modificer html-filerne i mappen layout for at opdatere relative stier og tilføje påkrævede elementer. Der er mange relative stier til mappen /assets for et typisk Bootstrap-tema, og du skal derfor modificere dem, så de peger på temamappen.

Ret stierne for de css-, js- og images-mapper, der skal bruges:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Bemærk:
Når dette trin er fuldført, reguleres delen _scs_theme_root automatisk i henhold til det miljø, som temaet bruges i.
Der er tre krav til hvert Oracle Content Management-layout:
1. Inkluder følgende tags i <head>-tagget i html-filen:
  - 
  - 
  - 
2. Inkluder gengiverscriptet i slutningen af layoutfilerne, lige inden for <body>-tagget. Begge disse stier reguleres automatisk i Site Builder og runtime-miljøerne.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Inkluder følgende tags efter inkluderingen af filen renderer.js:
  - 
  -

Verificer, at de modificerede temafiler er synkroniseret med sitet i Oracle Content Management.

Opdatere sitesiderne

Når du åbner sitet i Site Builder, ser du først de sider, der findes på standardsitet. Du kan slette de sider, som du ikke ønsker, og ændre layoutet på de sider, som du vil beholde, til et af de nye layouts.

Klik på Sites i sidenavigationen.

Der vises en liste over eksisterende sites.
Vælg sitet, og vælg Åbn i genvejsmenuen, eller klik på på handlingslinjen.
Indtast et navn til opdateringen samt en valgfri beskrivelse, og klik derefter på Opret.

Du kan bruge bogstaver, tal, understregningstegn (_) og bindestreger (-) i navnet på opdateringen. Hvis du indsætter et mellemrum, erstattes det automatisk af en bindestreg.

Hvis du allerede har opdateringer af sitet, skal du vælge en opdatering på listen og klikke på .
Site Builder åbnes i eksempeltilstand. Hvis du vil ændre eller bruge navigeringsvalgene i sidepanelet, skal du sørge for, at knappen Rediger er sat på Rediger.
Du kan redigere en bestemt side ved at vælge siden i sitetræet eller ved at bruge sitets egen navigation.
Du fjerner en side, som du ikke ønsker, ved at vælge siden og klikke på .
Du tilføjer en ny side ved at klikke på Tilføj side. Du kan ændre sidens placering i sitetræet ved at trække og slippe den.
Hvis du vil ændre det layout, der er knyttet til en side, skal du vælge siden i sitetræet og klikke på for at vise sideindstillingerne.

Gå til feltet Sidelayout, og vælg et andet layout i menuen. Antallet af sidelayouts og deres type afhænger af, hvilket tema der er knyttet til sitet.
Klik på Gem for at gemme dine ændringer i den aktuelle opdatering. Du kan fortsætte med at arbejde i den aktuelle opdatering eller om nødvendigt oprette nye opdateringer.

Opdatere navigationen

Når du kigger på navigationen i eksempelvisningen af sitet, matcher den ikke det aktuelle hierarki på grund af den hardcodede navigation i layoutet fra Bootstrap-temaet.

Opdater navigationen for at erstatte den hardcodede kode i Bootstrap-temaet med dynamisk genereret kode fra sitehierarkiet.

Rediger dine lokale synkroniserede kopier af temafilerne.

Fjern den hardcodede navigationskode fra layoutene. Her er et eksempel på den hardcodede navigation, der ville skulle fjernes fra et typisk Bootstrap-tema. Dette er en typisk overskriftssektion med logoet, ‘Toggle Navigation’-delene for ‘Hamburger’-menuen, når siden er for smal (den dynamiske del), og den hardcodede sidenavigation for de andre sider.

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

Skriv JavaScript-kode for at gennemgå oplysningerne om sitestrukturen og generere navigationskoden, og inkluder derefter JavaScript-koden i layoutene, for eksempel:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Modificer det nøjagtige output fra filen topnav.js for at matche den markup, der forventes i din CSS.

Opdatere sitelayouts

Sitet fungerer på nuværende tidspunkt, men har ingen områder (pladser), der kan redigeres, i layoutene.

Find eller tilføj et DIV-tag i et layout, og angiv det som en plads.

Pladser er DIV-tags i layoutet, som har værdien "scs-slot" i klasseattributten. Hver plads skal have en entydig id-attribut. Eksempel:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Inkluder klasseattributten "scs-responsive", hvis pladsen automatisk skal reguleres i forhold til browser-view-portens størrelse.
Gentag dette trin efter behov for at oprette yderligere pladser i layoutet eller i andre layouts.

Publicere sitet

Når du har fuldført og gemt alle dine ændringer af et site, skal du publicere sitet.

Ved publicering af sitet flettes alle ændringerne i den aktuelle opdatering med basissitet, hvilket gør opdateringens indhold til det nye basissite.

Oprette den nye skabelon

Du har nu et fungerende site med et tilknyttet tema, og du kan gøre dette til en skabelon, som du kan dele med andre, der efterfølgende kan oprette sites, der er baseret på den.

Klik på Udvikler i sidenavigationen i Oracle Content Management.
Klik på Vis alle skabeloner.
Klik på Opret, og vælg Opret fra eksisterende site.
Vælg det nye site, som du oprettede ved hjælp af en startskabelon og Bootstrap-skabelonen.
Indtast et navn til den nye skabelon, og klik på Opret.
Du pakker skabelonen til brug sammen med andre Oracle Content Management-instanser ved at vælge skabelonen og vælge menupunktet Eksporter for at oprette en .zip-fil, der kan downloades.