Opprette en områdemal fra Bootstrap eller en mal for utforming av Web-områder

Den åpne arkitekturen i Oracle Content Management gjør at du kan bruke arbeid utført i andre rammeverk for koding, for eksempel Foundation eller Bootstrap. Ved å utføre noen endringer kan du gjøre en Bootstrap-mal om til et tema og la det bli en del av en Oracle Content Management-mal.

Grunnleggende prosess

Her er en oversikt over trinnene som beskrives detaljert i de etterfølgende delene:

Forutsetninger

Aktiver skrivebordsappen for Oracle Content Management for synkronisering av mapper og filer på den lokale datamaskinen din.
Last ned mapper, filer og innhold for temaer for Bootstrap-maler på den lokale datamaskinen, og sørg for at de er klare til bruk.

Opprett et område

Opprett et område fra en oppstartsmal fra Oracle Content Management:

Klikk på Områder i sidenavigeringen.

Det vises en liste over eksisterende områder.
Klikk på Opprett.
I dialogboksen Opprett område velger du JET-oppstartsmal eller Oppstartsmal til bruk som grunnlag for området.
Skriv inn et navn for området i dialogboksen. Dette navnet brukes i URL-adressen til området. Du kan bruke bokstaver, tall, understreker (_) og bindestreker (-). Hvis du skriver inn et mellomrom, erstattes det automatisk med en bindestrek.

Ikke bruk følgende navn for maler, temaer, komponenter, områder eller områdesider: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Selv om du kan bruke de følgende navnene for områdesider, kan du ikke bruke dem for maler, temaer, komponenter eller områder: documents, sites.
Merknad:

Det skilles mellom store og små bokstaver i baner for URL-adresser for områder i Oracle Content Management. Skillet mellom store og små bokstaver i spørrings- eller fragmentstrenger administreres av utviklere i den tilpassede koden.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Du kan også velge å angi en beskrivelse av området.
Klikk på Opprett når du er ferdig.

Et fremdriftsfelt viser navnet på det nye området og opprettelsesstatusen. Når området er opprettet, vises navnet i listen over områder. Første status er Frakoblet.

Du kan raskt finne det nylig opprettede området i listen ved å sortere listen etter Sist oppdatert. Området du nettopp opprettet, vises øverst i listen.

Synkroniser temamappen

Når du oppretter et område fra en oppstartsmal, blir en kopi av temaet for oppstartsmalen opprettet og navngitt med områdenavnet etterfulgt av temanavnet. Temaet for Mitt_nye_område blir for eksempel Mitt_nye_områdetema.

Bruk skrivebordsappen til å synkronisere temamapper og -filer for området på den lokale datamaskinen. Se Komme i gang med synkronisering i Samarbeide om dokumenter med Oracle Content Management.

Du skal nå kunne se mappehierarkiet og filene for maltemaet på det lokale skrivebordet. 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

Definer det grunnleggende temaet

Kopier disse Bootstrap-filene til de synkroniserte temamappene på det lokale skrivebordet, slik at de legges over de eksisterende filene.
- html-filer går til mappen theme_name/layouts
- css-filer går til mappen theme_name/assets/css
- js-filer går til mappen theme_name/assets/js
- image-filer går til mappen theme_name/assets/images, som kan grupperes i undermapper med bilder for bakgrunn, bunntekst, personer og så videre
Endre html-filene i mappen layout for å oppdatere relative baner og legge til nødvendige elementer. For et vanlig Bootstrap-tema vil det være mange relative baner til mappen /assets, og du må derfor endre dem slik at de henviser til temamappen.

Endre banene for mappene css, js og images du skal bruke:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Merknad:
Når dette trinnet er fullført, justeres delen _scs_theme_root automatisk til miljøet temaet brukes i.
Det finnes tre krav for hvert Oracle Content Management-oppsett:
1. Inkluder følgende koder i koden <head> i filen html:
  - 
  - 
  - 
2. Inkluder skriptet for gjengivelse i koden <body> i enden av oppsettfilene. Begge disse banene justeres automatisk i områdebyggeren og i kjøretidsmiljøene.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Inkluder følgende koder etter inkluderingen av filen renderer.js:
  - 
  -

Kontroller at de endrede temafilene er synkronisert med området i Oracle Content Management.

Oppdater områdesidene

Når du åpner området i områdebyggeren, ser du først sidene som er i standardområdet. Du kan slette sidene du ikke vil ha, og bytte oppsettet på sidene du vil beholde, til ett av de nye oppsettene.

