Vytvoření šablony webu z prostředí Bootstrap nebo šablony návrhu webu

Otevřená architektura služby Oracle Content Management umožňuje použít práci provedenou v jiných kódovacích prostředích, jako je Foundation nebo Bootstrap. Pomocí několika změn můžete proměnit šablonu z prostředí Bootstrap na téma a učinit ji součástí šablony služby Oracle Content Management.

Základní proces

Zde je uveden přehled kroků, které jsou podrobně popsány v následujících částech:

Předpoklady

Nastavte a spusťte aplikaci Oracle Content Management pro stolní počítače určenou k synchronizaci složek a souborů s místním počítačem.
Stáhněte složky pro jednotlivá témata se šablonami z prostředí Bootstrap, soubory a obsah do místního počítače a mějte je připravené k použití.

Vytvoření webu

Vytvořte web z úvodní šablony služby Oracle Content Management:

V navigaci webu klikněte na položku Weby.

Zobrazí se seznam existujících webů.
Klikněte na tlačítko Vytvořit.
V dialogovém okně Vytvořit web vyberte pomocí volby Úvodní šablona JET nebo Úvodní šablona šablonu, kterou chcete použít jako základ pro svůj web.
V dialogovém okně zadejte název webu. Tento název se použije v adrese URL webu. Můžete použít písmena, číslice, podtržítka (_) a pomlčky (-). Pokud zadáte mezeru, automaticky se nahradí spojovníkem.

Pro šablony, témata, komponenty, weby a stránky webů nepoužívejte následující názvy: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Ačkoli můžete použít následující názvy pro stránky webů, nepoužívejte je pro šablony, témata, komponenty nebo weby: documents, sites.
Poznámka:

U cesty pro adresu URL webu Oracle Content Management se rozlišují malá a velká písmena. Správu malých a velkých písmen v řetězcích dotazů nebo fragmentů provádějí vývojáři ve vlastním kódu.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Volitelně zadejte popis webu.
Jakmile jste hotovi, klikněte na volbu Vytvořit.

Zobrazí se indikátor průběhu s názvem nového webu a stavem vytváření. Po vytvoření webu se jeho název zobrazí v seznamu webů. Jeho výchozí stav je offline.

Pro rychlé vyhledání nově vytvořeného webu v seznamu seřaďte seznam podle volby Poslední aktualizované. Web, který jste právě vytvořili, se zobrazí na prvním místě.

Synchronizace složky témat

Když vytvoříte web z úvodní šablony, vytvoří se kopie tématu úvodní šablony a bude jí přiřazen název tvořený názvem webu, za kterým bude následovat název tématu. Například téma pro web My_New_Site bude mít název My_New_SiteTheme.

Pomocí aplikace pro stolní počítače synchronizujte složku a soubory témat pro web s místním počítačem. Prostudujte si téma Začínáme se synchronizací v dokumentu Spolupráce na dokumentech pomocí služby Oracle Content Management.

Nyní byste měli na místním počítači vidět hierarchii složek pro jednotlivá témata šablon a soubory. Zde je uveden pří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

Nastavení základního tématu

Zkopírujte tyto soubory z prostředí Bootstrap do synchronizovaných složek témat v místním počítači, a překryjte tak existující soubory.
- Soubory html jsou umisťovány do složky název_tématu/layouts.
- Soubory css jsou umisťovány do složky název_tématu/assets/css.
- Soubory js jsou umisťovány do složky název_tématu/assets/js.
- Soubory s obrázky jsou umisťovány do složky název_tématu/assets/images, která může obsahovat podsložky s obrázky pro pozadí, zápatí, osoby atd.
Upravte soubory html ve složce layout tak, že aktualizujete relativní cesty a přidáte požadované prvky. Pro typické téma z prostředí Bootstrap bude existovat mnoho relativních cest ke složce /assets, takže je musíte upravit tak, aby směřovaly do složky témat.

Opravte cesty pro složky css, js a images, aby je bylo možné používat:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Poznámka:
Po dokončení tohoto kroku se část _scs_theme_root automaticky přizpůsobí prostředí, ve kterém je téma používáno.
Pro každé rozvržení ve službě Oracle Content Management existují tři požadavky:
1. Zahrňte následující tagy do tagu <head> souboru html:
  - 
  - 
  - 
2. Zahrňte skript pro generování na konec souborů rozvržení, a to výhradně do tagu <body>. Obě tyto cesty se automaticky upraví v nástroji Site Builder a v běhových prostředích.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Po zahrnutí souboru renderer.js doplňte následující tagy:
  - 
  -

Ověřte, zda jsou upravené soubory témat synchronizovány s webem ve službě Oracle Content Management.

Aktualizace stránek webu

Když otevřete web v nástroji Site Builder, zobrazí se nejprve stránky, které jsou součástí výchozího webu. Můžete odstranit stránky, které nechcete, a přepnout rozvržení na stránkách, které chcete zachovat, na jedno z nových rozvržení.

