Création d'un modèle de site à partir de Bootstrap ou d'un modèle de conception de site Web

L'architecture ouverte d'Oracle Content Management vous permet d'utiliser des travaux réalisés dans d'autres structures d'encodage telles que Foundation ou Bootstrap. Il suffit de quelques modifications pour transformer un modèle Bootstrap en un thème et l'intégrer à un modèle Oracle Content Management.

Processus de base

Voici un aperçu des étapes décrites en détail dans les sections suivantes :

Prérequis

L'application de bureau Oracle Content Management doit être configurée et en cours d'exécution pour synchroniser les dossiers et fichiers sur votre ordinateur local.
Téléchargez le contenu, les fichiers et les dossiers de thème de modèle Bootstrap sur votre ordinateur local et gardez-les à portée de main.

Création d'un site

Créez un site à partir d'un modèle de départ Oracle Content Management :

Dans la navigation latérale, cliquez sur Sites.

La liste des sites existants s'affiche.
Cliquez sur Créer.
Dans la boîte de dialogue Créer un site, sélectionnez le modèle à utiliser comme base du site : Modèle de départ JET ou Modèle de départ.
Dans la boîte de dialogue, entrez un nom pour le site. Ce nom est utilisé dans l'URL du site. Vous pouvez utiliser des lettres, des chiffres, des traits de soulignement (_) et des traits d'union (-). Si vous entrez un espace, il est automatiquement remplacé par un tiret.

N'utilisez pas les noms suivants pour les modèles, les thèmes, les composants, les sites ou les pages de site : authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice, _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Bien que vous puissiez utiliser les noms suivants pour les pages de site, ne vous en servez pas pour les modèles, les thèmes, les composants ou les sites : documents, sites.
Remarque :

Le chemin d'une URL de site Oracle Content Management distingue les majuscules des minuscules. La casse dans les chaînes de requête ou de fragment est gérée par les développeurs dans leur code personnalisé.
```
      https:[//host[:port]][/]path[?query][#fragment] 
     \____________________/\________________________/
        Location                     Data
```
Entrez éventuellement une description pour le site.
Lorsque vous êtes prêt, cliquez sur Créer.

Une barre de progression affiche le nom du nouveau site et le statut de création. Lorsque le site est créé, le nom apparaît dans la liste des sites. Son statut initial est hors ligne.

Pour trouver rapidement le nouveau site dans la liste, choisissez le tri Dernière mise à jour. Le site que vous venez de créer apparaît en haut de la liste.

Synchronisation du dossier de thème

Lorsque vous créez un site à partir d'un modèle de départ, une copie du thème du modèle de départ est créée. Son nom est composé du nom du site suivi du nom du thème. Par exemple, le thème de My_New_Site est My_New_SiteTheme.

Servez-vous de l'application de bureau pour synchroniser le dossier et les fichiers de thème du site sur votre ordinateur local. Reportez-vous à Introduction à la synchronisation dans le manuel Collaboration sur des documents avec Oracle Content Management.

Vous devez à présent voir la hiérarchie et les fichiers du dossier de thème de modèle sur votre bureau local. Voici un exemple :

    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

Configuration du thème de base

Copiez ces fichiers Bootstrap dans les dossiers de thème synchronisés sur votre bureau local pour recouvrir les fichiers existants.
- Les fichiers html sont placés dans le dossier theme_name/layouts.
- Les fichiers css sont placés dans le dossier theme_name/assets/css.
- Les fichiers js sont placés dans le dossier theme_name/assets/js.
- Les fichiers image sont placés dans le dossier theme_name/assets/images et peuvent être regroupés dans des sous-dossiers contenant les images pour l'arrière-plan, le pied de page, les personnes, etc.
Modifiez les fichiers html du dossier layout pour mettre à jour les chemins relatifs et ajouter les éléments requis. Un thème Bootstrap classique comporte de nombreux chemins relatifs vers le dossier /assets. Vous devez donc les modifier pour les faire pointer vers le dossier de thème.

Corrigez les chemins des dossiers css, js et images à utiliser :
```
_scs_theme_root_/assets/css/
_scs_theme_root_/assets/js/
_scs_theme_root_/assets/images/
```
Remarque :
Une fois cette étape terminée, la partie _scs_theme_root s'ajustera automatiquement à l'environnement dans lequel le thème est employé.
Pour chaque présentation Oracle Content Management, trois exigences sont à satisfaire :
1. Insérer les balises suivantes dans la balise <head> du fichier html :
  - 
  - 
  - 
2. Insérer le script du programme d'affichage à la fin des fichiers de présentation, dans la balise <body>. Ces deux chemins s'ajustent automatiquement dans le générateur de site et les environnements d'exécution.
```
<script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
```
3. Insérer les balises suivantes après avoir inclus le fichier renderer.js :
  - 
  -

Vérifiez que les fichiers de thème modifiés sont synchronisés avec le site dans Oracle Content Management.

