Vytvorenie šablóny lokality zo šablóny Bootstrap alebo šablóny návrhu webovej lokality

Otvorená architektúra služby Oracle Content Management vám umožňuje pracovať aj v prostrediach s iným kódovaním, ako sú napríklad Foundation alebo Bootstrap. Vykonaním niekoľkých zmien môžete šablónu Bootstrap premeniť na motív a začleniť ho do šablóny služby Oracle Content Management.

Základný proces

Tu je prehľad krokov, ktoré sú podrobne popísané v nasledujúcich častiach:

Predpoklady

Nastavte a spustite počítačovú aplikáciu Oracle Content Management na synchronizáciu priečinkov a súborov v lokálnom počítači.
Stiahnite si priečinky, súbory a obsah motívu šablóny Bootstrap do svojho lokálneho počítača a pripravte ich na použitie.

Vytvorenie lokality

Vytvorte lokalitu z úvodnej šablóny služby Oracle Content Management:

V bočnej navigácii kliknite na položku Lokality.

Zobrazí sa zoznam existujúcich lokalít.
Kliknite na položku Vytvoriť.
V dialógovom okne Vytvoriť lokalitu vyberte položku Úvodná šablóna JET alebo Úvodná šablóna. Táto sa použije ako východisko pre lokalitu.
V dialógovom okne zadajte názov lokality. Tento názov sa používa v adrese URL lokality. Môžete použiť písmená, čísla, znaky podčiarknutia (_) a spojovníky (-). Ak zadáte medzeru, automaticky sa nahradí spojovníkom.

Pre šablóny, motívy, komponenty, lokality alebo stránky lokalít nepoužívajte nasledujúce názvy: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice, _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Nasledujúce názvy môžete používať pre stránky lokalít, ale nie pre šablóny, motívy, komponenty ani pre lokality: documents, sites.
Poznámka:

V ceste adresy URL lokality Oracle Content Management sa rozlišujú veľké a malé písmená. Použitie veľkých alebo malých písmen v reťazcoch dotazov alebo fragmentov určujú vývojári prostredníctvom svojho vlastného kódu.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Voliteľne zadajte popis lokality.
Ak je všetko pripravené, kliknite na položku Vytvoriť.

Indikátor priebehu zobrazuje názov novej lokality a stav jej vytvorenia. Po vytvorení lokality sa jej názov zobrazí v zozname lokalít. Počiatočný stav lokality je offline.

Ak chcete rýchlo nájsť novovytvorenú lokalitu v zozname, môžete ho triediť podľa položky Naposledy aktualizované. Lokalita, ktorú ste práve vytvorili, sa zobrazí na začiatku zoznamu.

Synchronizácia priečinka motívu

Keď vytvoríte lokalitu z úvodnej šablóny, vytvorí sa kópia motívu úvodnej šablóny, pričom jej názov bude pozostávať z názvu lokality a názvu motívu. Napríklad názov motívu pre lokalitu My_New_Site bude My_New_SiteTheme.

Pomocou počítačovej aplikácie synchronizujte priečinok a súbory motívu lokality so svojím lokálnym počítačom. Pozrite si časť Začíname so synchronizáciou v príručke Spolupráca na dokumentoch v službe Oracle Content Management.

Vo svojom lokálnom počítači by ste teraz mali vidieť hierarchiu priečinkov a súbory motívu šablóny. Príklad:

    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

Nastavenie základného motívu

Nasledujúce súbory šablóny Bootstrap skopírujte do synchronizovaných priečinkov motívu vo svojom lokálnom počítači s prepísaním existujúcich súborov.
- Súbory html uložte do priečinka názov_motívu/layouts
- Súbory css uložte do priečinka názov_motívu/assets/css
- Súbory js uložte do priečinka názov_motívu/assets/js
- Súbory image uložte do priečinka názov_motívu/assets/images, pričom ich môžete zoskupiť do podpriečinkov obrázkov pozadia, päty, ľudí a ďalších
Aktualizujte relatívne cesty v súboroch html v priečinku layout a pridajte do nich požadované prvky. Typický motív Bootstrap zahŕňa množstvo relatívnych ciest odkazujúcich na priečinok /assets. Tieto je potrebné upraviť tak, aby ukazovali na priečinok motívu.

Cesty odkazujúce na priečinky css, js a images upravte tak, aby ukazovali na nasledujúce priečinky:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Poznámka:
Po dokončení tohto kroku sa časť _scs_theme_root automaticky prispôsobí prostrediu, v ktorom sa motív používa.
Na každé rozloženie v službe Oracle Content Management sa vzťahujú tri požiadavky:
1. Do značky <head> súboru html pridajte nasledujúce značky:
  - 
  - 
  - 
2. Na koniec súborov rozloženia pridajte skript vykresľovača tak, aby ešte patril do značky <body>. Obe tieto cesty sa v generátore lokalít a v runtime prostrediach nastavia automaticky.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Za časť „include“ v súbore renderer.js pridajte nasledujúce značky:
  - 
  -

Uistite sa, že sa upravené súbory motívu synchronizujú s lokalitou v službe Oracle Content Management.

Aktualizácia stránok lokality

