Inicio > Tech - Content and Process > Oracle CEC – Creando mi primer tema

Oracle CEC – Creando mi primer tema

Actualmente la única forma de crear un nuevo portal (Site) en Content and Experience Cloud (CEC) es usando una plantilla (Template). Las plantillas son una combinación de tema (Theme), componentes (Components) y páginas. Por esta razón siempre el primer paso para crear un portal es importar una plantilla o usar una de las plantillas proporcionadas por defecto por el producto.

Cuando CEC crea el portal también crea un tema asociado a éste con el nombre del portal terminado en “Theme“. Para modificar este tema lo más ágil es emplear la aplicación de escritorio, la cual nos permite tener sincronizado el tema en nuestro equipo y sube los cambios que realizamos. Para sincronizar un tema debemos ir a la opción de “Seleccionar carpetas para sincronizar” y en la pestaña “Activos del sitio” seleccionar nuestro tema.

Una vez sincronizado el tema es el momento de modificarlo para conseguir el look and feel deseado; para el ejemplo usaré una plantilla realizada con Bootstrap 4 que podéis obtener de Start Bootstrap llamada Clean Blog.

clean-blog

Primero debemos conocer cuál es la estructura de un tema, si navegamos por la carpeta observaremos lo siguiente:

Theme
├ assets
│ ├ css
│ │ └ main.css
│ └ js
│   └ topnav.js
├ designs
│ └ default
│   ├ design.css
│   └ design.json
├ layouts
├ responsepages
│ └ 404.html
├ components.json
├ viewport.json
└ _folder_icon.png
  • assets: JavaScript, hojas de estilos (CSS), imágenes y otros archivos que se referencien desde el layout. Es una buena práctica poner la información de navegación en un archivo JavaScript (por ejemplo: topnav.js) en la carpeta /assets/js del tema.
  • designs: los ficheros design.css y design.json, se utilizan para especificar las opciones de estilo para los componentes.
  • layouts: archivos HTML para las plantillas de página, que se utilizan para mostrar las páginas del sitio.
  • publish: cuando un tema ha sido publicado, este directorio contiene copias de los archivos. Este directorio es accesible si se utiliza la aplicación de escritorio, pero no se incluye si se exporta el tema como parte de una plantilla.
  • responsepages: página especial para el manejo de errores (404).
  • viewport.json: especifica la configuración de resoluciones para el tema.
  • _folder.json: especifica el nombre y el GUID para el tema. El GUID es creado por Oracle Content and Experience cuando el tema es importado por primera vez o es copiado.
  • components.json: (Deprecado) registra los componentes usados con el tema. Se mantiene por compatibilidad hacia atrás.

Una vez conocemos la estructura del tema, podemos reubicar los diferentes archivos de la plantilla de Bootstrap que habíamos descargado anteriormente. La forma de hacerlo sería la siguiente:

  • El contenido de las carpetas css, img, js y vendor lo copiamos dentro de la carpeta assets.
  • Las plantillas de página (los ficheros HTML) los copiamos dentro de la carpeta layouts.

Una vez que tenemos los archivos colocados en su lugar dentro del tema sólo nos falta modificar los layouts para que encuentren correctamente estos ficheros, pinten el menú de navegación y nos permitan arrastrar contenido en su interior. Para hacer esto editamos cada uno de los layouts realizando los siguientes cambios:

  • Verificar que los tres metas siguientes están justo después de la etiqueta head:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  • Modificamos las rutas de los ficheros JavaScript, las hojas de estilo (css) y las imágenes añadiendo delante lo siguiente: _scs_theme_root_/assets/
  • Añadir la referencia a la hoja de estilo para el diseño:
<link href="_scs_theme_root_/designs/_scs_design_name_/design.css" rel="stylesheet" type="text/css">
  • Añadir justo antes de la etiqueta de cierre head:
<!--$SCS_RENDER_INFO-->
<!--$SCS_SITE_HEADER-->
<!--$SCS_PAGE_HEADER-->
</head>
  • Añadir justo antes de la etiqueta de cierre body:
<!--$SCS_PAGE_FOOTER-->
<!--$SCS_SITE_FOOTER-->
</body>
  • Para definir un slot, es decir una zona desde donde podemos editar la interface de Content and Experience para poder añadir componentes a la página, debemos incluir el siguiente código (si incluimos varios deben de tener un id diferente):