Mise à jour des pages du site

Lorsque vous ouvrez le site dans le générateur de site, vous verrez d'abord les pages du site par défaut. Vous pouvez supprimer les pages que vous ne souhaitez pas inclure et remplacer la présentation de celles à conserver par l'une des nouvelles présentations.

Dans la navigation latérale, cliquez sur Sites.

La liste des sites existants s'affiche.
Sélectionnez le site, puis choisissez Ouvrir dans le menu contextuel ou cliquez sur dans la barre d'actions.
Entrez le nom et éventuellement la description de la mise à jour, puis cliquez sur Créer.

Pour le nom de la mise à jour, vous pouvez utiliser des lettres, des chiffres, des traits de soulignement (_) et des traits d'union (-). Si vous entrez un espace, il est automatiquement remplacé par un tiret.

Si des mises à jour existent déjà pour le site, sélectionnez-en une dans la liste et cliquez sur .
Le générateur de site est ouvert en mode aperçu. Pour effectuer des modifications ou utiliser les options de navigation dans la barre latérale, assurez-vous que le commutateur Modifier est défini sur Modifier.
Pour modifier une page donnée, sélectionnez-la à l'aide de l'arborescence de site dans la barre latérale ou de la navigation de site.
Pour enlever une page superflue, sélectionnez-la et cliquez sur .
Pour ajouter une nouvelle page, cliquez sur Ajouter une page. Vous pouvez repositionner la page dans l'arborescence de site en la faisant glisser.
Pour modifier la mise en page associée à la page, sélectionnez cette dernière dans l'arborescence de site et cliquez sur pour afficher les paramètres de page.

Accédez au champ Mise en page et sélectionnez une autre mise en page dans le menu. Le nombre et le type de mises en page dépend du thème associé à votre site.
Cliquez sur Enregistrer pour enregistrer vos modifications dans la mise à jour en cours. Vous pouvez continuer à travailler dans la mise à jour en cours ou créer d'autres mises à jour si besoin.

Mise à jour de la navigation

Lorsque vous consultez la navigation dans l'aperçu de site, cette dernière ne correspond pas à la hiérarchie en cours en raison de la navigation codée en dur dans la présentation provenant du thème Bootstrap.

Mettez à jour la navigation pour remplacer le code en dur du thème Bootstrap par du code généré dynamiquement à partir de la hiérarchie de sites.

Modifiez les copies synchronisées locales des fichiers de thème.

Enlevez le code de navigation en dur des présentations. Voici un exemple de navigation codée en dur à enlever d'un thème Bootstrap classique. Il s'agit d'une section d'en-tête classique, avec le logo, les parties Activer/Désactiver la navigation pour le menu latéral lorsque la page est trop étroite (partie réactive) et la navigation de page codée en dur pour les autres pages.

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

Ecrivez le code JavaScript pour parcourir les informations sur la structure de site et générer le code de navigation, puis insérez le code JavaScript dans les présentations, par exemple :
```
<script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>
```
Modifiez la sortie exacte du fichier topnav.jspour la faire correspondre au balisage attendu dans votre CSS.

Mise à jour des présentations du site

A ce stade, le site est fonctionnel mais ne dispose d'aucune zone (emplacement) modifiable dans les présentations.

Localisez ou ajoutez un élément DIV dans une présentation et désignez-le comme emplacement.

Les emplacements sont des éléments DIV de la présentation qui affichent la valeur "scs-slot" dans l'attribut de classe. Chaque emplacement doit avoir un attribut id unique. Par exemple :
```
<div id="slot-content1" class="scs-slot scs-responsive"></div>
```
Pour faire en sorte que l'emplacement s'ajuste automatiquement à la taille de la lucarne de navigateur, insérez l'attribut de classe "scs-responsive".
Répétez cette étape autant que nécessaire pour créer des emplacements supplémentaires dans cette présentation ou dans d'autres présentations.

Publication du site

Après avoir terminé et enregistré toutes les modifications sur un site, vous devez publier ce dernier.

La publication du site prend en compte toutes les modifications de la mise à jour en cours et les fusionne à la base, intégrant ainsi le contenu de la mise à jour dans le nouveau site de base.

Création du modèle

Le site est à présent fonctionnel et dispose d'un thème associé. Vous pouvez en faire un modèle et le partager avec d'autres personnes pour que ces dernières puissent créer des sites à partir de ce modèle.

Dans la navigation latérale Oracle Content Management, cliquez sur Développeur.
Cliquez sur Afficher tous les modèles.
Cliquez sur Créer et choisissez Créer à partir d'un site existant.
Sélectionnez le site que vous avez créé à l'aide d'un modèle de départ et du modèle Bootstrap.
Saisissez le nom du nouveau modèle et cliquez sur Créer.
Pour packager le modèle afin de l'utiliser avec d'autres instances Oracle Content Management, sélectionnez le modèle et choisissez l'option de menu Exporter pour créer un fichier .zip téléchargeable.