Crearea unui şablon de site-uri din bootstrap sau dintr-un şablon de proiectare a site-urilor web

Arhitectura deschisă a Oracle Content Management înseamnă că puteţi utiliza munca efectuată în alte cadre de codare precum Foundation sau Bootstrap. Cu câteva modificări, puteţi să transformaţi un şablon bootstrap într-o temă şi să-l încorporaţi într-un şablon Oracle Content Management.

Procesul de bază

Iată o prezentare generală a etapelor, descrise în detaliu în secţiunile care urmează:

Cerinţele preliminare

Aplicaţia desktop Oracle Content Management pt. sincronizarea folderelor şi fişierelor în computerul dvs. local trebuie să fie configurată şi funcţională.
Descărcaţi folderele, fişierele şi conţinutul temelor şablonului bootstrap în computerul dvs. local şi pregătiţi-le pentru utilizare.

Crearea unui site

Creaţi un site dintr-un şablon pt. început Oracle Content Management:

În navigarea laterală, faceţi clic pe Site-uri.

Este afişată o listă a site-urilor existente.
Faceţi clic pe Creare.
În dialogul Creare site, selectaţi Şablon JET pt. început sau Şablon pentru început pe care să-l utilizaţi ca bază pentru acest site.
În dialog introduceţi un nume pt. site. Acest nume este utilizat în URL-ul site-ului. Puteţi utiliza litere, numere, caractere de subliniere (_) şi cratime (-). Dacă introduceţi un spaţiu, acesta este înlocuit automat cu o cratimă.

Nu utilizaţi următoarele cuvinte pentru a denumi şabloane, teme, componente, site-uri sau pagini: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Numele de mai jos, deşi pot fi utilizate pt. pagini de site, nu trebuie utilizate pt. şabloane, teme, componente, documente sau site-uri.
Notă:

Calea pt. un URL de site Oracle Content Management ţine cont de litere mari/mici. Concordanţa literelor în şirurile de interogare sau de fragmente este gestionată de dezvoltatori în codul lor personalizat.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Opţional, introduceţi o descriere pt. site.
Când sunteţi pregătit, faceţi clic pe Creare.

O bară de stadiu afişează numele noului site şi starea creării. Când site-ul este creat, numele apare în lista de site-uri. Starea sa iniţială este offline.

Pentru a găsi rapid site-ul nou creat în listă, sortaţi lista după Data ultimei actualizări. Site-ul pe care tocmai l-aţi creat va apărea în partea de sus a listei.

Sincronizarea folderului de teme

Atunci când creaţi un site dintr-un şablon pentru început, se creează o copie a temei şablonului starter a cărei denumire conţine numele site-ului, urmat de numele temei. De exemplu, tema pentru My_New_Site este My_New_SiteTheme.

Utilizaţi aplicaţia desktop pentru a sincroniza folderul şi fişierele temei pentru site în computerul local. Consultaţi Noţiuni de bază despre sincronizare din Colaborarea asupra documentelor cu Oracle Content Management.

Ar trebui să vedeţi acum ierarhia folderelor temei şablonului şi fişierele pe desktopul local. Iată un exemplu:

    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

Configurarea temei de bază

Copiaţi aceste fişiere bootstrap în folderele temei sincronizate din desktopul local pentru a suprapune fişierele existente.
- Fişierele html intră în folderul theme_name/layouts
- Fişierele css intră în folderul theme_name/assets/css
- Fişierele js intră în folderul theme_name/assets/js
- Fişierele image intră în folderul theme_name/assets/images, care poate fi împărţit în subfoldere cu imagini pentru fundal, subsol, persoane şi aşa mai departe
Modificaţi fişierele html în folderul layout pentru a actualiza căi relative şi a adăuga elemente necesare. Pentru o temă bootstrap tipică, vor exista mai multe căi relative spre folderul /assets, aşadar va trebui să le modificaţi pentru a viza folderul temei.

Remediaţi căile pe care să le utilizeze folderele css, js şi images:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Notă:
După finalizarea acestei etape, partea _scs_theme_root se va adapta automat la mediul în care este utilizată tema.
Există trei cerinţe pt. fiecare machetă Oracle Content Management:
1. Includeţi următoarele etichete în eticheta <head> fişierului html:
  - 
  - 
  - 
2. Includeţi scriptul randatorului la sfârşitul fişierelor machetei, chiar în interiorul etichetei <body>. Ambele căi se ajustează automat în Generatorul de site-uri şi în mediile runtime.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Includeţi următoarele etichete după includerea fişierului renderer.js:
  - 
  -

Verificaţi ca fişierele pt. temă modificate să fie sincronizate cu site-ul în Oracle Content Management.

Actualizarea paginilor site-ului

Atunci când deschideţi site-ul în Generatorul de site-uri, veţi vizualiza iniţial paginile care există în site-ul prestabilit. Puteţi să ştergeţi paginile pe care nu le doriţi şi să schimbaţi macheta de pe paginile pe care doriţi să le păstraţi cu una dintre noile machete.