Keď lokalitu prvýkrát otvoríte v generátore lokalít, uvidíte stránky, ktoré sú súčasťou predvolenej lokality. Stránky, ktoré nepotrebujete, môžete odstrániť a rozloženie stránok, ktoré sa majú zachovať, môžete zmeniť na niektoré z nových rozložení.

V bočnej navigácii kliknite na položku Lokality.

Zobrazí sa zoznam existujúcich lokalít.
Vyberte lokalitu a v kontextovej ponuke vyberte položku Otvoriť alebo kliknite na ikonu na paneli akcií.
Zadajte názov aktualizácie a voliteľný popis a potom kliknite na tlačidlo Vytvoriť.

V názve aktualizácie môžete použiť písmená, čísla, znaky podčiarknutia (_) a spojovníky (-). Ak zadáte medzeru, automaticky sa nahradí spojovníkom.

Ak už existujú aktualizácie pre lokalitu, vyberte aktualizáciu v zozname a kliknite na ikonu .
Generátor lokalít sa otvorí v režime ukážky. Ak chcete vykonávať zmeny alebo používať voľby navigácie na bočnom paneli, uistite sa, že prepínač úprav má nastavenie Upraviť.
Ak chcete upraviť konkrétnu stránku, vyberte ju v strome lokality na bočnom paneli alebo pomocou vlastnej navigácie lokality.
Ak chcete odstrániť nepotrebnú stránku, vyberte ju a kliknite na ikonu .
Ak chcete pridať novú stránku, kliknite na položku Pridať stránku. Pozíciu stránky v strome lokality môžete zmeniť tak, že ju potiahnete na požadované miesto pomocou myši.
Ak chcete zmeniť rozloženie priradené k stránke, vyberte stránku v strome lokality a potom kliknutím na ikonu zobrazte nastavenia stránky.

Prejdite do poľa Rozloženie stránky a v ponuke vyberte iné rozloženie. Počet a typ rozložení stránky závisí od motívu priradeného k lokalite.
Kliknutím na tlačidlo Uložiť uložte zmeny v aktuálnej aktualizácii. Môžete pokračovať v práci na aktuálnej aktualizácii alebo v prípade potreby môžete vytvoriť nové aktualizácie.

Aktualizácia navigácie

Keď sa pozriete na navigáciu v ukážke lokality, zistíte, že sa nezhoduje s aktuálnou hierarchiou, pretože navigácia v rozložení z motívu Bootstrap je napevno definovaná.

Aktualizujte navigáciu tak, že napevno definovaný kód v motíve Bootstrap nahradíte dynamicky generovaným kódom z hierarchie lokality.

Upravte lokálne synchronizované kópie súborov motívu.

Z rozložení odstráňte napevno definovaný kód navigácie. Tu je príklad napevno definovanej navigácie, ktorú je potrebné odstrániť z typického motívu Bootstrap. Toto je typická časť hlavičky s logom, časťami hamburgerovej ponuky na prepnutie navigácie, keď je stránka príliš úzka (responzívna časť), a napevno definovanou navigáciou pre ďalšie stránky.

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

Napíšte kód JavaScript na prechádzanie informáciami o štruktúre lokality a vygenerovanie navigačného kódu a potom zahrňte tento kód JavaScript do rozložení napríklad takto:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Upravte výstup súboru topnav.js tak, aby sa presne zhodoval s očakávanými markupom v konkrétnom súbore CSS.

Aktualizácia rozložení lokality

V tejto chvíli je lokalita už funkčná, no ešte nemá žiadne upraviteľné oblasti (sloty) v rozloženiach.

Vyhľadajte alebo pridajte prvok DIV do rozloženia a nastavte ho ako slot.

Sloty sú prvky DIV v rozložení s hodnotou "scs-slot" v atribúte triedy. Každý slot musí mať jednoznačný atribút id. Príklad:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Ak chcete, aby sa veľkosť slotu automaticky prispôsobila veľkosti okna prehľadávača, pridajte atribút triedy "scs-responsive".
Podľa potreby zopakujte tento krok a vytvorte tak ďalšie sloty v rozložení alebo iných rozloženiach.

Publikovanie lokality

Po vykonaní a uložení všetkých zmien na lokalite je potrebné Publikovať lokalitu.

Pri publikovaní lokality sa všetky zmeny v aktuálnej aktualizácii včlenia do základu a obsah aktualizácie sa stane novou základnou lokalitou.

Vytvorenie novej šablóny

Teraz máte funkčnú lokalitu s priradeným motívom. Môžete ju premeniť na šablónu a zdieľať ju s inými používateľmi, aby mohli na jej základe vytvárať ďalšie lokality.

V bočnej navigácii v službe Oracle Content Management kliknite na položku Vývojár.
Kliknite na položku Zobraziť všetky šablóny.
Kliknite na položku Vytvoriť a potom na položku Z existujúcej lokality.
Vyberte novú lokalitu, ktorú ste vytvorili pomocou úvodnej šablóny a šablóny Bootstrap.
Zadajte názov pre novú šablónu a potom kliknite na tlačidlo Vytvoriť.
Ak chcete vytvoriť balík pre šablónu, ktorý budete môcť použiť aj v iných inštanciách služby Oracle Content Management, vyberte šablónu a potom kliknutím na voľbu ponuky Exportovať vytvorte súbor .zip, ktorý môžete stiahnuť.