Sivuston mallipohjan luonti Bootstrap-mallipohjasta tai sivuston suunnittelumallipohjasta

Oracle Content Management -palvelun avoimen arkkitehtuurin ansiosta voit hyödyntää työtä, joka on tehty muissa koodausympäristöissä, kuten Foundation tai Bootstrap. Voit muuntaa Bootstrap-mallipohjan teemaksi tekemällä muutaman muutoksen ja tehdä siitä osan Oracle Content Management -mallipohjaa.

Perusprosessi

Tässä on yleiskatsaus vaiheista, jotka kuvataan tarkemmin myöhemmissä osioissa:

Edellytykset

Määritä ja käynnistä Oracle Content Management -työpöytäsovellus, jotta voit synkronoida kansioita ja tiedostoja paikalliseen tietokoneeseen.
Nouda Bootstrap-mallipohjan teemakansiot, tiedostot ja sisältö paikalliseen tietokoneeseen ja tee ne käyttövalmiiksi.

Sivuston luonti

Luo sivusto Oracle Content Management -aloitusmallipohjasta:

Valitse reunan navigointipalkista Sivustot.

Nykyisten sivustojen lista avautuu.
Valitse Luo.
Valitse Sivuston luonti -valintaikkunassa JET-aloitusmallipohja tai Aloitusmallipohja sivustosi perustaksi.
Syötä valintaikkunassa nimi sivustolle. Tätä nimeä käytetään sivuston URL-osoitteessa. Voit käyttää sivuston nimessä kirjaimia, numeroja, alaviivoja (_) ja yhdysmerkkejä (-). Jos syötät välilyönnin, se korvataan automaattisesti yhdysviivalla.

Älä anna seuraavia nimiä mallipohjille, teemoille, komponenteille, sivustoille tai sivuston sivuille: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice, _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Seuraavia nimiä voi käyttää sivustojen sivujen nimissä, mutta älä käytä niitä mallipohjien, teemojen, komponenttien tai sivustojen nimissä: documents, sites.
Huomautus::

Oracle Content Management -sivuston URL-osoitteen polussa huomioidaan kirjainkoko. Kehittäjät määräävät itse räätälöidyssä koodissaan, miten kysely- tai sirpalemerkkijonojen kirjainkoko käsitellään.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Voit halutessasi myös kirjoittaa kuvauksen sivustolle.
Kun olet valmis, valitse Luo.

Etenemispalkki näyttää uuden sivuston nimen ja luonnin tilan. Kun sivusto on luotu, sen nimi näkyy sivustolistassa. Se on aluksi offline-tilassa.

Löydät vasta luodun sivuston nopeasti listasta, kun lajittelet listan viimeisimmän päivityksen mukaan. Juuri luomasi sivusto näkyy ylimmäisenä listalla.

Teemakansion synkronointi

Kun luot sivuston aloitusmallipohjasta, aloitusmallipohjan teemasta luodaan kopio. Sen nimen alussa on sivuston nimi ja lopussa teeman nimi. Esimerkiksi sivuston Oma_uusi_sivusto teeman nimi on Oma_uusi_sivustoTeema.

Työasemasovelluksen avulla voit synkronoida sivuston teemakansion ja -tiedostot paikalliseen tietokoneeseen. Katso kohta Synkronoinnin käytön aloitus oppaassa Asiakirjojen käsittely yhteistyönä Oracle Content Management -palvelussa.

Mallipohjan teemakansion hierarkian ja tiedostojen pitäisi nyt näkyä paikallisessa tietokoneessa. Esimerkki:

    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

Perusteeman määritys

Kopioi nämä Bootstrap-tiedostot synkronoituihin teemakansioihin paikallisessa tietokoneessa olemassa olevien tiedostojen päälle.
- Siirrä html-tiedostot teeman_nimi/layouts-kansioon.
- Siirrä css-tiedostot teeman_nimi/assets/css-kansioon.
- Siirrä js-tiedostot teeman_nimi/assets/js-kansioon.
- Siirrä image-tiedostot teeman_nimi/assets/images-kansioon, jossa saattaa olla alikansioita esimerkiksi taustakuville, alatunnisteille ja henkilöiden kuville.
Päivitä suhteelliset polut ja lisää pakolliset elementit html-tiedostoihin layout-kansiossa. Tyypillisessä Bootstrap-teemassa on monta suhteellista polkua, jotka osoittavat /assets-kansioon. Ne on muokattava osoittamaan teemakansioon.

Muuta css-, js- ja images-kansioiden polut käyttämään seuraavia polkuja:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Huomautus::
Kun tämä vaihe on valmis, _scs_theme_root-osaa muutetaan automaattisesti vastaamaan ympäristöä, jossa teemaa käytetään.
Kullekin Oracle Content Management -asettelulle on kolme vaatimusta:
1. Lisää seuraavat tunnisteet html-tiedoston <head>-tunnisteeseen:
  - 
  - 
  - 
2. Lisää muodostuskomentosarja asettelutiedostojen loppuun <body>-tunnisteen sisäpuolelle. Kumpaakin näistä poluista muutetaan automaattisesti sivustonluontiohjelmassa ja ajonaikaisissa ympäristöissä.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Lisää seuraavat tunnisteet renderer.js-tiedoston lisäyksen jälkeen:
  - 
  -

Varmista, että muokatut teematiedostot on synkronoitu Oracle Content Management -palvelussa olevan sivuston kanssa.

