Webhelysablon létrehozása Bootstrap vagy Website Design sablonból

Az Oracle Content Management nyílt architektúrája azt jelenti, hogy más kódolási keretrendszerekben, például Foundation vagy Bootstrap, végrehajtott munkát is használhat. Néhány módosítással egy Bootstrap sablonból témát készíthet, és azt az Oracle Content Management sablonjának részévé teheti.

Alapvető munkamenet

Az alábbi lépéseket a következő szakaszok részletesen ismertetik:

Előfeltételek

Mappák és fájlok helyi számítógépével való szinkronizálásához rendelkeznie kell beállított és futó Oracle Content Management asztali alkalmazással.
A Bootstrap sablon témájához tartozó mappák, fájlok és tartalom letöltése helyi számítógépére, és ezek használatra kész állapota.

Webhely létrehozása

Webhely létrehozása az Oracle Content Management kiinduló sablonjából:

Az oldalsó navigációs sávon kattintson a Webhelyek elemre.

Megjelenik a rendelkezésre álló webhelyek listája.
Kattintson a Létrehozás gombra.
A Webhely létrehozása párbeszédpanelen jelölje ki a webhely alapjául használni kívánt JET kiinduló sablon vagy a Kiinduló sablon elemet.
A párbeszédpanelen adjon nevet a webhely részére. Ez a név lesz használva a webhely URL-címében. Csak betűket, számokat, aláhúzásjelet (_) és kötőjelet (-) használhat. Ha szóközt ír be, azt a rendszer automatikusan kötőjelre cseréli.

A következő neveket ne használja sablonokhoz, témákhoz, összetevőkhöz, webhelyekhez vagy webhelyoldalakhoz: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Bár használhatja a következő neveket weblapokhoz, ne használja ezeket sablonokhoz, témákhoz, összetevőkhöz vagy webhelyekhez: documents, sites.
Megjegyzés:

Az Oracle Content Management webhelye URL-címének elérési útvonalában a rendszer megkülönbözteti a kis- és a nagybetűket. A lekérdezésben vagy a részkarakterláncokban a kis- és a nagybetűket a fejlesztők egyéni kóddal kezelik.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Kívánság szerint megadhatja a webhely leírását is.
Ha ezzel kész van, kattintson a Létrehozás gombra.

A folyamat előrehaladását jelző sáv megjeleníti az új webhely nevét és a létrehozás állapotát. Ha a webhely létrehozása sikerült, a neve megjelenik a webhelyek listájában. A kezdeti állapota a kapcsolat nélküli.

Az újonnan létrehozott webhely könnyebben megtalálható a listában, ha a rendezés alapja a Legutóbb módosított. Az éppen létrehozott webhely a lista tetején jelenik meg.

A témához tartozó mappa szinkronizálása

Amikor kiinduló sablonból hoz létre webhelyet, a rendszer létrehozza a kiinduló sablon témájának másolatát, és ennek neve a webhely neve, majd ezt követően a téma neve lesz. Például a My_New_Site témája My_New_SiteTheme lesz.

Az asztali alkalmazással szinkronizálja a webhely témájához tartozó mappát és fájlokat helyi számítógépével. Lásd: A szinkronizálás első lépései itt: Együttműködés dokumentumokon az Oracle Content Management szolgáltatással.

Ekkor meg kell jelenniük a sablon témájához tartozó mappahierarchiáknak és fájloknak a helyi számítógépén. Például:

    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

Az alaptéma beállítása

Másolja ezeket a Bootstrap fájlokat a helyi számítógépén a téma szinkronizált mappáiba a meglévő fájlok átfedéséhez.
- A html fájlok a téma_neve/layouts mappába kerülnek
- A css fájlok a téma_neve/assets/css mappába kerülnek
- A js fájlok a téma_neve/assets/js mappába kerülnek
- Az image fájlok a téma_neve/assets/images mappába kerülnek, amely a háttér, lábléc, személyek stb. képei szerint almappákból állhat
Módosítsa a html fájlokat a layout mappában a relatív elérési útvonalak frissítéséhez és a szükséges elemek hozzáadásához. Jellemző Bootstrap témánál számos relatív elérési útvonal mutat az /assets mappára, ezért módosítania kell ezeket, hogy a téma mappájára mutassanak.

Javítsa a css, js és images mappát az alábbiak szerint:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Megjegyzés:
A lépés végrehajtása után az _scs_theme_root rész automatikusan a téma használati környezetére módosul.
Az Oracle Content Management egyes elrendezéseire három követelmény vonatkozik:
1. Vegye fel a következő címkéket a html fájl <head> elemébe:
  - 
  - 
  - 
2. Vegye fel a megjelenítő parancsfájlt az elrendezésfájlok végén közvetlenül a <body> címkén belül. Ezek az elérési útvonalak automatikusan igazodnak a Site Builder szolgáltatásban és a futtatási környezetekben.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Vegye fel a következő címkéket a renderer.js fájl után:
  - 
  -

Ellenőrizze, hogy a módosított témafájlok szinkronizálva vannak-e a webhellyel az Oracle Content Management szolgáltatásban.

A webhelyoldalak módosítása