<div id="slot-content" class="scs-slot scs-responsive"></div>

Por último, para que el menú de navegación sea dinámico creamos el fichero JavaScript assets/js/topnav.js con el contenido siguiente:

function renderNode(id, navBar) {
  if (id >= 0) {
    var navNode = SCS.structureMap[id];
    if( navNode &&
      (
        ( typeof navNode.hideInNavigation != "boolean" ) ||
        ( navNode.hideInNavigation === false )
      ) )
    {
      var navItem = document.createElement("li");
      navItem.className = "nav-item";
      var navLink = document.createElement("a");
      navLink.className = "nav-link";
      var navText = document.createTextNode(navNode.name);

      var linkData = SCSRenderAPI.getPageLinkData(navNode.id) || {};
      if( linkData.href ) {
        navLink.href = linkData.href;
      }
      if( linkData.target ) {
        navLink.target = linkData.target;
      }

      navLink.appendChild(navText);
      navItem.appendChild(navLink);

      if (navNode.children.length > 0) {
        navItem.className += " dropdown";
        var navSub = document.createElement("ul");
        navSub.className = "dropdown-menu";
        var navCaret = document.createElement("span");
        navCaret.className = "caret";
        navLink.appendChild(navCaret);
        navLink.className = "dropdown-toggle";
        navLink.setAttribute("data-toggle", "dropdown");
        navLink.setAttribute("role", "button");
        navLink.setAttribute("aria-haspopup", "true");
        navLink.setAttribute("aria-expanded", "false");

        for (var c = 0; c < navNode.children.length; c++) { renderNode(navNode.children[c], navSub); } navItem.appendChild(navSub); } if (inActivePath(navNode)) navItem.className = (navItem.className + " active").trim(); navBar.appendChild(navItem); } } } function renderNav() { var topnav = document.getElementById("navbarResponsive"); // expected to be an empty div if (topnav) { // Update brand link var rootNode = SCS.structureMap[SCS.navigationRoot]; var brandLink = document.getElementById("navbar-brand"); var linkData = SCSRenderAPI.getPageLinkData(rootNode.id) || {}; if( linkData.href ) brandLink.href = linkData.href; if( linkData.target ) brandLink.target = linkData.target; // Build menu if (rootNode.children.length > 0) {
      var navBar = document.createElement("ul");
      navBar.className = "navbar-nav ml-auto";

      // add home
      var navItem = document.createElement("li");
      navItem.className = "nav-item";
      var navLink = document.createElement("a");
      navLink.className = "nav-link";
      var navText = document.createTextNode(rootNode.name);

      var linkData = SCSRenderAPI.getPageLinkData(rootNode.id) || {};
      if( linkData.href ) {
        navLink.href = linkData.href;
      }
      if( linkData.target ) {
        navLink.target = linkData.target;
      }

      navLink.appendChild(navText);
      navItem.appendChild(navLink);
      navBar.appendChild(navItem);

      // add childrens
      for (var c = 0; c < rootNode.children.length; c++) {
        renderNode(rootNode.children[c], navBar);
      }

      topnav.appendChild(navBar);
    }

    if (navBar.children.length === 0) document.getElementById("navbar-header").className += " hide"; // hide toggle button
  }
}

function inActivePath(navNode) {
  var active = false;

  if (navNode.id === SCS.navigationCurr) active = true;

  for (var c = 0; c < navNode.children.length && !active; c++) {
    active = active || inActivePath(SCS.structureMap[navNode.children[c]]);
  }

  return active;
}

// Must wait for all our script to be ready...
if (document.addEventListener) {
  document.addEventListener('scsrenderstart', renderNav, false);
} else if (document.attachEvent) {
  document.documentElement.scsrenderstart = 0;
  document.documentElement.attachEvent("onpropertychange",
    function(event) {
      if (event && (event.propertyName == "scsrenderstart")) {
        renderNav();
      }
    }
  );
}

Modificamos en el layout los elementos siguientes:

  • Añadir el atributo id al enlace:
<a class="navbar-brand" id="navbar-brand">Start Bootstrap</a>
  • Eliminar el contenido del menú de navegación borrando la lista siguiente:

<div id="navbarResponsive" class="collapse navbar-collapse">

<ul class="navbar-nav ml-auto">...</ul>

</div>

Una vez terminado este paso tendremos totalmente operativo nuestro tema. Podéis descargar la plantilla terminada aquí.

  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: