Tworzenie szablonu serwisu z szablonu "Bootstrap" lub "Website Design"

Otwarta architektura Oracle Content Management oznacza, że można korzystać z prac wykonanych na innych platformach kodowania, takich jak Foundation lub Bootstrap. Dokonując kilku zmian, można przekształcić szablon Bootstrap w motyw i uczynić go częścią szablonu Oracle Content Management.

Proces podstawowy

Następujące wymagania i etapy są przedstawione poniżej w kolejnych podrozdziałach:

Wymagania wstępne

Dostęp do skonfigurowanej i działającej aplikacji Oracle Content Management typu Desktop, potrzebnej do synchronizacji folderów i plików z komputera lokalnego.
Pobrane do komputera lokalnego i przygotowane do użycia foldery, pliki oraz zawartość motywów szablonów Bootstrap.

Tworzenie serwisu

Aby utworzyć serwis z szablonu początkowego Oracle Content Management, należy:

Z nawigacji bocznej wybrać opcję Serwisy.

Zostanie wyświetlona lista istniejących serwisów.
Nacisnąć przycisk Utwórz.
W oknie dialogowym "Tworzenie serwisu" wybrać szablon początkowy JET lub szablon początkowy, który będzie używany jako podstawa serwisu.
W oknie dialogowym wpisać nazwę serwisu. Nazwa ta będzie używana w adresie URL serwisu. Może się ona składać tylko z liter, cyfr, znaków podkreślenia (_) i łączników (-). Użyta spacja zostanie automatycznie zastąpiona łącznikiem.

Dla szablonów, motywów, składników, serwisów ani stron serwisów nie wolno używać następujących nazw: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice, _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Następujących nazw można używać dla stron serwisów, ale nie można używać dla szablonów, motywów, składników ani serwisów: documents, sites.
Uwaga:

W ścieżce adresu URL serwisu Oracle Content Management jest uwzględniana wielkość liter. Wielkość liter w zapytaniach lub wartościach napisowych jest zarządzana przez programistów za pomocą ich własnego kodu.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Opcjonalnie: podać opis serwisu.
Po ukończeniu nacisnąć przycisk Utwórz.

Na pasku postępu będzie pokazywana nazwa nowego serwisu i status operacji tworzenia. Gdy serwis zostanie utworzony, jego nazwa pojawi się na liście serwisów. Jego początkowy status to "offline".

Aby szybko odnaleźć na liście nowo utworzony serwis, wystarczy posortować ją według kolumny Ostatnia aktualizacja. Utworzony serwis pojawi się na samym początku listy.

Synchronizowanie folderu motywu

Gdy jest tworzony serwis z szablonu początkowego, jest tworzona kopia motywu z szablonu początkowego mająca nazwę serwisu z następującą niej nazwą motywu. Na przykład motyw My_New_Site ma postać My_New_SiteTheme.

Do synchronizacji folderów i plików motywu ze swoim komputerem lokalnym należy użyć aplikacji typu Desktop. Zob. Synchronizacja — pierwsze kroki w podręczniku Praca zespołowa nad dokumentami przy użyciu Oracle Content Management.

W komputerze lokalnym powinna być widoczna następująca struktura hierarchiczna folderów i plików motywu z szablonu. Na przykład:

    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

Konfigurowanie motywu podstawowego

Skopiować pliki szablonu Bootstrap do synchronizowanych na komputerze lokalnym folderów motywu w celu przykrycia istniejących plików.
- Pliki html idą do folderu nazwa_motywu/layouts
- Pliki css idą do folderu nazwa_motywu/assets/css
- Pliki js idą do folderu nazwa_motywu/assets/js
- Pliki obrazów idą do folderu nazwa_motywu/assets/images, który może być podzielony na podfoldery zawierające obrazy tła, stopki, osób itp.
Zmodyfikować pliki html w folderze layout, aktualizując ścieżki względne i dodając wymagane elementy. W przypadku typowego motywu Bootstrap istnieje wiele ścieżek względnych odnoszących się do folderu /assets i dlatego trzeba je zmodyfikować tak, aby prowadziły do folderu motywu.

Poprawić ścieżki folderów css, js i images, tak aby były używane:
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Uwaga:
Gdy ten etap zostanie ukończony, część _scs_theme_root będzie automatycznie dostosowana do środowiska, w którym ten motyw jest używany.
Dla każdego z układów Oracle Content Management istnieją trzy wymagania:
1. Zawrzeć następujące znaczniki w znaczniku <head> pliku html:
  - 
  - 
  - 
2. Dołączyć skrypt "renderer" na końcu plików układu, w znaczniku <body>. Obie te ścieżki są automatycznie dostosowywane w konstruktorze serwisów oraz w środowiskach wykonawczych.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Po zawarciu pliku renderer.js dodać następujące znaczniki:
  - 
  -

Sprawdzić w Oracle Content Management, czy zmodyfikowane pliki motywu zostały zsynchronizowane z serwisem.

Aktualizowanie stron serwisu

Otwierając serwis w konstruktorze serwisów, początkowo widzimy strony z serwisu domyślnego. Można usunąć zbędne strony oraz przełączyć układ stron, które będą zachowane, do jednego z nowych układów.

Z nawigacji bocznej wybrać opcję Serwisy.

Zostanie wyświetlona lista istniejących serwisów.
Wybrać serwis, po czym wybrać z menu podręcznego opcję Otwórz albo kliknąć na ikonie (na pasku czynności).
Podać nazwę aktualizacji i opcjonalny opis, po czym nacisnąć przycisk Utwórz.

W nazwie aktualizacji można używać liter, cyfr, znaków podkreślenia (_) i łączników (-). Użyta spacja zostanie automatycznie zastąpiona łącznikiem.

Jeśli już istnieją aktualizacje dla serwisu, wybrać odpowiednią aktualizację z listy, po czym kliknąć na ikonie .
Konstruktor serwisów zostanie otwarty w trybie podglądu. Aby można było dokonywać zmian lub używać opcji nawigacji z paska bocznego, upewnić się, że przełącznik jest ustawiony w pozycji Edytuj.
Aby edytować określoną stronę, wybrać ją, korzystając z drzewa serwisu (na pasku bocznym) lub własnej nawigacji serwisu.
Aby usunąć niepotrzebną stronę, wybrać ją, po czym kliknąć na ikonie .
Aby dodać nową stronę, nacisnąć przycisk Dodaj stronę. Położenie tej strony w drzewie serwisu można zmienić, przeciągając ją w nowe miejsce.
Aby zmienić układ powiązany ze stroną, wybrać stronę w drzewie serwisu, po czym wyświetlić jej ustawienia, klikając na ikonie .

Z listy Układ strony wybrać inny układ. Liczba i typy układów strony zależą od motywu powiązanego z serwisem.
Aby zmiany zostały zapisane w bieżącej aktualizacji, nacisnąć przycisk Zapisz. Można od razu kontynuować pracę nad bieżącą aktualizacją lub — jeśli trzeba — utworzyć nowe aktualizacje.

Aktualizowanie nawigacji

Jeśli przyjrzymy się nawigacji w podglądzie serwisu, to zobaczymy, że nie odpowiada ona obecnej strukturze hierarchicznej, ponieważ jest trwale zakodowana w układzie z motywu Bootstrap.

Należy zaktualizować nawigację, zastępując trwały kod w motywie Bootstrap kodem dynamicznie wygenerowanym ze struktury hierarchicznej serwisu.

W tym celu należy edytować lokalne synchronizowane kopie plików motywu.

Usunąć trwały kod nawigacji z układów. Poniżej jest przedstawiony przykład trwale zakodowanej nawigacji, którą należałoby usunąć z typowego motywu Bootstrap. Jest to typowa sekcja "header" z logo, z elementami przełączania (toggle) nawigacji dla menu nawigacyjnego (gdy strona jest za wąska (część reaktywna)) oraz z trwale zakodowaną nawigacją dla innych stron.

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

Napisać kod JavaScript w celu przejścia przez informacje o strukturze serwisu i wygenerowania kodu nawigacyjnego, po czym zawrzeć ten kod JavaScript w układach, na przykład:
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Zmodyfikować wynik działania pliku topnav.js tak, aby odpowiadał kodowi znacznikowemu, oczekiwanemu w konkretnym arkuszu stylów CSS.

Aktualizowanie układów serwisu

Serwis jest już funkcjonalny, ale w układach nie ma jeszcze edytowalnych obszarów (gniazd).

Odszukać lub dodać w układzie element DIV i wyznaczyć go na gniazdo.

Gniazda są to występujące w układzie elementy DIV, mające w atrybucie "class" wartość "scs-slot". Każde gniazdo musi mieć unikatowy atrybut id. Na przykład:
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Aby gniazdo automatycznie się dostosowywało do portu widoku przeglądarki, należy dodać atrybut "scs-responsive" klasy.
Powtórzyć te czynności w celu utworzenia dodatkowych gniazd w tym układzie lub w innych układach.

Publikowanie serwisu

Po wprowadzeniu wszystkich zmian w serwisie, a następnie zapisaniu ich, trzeba opublikować serwis.

Gdy serwis jest publikowany, wszystkie zmiany z bieżącej aktualizacji są scalane z serwisem podstawowym i stają się zawartością nowego serwisu podstawowego.

Tworzenie nowego szablonu

Teraz, mając już funkcjonalny serwis z powiązanym motywem, można z tego serwisu utworzyć szablon, który następnie można udostępnić innym użytkownikom, aby mogli tworzyć z niego własne serwisy.

Z nawigacji bocznej usługi Oracle Content Management wybrać opcję Programista.
Nacisnąć przycisk Wyświetl wszystkie szablony.
Nacisnąć przycisk Utwórz, po czym wybrać opcję Z istniejącego serwisu.
Wybrać nowy serwis, który został utworzony z szablonu początkowego i szablonu Bootstrap.
Podać nazwę nowego szablonu, po czym nacisnąć przycisk Utwórz.
Aby spakować szablon do użycia z innymi instancjami Oracle Content Management, wybrać go, a następnie wybrać opcję Eksportuj w celu utworzenia pliku .zip, który będzie można pobierać.