În navigarea laterală, faceţi clic pe Site-uri.

Este afişată o listă a site-urilor existente.
Selectaţi site-ul şi alegeţi Deschidere în meniul contextual sau faceţi clic pe în bara de acţiuni.
Introduceţi un nume şi o descriere opţională pentru actualizare, apoi faceţi clic pe Creare.

Pentru numele actualizării puteţi utiliza litere, numere, caractere de subliniere (_) şi cratime (-). Dacă introduceţi un spaţiu, acesta este înlocuit automat cu o cratimă.

Dacă aveţi deja actualizări ale site-ului, selectaţi o actualizare din listă şi faceţi clic pe .
Generatorul de site-uri se deschide în modul previzualizare. Pentru a efectua modificări sau pt. a utiliza opţiunile de navigare din bara laterală, asiguraţi-vă că comutatorul Editare este setat la Editare.
Pentru a edita o anumită pagină, alegeţi pagina utilizând arborele site-ului din bara laterală sau utilizând propria navigare a site-ului.
Pentru a elimina o pagină nedorită, selectaţi pagina şi faceţi clic pe .
Pentru a adăuga o nouă pagină, faceţi clic pe Adăugare pagină. Puteţi să repoziţionaţi pagina în arborele site-ului prin tragere şi plasare.
Pentru o modifica macheta asociată cu o pagină, alegeţi pagina din arborele site-ului şi faceţi clic pe pentru a afişa setările paginii.

Accesaţi câmpul Machetă pagină şi selectaţi o machetă diferită din meniu. Numărul şi tipul de machete de pagini depinde de tema asociată cu site-ul dvs.
Salvare pentru a salva modificările la actualizarea curentă. Puteţi continua să lucraţi în actualizarea curentă sau să creaţi noi actualizări, dacă este necesar.

Actualizarea navigării

Atunci când priviţi elementele de navigare în previzualizarea site-ului, acestea nu corespund ierarhiei curente din cauza navigării înglobate în macheta din tema Bootstrap.

Actualizaţi elementele de navigare pentru a înlocui codul înglobat în tema Bootstrap cu un cod generat dinamic din ierarhia site-ului.

Editaţi copiile sincronizate locale ale fişierelor temei.

Eliminaţi codul de navigare înglobat din machete. Iată un exemplu de navigare înglobată care ar trebui eliminată dintr-o temă bootstrap tipică. Aceasta este o secţiune de antet tipică, cu siglă, părţile „Comutare navigare” pentru meniul „Hamburger”, atunci când pagina este prea îngustă (partea responsivă) şi navigarea în pagină înglobată pentru celelalte pagini.

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

Scrieţi codul JavaScript pentru a traversa informaţiile privind structura site-ului şi a genera codul de navigare, apoi includeţi codul JavaScript pe machete, de exemplu:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Modificaţi fişierul de rezultate exact topnav.js pentru a corespunde marcajului prevăzut în CSS-ul dvs.

Actualizarea machetelor site-ului

În acest moment, site-ul este funcţional, dar nu are zone editabile (sloturi) în machete.

Localizaţi sau adăugaţi un element DIV într-o machetă şi desemnaţi-l ca slot.

Sloturile sunt elemente DIV din machetă care au valoarea „scs-slot” în atributul de clasă. Fiecare slot trebuie să aibă un atribut id unic. De exemplu:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Pentru ca slotul să se ajusteze automat la dimensiunea viewportului browserului, includeţi atributul de clasă „scs-responsive”.
Repetaţi acest pas, după caz, pentru a crea sloturi suplimentare în machetă sau în alte machete.

Publicarea site-ului

După ce aţi finalizat şi aţi salvat toate modificările la un site, trebuie să publicaţi site-ul făcând clic pe Publicare.

Publicarea site-ului preia toate modificările din actualizarea curentă şi le fuzionează în bază, transformând ceea ce era în actualizare în noul site de bază.

Crearea noului şablon

Acum aţi obţinut un site funcţional cu o temă asociată; puteţi să-l transformaţi într-un şablon pe care să-l partajaţi cu alţii, care vor putea să creeze site-uri pornind de la acesta.

În navigarea laterală Oracle Content Management, faceţi clic pe Dezvoltator.
Faceţi clic pe Vizualizare toate şabloanele.
Faceţi clic pe Creare şi alegeţi Din site-ul existent.
Selectaţi noul site pe care l-aţi creat cu ajutorul unui şablon pentru început şi al şablonului bootstrap.
Introduceţi un nume pentru noul şablon şi faceţi clic pe Creare.
Pt. a împacheta şablonul în scopul utilizării cu alte instanţe Oracle Content Management, selectaţi şablonul şi alegeţi opţiunea de meniu Export pt. a crea un fişier .zip care poate fi descărcat.