V navigaci webu klikněte na položku Weby.

Zobrazí se seznam existujících webů.
Vyberte web a v místní nabídce zvolte položku Otevřít nebo klikněte na ikonu v pruhu akcí.
Zadejte název aktualizace a nepovinný popis a poté klikněte na tlačítko Vytvořit.

Pro název aktualizace může použít písmena, číslice, podtržítka (_) a spojovníky (-). Pokud zadáte mezeru, automaticky se nahradí spojovníkem.

Pokud již máte k dispozici aktualizace webu, vyberte příslušnou aktualizaci v seznamu a klikněte na ikonu .
Nástroj Site Builder se spustí v režimu náhledu. Chcete-li provést změny nebo použít navigační volby na postranní liště, ujistěte se, zda je přepínač Upravit nastaven do polohy Upravit.
Chcete-li upravit určitou stránku, zvolte ji pomocí stromu webu na postranním panelu nebo použitím vlastní navigace webu.
Chcete-li odebrat stránku, kterou nepotřebujete, vyberte ji a klikněte na ikonu .
Chcete-li přidat novou stránku, klikněte na tlačítko Přidat stránku. Stránku ve stromu webu můžete přemístit přetažením.
Chcete-li změnit rozvržení přiřazené ke stránce, vyberte stránku ve stromu webu a kliknutím na ikonu zobrazte nastavení stránky.

Přejděte do pole Rozvržení stránky a v nabídce vyberte jiné rozvržení. Počet a typ rozvržení stránek záleží na tématu spojeném s vaší stránkou.
Kliknutím na tlačítko Uložit uložte změny do aktuální aktualizace. Můžete pokračovat v práci na aktuální aktualizaci nebo v případě potřeby vytvářet nové aktualizace.

Aktualizace navigace

Když se podíváte na navigaci v náhledu webu, neshoduje se s aktuální hierarchií kvůli pevně nakódované navigaci v rozvržení z tématu z prostředí Bootstrap.

Aktualizujte navigaci, abyste nahradili pevně nakódovaný kód v tématu z prostředí Bootstrap dynamicky generovaným kódem z hierarchie webu.

Upravte své lokální synchronizované kopie souborů témat.

Odeberte z rozvržení pevně nakódovaný navigační kód. Zde je uveden příklad pevně nakódované navigace, která by musela být z typického tématu z prostředí Bootstrap odebrána. Jedná se o typickou sekci záhlaví s logem, částmi „Přepnout navigaci“ pro „hamburgerovou“ nabídku, když je stránka příliš úzká (responzivní část), a pevně nakódovanou navigací na stránce pro ostatní 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-->

Napište kód v jazyku JavaScript pro procházení informací o struktuře webu a generování navigačního kódu a poté tento kód zahrňte do rozvržení, například:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Upravte přesný výstup souboru topnav.js tak, aby odpovídal očekávaným značkám v konkrétních šablonách stylů CSS.

Aktualizace rozvržení webu

V tomto okamžiku je web funkční, ale nemá žádné upravitelné oblasti (pozice) v rozvrženích.

Vyhledejte nebo přidejte prvek DIV do rozvržení a označte jej jako pozici.

Pozice jsou prvky DIV v rozvržení, které mají v atributu třídy hodnotu "scs-slot". Každá pozice musí mít jedinečný atribut id. Například:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Chcete-li, aby se pozice automaticky přizpůsobila velikosti výřezu prohlížeče, zahrňte atribut třídy "scs-responsive".
Opakováním tohoto kroku podle potřeby vytvořte další pozice v tomto nebo jiných rozvrženích.

Publikování webu

Po dokončení a uložení všech změn webu je nutné provést publikaci webu výběrem položky Publikovat.

Při publikování webu budou všechny změny zahrnuty do aktuální aktualizace a sloučeny do základu, takže obsah aktualizace se stane součástí nového základního webu.

Vytvoření nové šablony

Nyní máte funkční web s přiřazeným tématem, takže z něj můžete vytvořit šablonu a tu poté sdílet s ostatními uživateli, aby z ní mohli vytvářet weby.

V postranní navigaci služby Oracle Content Management klikněte na položku Vývojář.
Klikněte na položku Zobrazit všechny šablony.
Klikněte na tlačítko Vytvořit a zvolte položku Z existujícího webu.
Vyberte nový web, který jste vytvořili pomocí úvodní šablony a šablony z prostředí Bootstrap.
Zadejte název nové šablony a klikněte na tlačítko Vytvořit.
Chcete-li šablonu zabalit pro použití s jinými instancemi služby Oracle Content Management, vyberte příslušnou šablonu a výběrem volby nabídky Exportovat vytvořte soubor .zip, který lze stáhnout.