Amikor megnyitja a webhelyet a Site Builder szolgáltatásban, kezdetben az alapértelmezett webhely oldalait látja. Törölheti a szükségtelen oldalakat, és a megtartani kívánt oldalakon az elrendezést átválthatja az új elrendezések valamelyikére.

Az oldalsó navigációs sávon kattintson a Webhelyek elemre.

Megjelenik a rendelkezésre álló webhelyek listája.
Jelölje ki a webhelyet, és a helyi menüből válassza ki a Megnyitás elemet, vagy a műveletsávon kattintson a ikonra.
Adjon nevet a frissítésnek, választható módon leírást is megadhat, majd kattintson a Létrehozás elemre.

A frissítés nevében csak betűket, számokat, aláhúzás jelet (_) és elválasztójelet (-) használhat. Ha szóközt ír be, azt a rendszer automatikusan kötőjelre cseréli.

Ha már rendelkezik a webhelyhez frissítéssel, válassza azt ki a listából, majd kattintson a ikonra.
A Site Builder előnézeti módban nyílik meg. Az oldalsávon a navigálási beállítások megváltoztatásához vagy használatához győződjön meg arról, hogy a kapcsoló a Szerkesztés állásban van.
Adott oldal szerkesztéséhez válassza az oldalt a webhely fastruktúráját vagy a webhely saját léptetési hivatkozásait használva.
Szükségtelen oldal eltávolításához jelölje ki az oldalt, és kattintson a ikonra.
Új oldal felvételéhez kattintson az Oldal hozzáadása elemre. Az oldal helyét a webhely fanézetén áthúzással módosíthatja.
Oldalhoz társított elrendezés módosításához jelölje ki az oldalt a webhely fanézetén, és kattintson az ikonra az oldal beállításainak megjelenítéséhez.

Lépjen az Oldalelrendezés mezőbe, és válasszon másik elrendezést a menüből. Az oldalelrendezések száma és típusa a webhelyhez társított témától függ.
Kattintson a Mentés gombra a módosítások aktuális frissítésbe mentéséhez. Folytathatja a munkát az aktuális frissítésen, vagy szükség szerint új frissítéseket hozhat létre.

Navigáció módosítása

Amikor megnézi a navigációt a webhely előnézetén, az nem egyezik meg az aktuális hierarchiával, ennek oka a Bootstrap témából származó elrendezés rögzített navigációja.

Módosítsa a navigációt a Bootstrap témában lévő rögzített kód lecserélésével a webhely hierarchiájából dinamikusan előállított kóddal.

Szerkessze a témafájlok helyi szinkronizált másolatait.

Távolítsa el a rögzített navigációs kódot az elrendezésekből. Az alábbiakban példa látható a rögzített navigációra, amelyet célszerű eltávolítani a jellemző Bootstrap témákból. Ez jellemző fejléc szakasz emblémával, 'Toggle Navigation' részekkel a 'Hamburger' menühöz, amikor az oldal túl keskeny (az érzékeny rész), valamint rögzített oldalnavigációval más oldalaknál.

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

Írjon JavaScript kódot a webhely szerkezeti adatainak bejárásához, állítsa elő a navigációs kódot, majd helyezze el a JavaScript kódot az elrendezésekben, például:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Módosítsa atopnav.js fájl pontos kimenetét, hogy az megegyezzen az adott stíluslapban várt kóddal.

Webhelyelrendezések módosítása

Ezen a ponton a webhely működőképes, de az elrendezésekben nem rendelkezik szerkeszthető területekkel (rekeszekkel).

Keressen meg vagy vegyen fel egy DIV elemet egy elrendezésben, és jelölje ezt rekeszként.

A rekeszek az elrendezésen lévő olyan DIV elemek, amelyek az "scs-slot" értékkel rendelkeznek a class attribútumban. Minden rekesznek egyedi id attribútummal kell rendelkeznie. Például:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Ahhoz, hogy a rekesz automatikusan igazodjon a böngésző nézetablakának méretéhez, vegye fel az "scs-responsive" osztályattribútumot.
Szükség szerint ismételje meg ezt a lépést további rekeszek létrehozásához az elrendezésben vagy más elrendezésekben.

A webhely közzététele

A webhelyen végrehajtott összes változtatás befejezése és mentése után közzé kell tennie a webhelyet.

A webhely közzététele az aktuális frissítés összes módosítását egyesíti az alapul szolgáló webhellyel, így a frissítés válik új alapul szolgáló webhellyé.

Az új sablon létrehozása

Ezzel társított témát tartalmazó webhellyel rendelkezik, ezt sablonná alakíthatja másokkal való megosztáshoz, így ők webhelyeket hozhatnak létre ebből.

Az Oracle Content Management oldalsó navigációs sávján kattintson a Fejlesztő elemre.
Kattintson az Összes sablon megtekintése elemre.
Kattintson a Létrehozás, majd a Meglévő webhelyből elemre.
Jelölje ki a kiinduló sablon és a Bootstrap sablon használatával létrehozott új webhelyet.
Adja meg az új sablon nevét, és kattintson a Létrehozás elemre.
Az Oracle Content Management más példányaival is használható sabloncsomag elkészítéséhez jelölje ki a sablont, és válassza az Exportálás műveletet letölthető .zip fájl létrehozásához.