Sivuston sivujen päivitys

Kun avaat sivuston sivustonluontiohjelmassa, näet ensin oletussivustossa olevat sivut. Voit poistaa sivuja, joita et tarvitse, ja valita jonkin uusista asetteluista sivuille, jotka haluat säilyttää.

Valitse reunan navigointipalkista Sivustot.

Nykyisten sivustojen lista avautuu.
Valitse sivusto ja valitse Avaa hiiren kakkospainikkeen valikosta tai toimintopalkista.
Syötä päivityksen nimi ja valinnainen kuvaus ja valitse sitten Luo.

Voit käyttää päivityksen nimessä kirjaimia, numeroita, alleviivauksia (_), ja viivoja (-). Jos syötät välilyönnin, se korvataan automaattisesti yhdysviivalla.

Jos sivustoon on jo olemassa päivityksiä, valitse päivitys listasta ja valitse .
Sivustonluontiohjelma avautuu esikatselutilassa. Jos haluat tehdä muutoksia tai käyttää sivupalkin navigointivalintoja, varmista, että on asetettu Muokkaa-asentoon.
Jos haluat muokata jotain tiettyä sivua, valitse sivu käyttämällä sivupalkissa sijaitsevaa sivustopuuta tai sivuston omaa navigointitoimintoa.
Jos et tarvitse sivua ja haluat poistaa sen, valitse sivu ja valitse .
Jos haluat lisätä uuden sivun, valitse Lisää sivu. Voit muuttaa sivun sijaintia sivustopuussa vetämällä ja pudottamalla sen.
Jos haluat muuttaa sivustoon liittyvää asettelua, valitse sivu sivustopuusta ja avaa sivun asetukset valitsemalla .

Siirry Sivun asettelu -kenttään ja valitse eri asettelu valikosta. Sivun asettelujen lukumäärä ja tyyppi riippuvat sivustoon liittyvästä teemasta.
Tallenna nykyiseen päivitykseen tekemäsi muutokset valitsemalla Tallenna. Voit jatkaa nykyisen päivityksen käsittelyä tai luoda tarvittaessa uusia päivityksiä.

Navigoinnin päivitys

Kun katselet navigointia sivuston esikatselussa, se ei vastaa nykyistä hierarkiaa, koska Bootstrap-teeman asettelussa käytetään kiinteää navigointia.

Kun päivität navigoinnin, Bootstrap-teeman kiinteä koodi korvataan sivuston hierarkiasta dynaamisesti luodulla koodilla.

Muokkaa teematiedostojen paikalliseen tietokoneeseen synkronoituja kopioita.

Poista kiinteä navigointikoodi asetteluista. Tässä on esimerkki kiinteästä navigoinnista, joka pitäisi poistaa tyypillisestä Bootstrap-teemasta. Tämä on tyypillinen otsikko-osa. Se sisältää logon, kiinteän navigoinnin muita sivuja varten ja Hampurilainen-valikon Vaihda navigointia -osan, joka on käytössä, kun sivu on liian kapea (reagoiva osa).

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

Kirjoita JavaScript-koodi, joka käy läpi sivuston rakennetiedot ja luo navigointikoodin, ja lisää sitten JavaScript-koodi asetteluihin. Esimerkki:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Muokkaa topnav.js-tiedoston tulostetta, jotta se vastaisi käytetyn CSS-koodin odottamaa koodia.

Sivuston asettelujen päivitys

Tässä vaiheessa sivusto toimii, mutta sen asetteluissa ei ole muokattavia alueita (paikkoja).

Etsi DIV-elementti asettelusta tai lisää sellainen ja määritä se paikaksi.

Paikat ovat asettelun DIV-elementtejä, joiden class-määritteessä on arvo "scs-slot". Jokaisella paikalla on oltava yksilöivä id-määrite. Esimerkki:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Jos haluat, että paikan koko säädetään automaattisesti selaimen näyttöikkunan koon mukaan, lisää class-määrite "scs-responsive".
Luo tarvittaessa lisää paikkoja asetteluun tai muihin asetteluihin toistamalla tätä vaihetta.

Sivuston julkaisu

Kun olet valmis ja olet tallentanut kaikki sivuston muutokset, julkaise sivusto valitsemalla Julkaise.

Kun sivusto julkaistaan, kaikki nykyisen päivityksen muutokset yhdistetään perussivustoon, jolloin päivityksestä tulee uusi perussivusto.

Uuden mallipohjan luonti

Sivustosi on nyt toimiva, ja siihen liittyy teema. Voit tehdä siitä mallipohjan, jonka voit jakaa muille, jotta he voivat luoda sivustoja sen pohjalta.

Valitse Oracle Content Management -palvelussa reunan navigointipalkista Kehittäjä.
Valitse Näytä kaikki mallipohjat.
Valitse Luo ja sitten Olemassa olevasta sivustosta.
Valitse uusi sivusto, jonka loit käyttämällä aloitusmallipohjaa ja Bootstrap-mallipohjaa.
Syötä uuden mallipohjan nimi ja valitse Luo.
Voit tehdä mallipohjasta paketin, jota voi käyttää muiden Oracle Content Management -instanssien kanssa, valitsemalla mallipohjan ja valitsemalla valikosta Vie-vaihtoehdon. Tämä luo mallipohjasta .zip-tiedoston, jonka voi noutaa.