Klikk på Områder i sidenavigeringen.

Det vises en liste over eksisterende områder.
Merk området, og velg Åpne på høyreklikkmenyen eller klikk på i handlingsfeltet.
Angi et navn for oppdateringen og eventuelt en beskrivelse, og klikk deretter på Opprett.

Du kan bruke bokstaver, tall, understrekingstegn (_) og bindestreker (-) i oppdateringsnavnet. Hvis du skriver inn et mellomrom, erstattes det automatisk med en bindestrek.

Hvis du allerede har oppdateringer til området, velger du en oppdatering fra listen og klikker på .
Områdebyggeren åpnes i forhåndsvisningsmodus. Hvis du vil gjøre endringer eller bruke navigeringsvalgene på sidelinjen, må du kontrollere at redigeringsbryteren er satt til Rediger.
Hvis du vil redigere en bestemt side, velger du siden ved hjelp av områdetreet på sidelinjen eller områdets egen navigering.
Hvis du vil fjerne en side du ikke vil ha, velger du siden og trykker på .
Når du skal legge til en ny side, klikker du på Legg til side. Du kan omplassere siden i områdetreet ved å dra og slippe den.
Hvis du vil endre oppsettet tilknyttet en side, velger du siden i områdetreet og klikker på for å vise sideinnstillingene.

Gå til feltet Sideoppsett, og velg et annet oppsett på menyen. Antallet og typen sideoppsett avhenger av hvilket tema som er knyttet til området.
Lagre hvis du vil lagre endringene i den gjeldende oppdateringen. Du kan fortsette å jobbe med den gjeldende oppdateringen eller opprette nye oppdateringer etter behov.

Oppdater navigasjon

Når du viser navigeringen i forhåndsvisningen av området, samsvarer den ikke med det gjeldende hierarkiet på grunn av den hardkodede navigeringen i oppsettet fra Bootstrap-temaet.

Oppdater navigeringen slik at den erstatter den hardkodede koden i Bootstrap-temaet med dynamisk generert kode fra områdehierarkiet.

Rediger de lokale synkroniserte kopiene av temafilene.

Fjern den hardkodede navigeringskoden fra oppsettene. Her er et eksempel på den hardkodede navigeringen som ville blitt fjernet fra et vanlig Bootstrap-tema. Dette er en typisk hodedel, med logoen, delene for aktivering/deaktivering av navigering for menyen Hamburger når siden er for smal (den responsive delen), og den hardkodede sidenavigeringen for de andre sidene.

<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 som skal gå gjennom opplysningene i områdestrukturen og generere navigeringskoden, og inkluder deretter JavaScript-koden i oppsettene, for eksempel:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Endre utdataene nøyaktig fra filen topnav.js, slik at de samsvarer med koden du forventet i CSS.

Oppdater områdeoppsett

Området er nå funksjonelt, men har ingen redigerbare områder (spor) i oppsettene.

Finn eller legg til et DIV-element i et oppsett, og angi det som et spor.

Spor er DIV-elementer i oppsettet som har verdien scs-slot i klasseattributtet. Hvert spor må ha et unikt id-attributt. For eksempel:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Du kan sørge for at sporet justeres automatisk etter størrelsen på visningsporten for nettleseren ved å inkludere klasseattributtet scs-responsive.
Gjenta dette trinnet etter behov hvis du vil opprette flere spor i oppsettet eller i andre oppsett.

Publiser området

Når du er ferdig og har lagret alle endringene av et område, må du Publisere området.

Når du publiserer området, blir alle endringene i den gjeldende oppdateringen slått sammen i basisen, slik at innholdet i oppdateringen blir det nye basisområdet.

Opprett den nye malen

Du har nå et funksjonelt område med et tilknyttet tema, og du kan dermed gjøre dette til en mal som du kan dele med andre, slik at de kan opprette områder fra det.

Klikk på Utvikler i sidenavigeringen i Oracle Content Management.
Klikk på Vis alle maler.
Klikk på Opprett, og velg Fra eksisterende område.
Velg det nye området du har opprettet ved hjelp av en oppstartsmal og Bootstrap-malen.
Angi et navn på den nye malen, og klikk på Opprett.
Hvis du vil pakke malen for bruk med andre Oracle Content Management-forekomster, velger du malen og deretter menyvalget Eksporter for å opprette en .zip-fil som kan lastes ned.