Tema Mundana para Grav CMS

Tema Mundana de Wowthemes portado a Grav.

El tema Mundana de Wowthemes presenta un diseño limpio y minimalista, estilo para todos los elementos básicos de la página y código HTML5/CSS3 diseñado para una personalización rápida y sencilla. Bellamente elaborado, Mundana es el diseño perfecto para tu blog Grav. Diseños de página de inicio, búsqueda, publicación de artículos y categorías disponibles.

Instalación

La instalación del tema Mundana se puede realizar de dos formas. Nuestro método de instalación GPM (Grav Package Manager) le permite instalar el tema rápida y fácilmente con un simple comando de terminal, mientras que el método manual le permite hacerlo a través de un archivo zip.

Instalación de GPM (preferida)

La forma más sencilla de instalar este tema es a través del [Grav Package Manager (GPM)] (http://learn.getgrav.org/advanced/grav-gpm) a través de la Terminal de su sistema (también llamada línea de comando). Desde la raíz de su tipo de instalación Grav:

bin/gpm instalar mundana

Esto instalará el tema Mundana en su directorio /user/themes dentro de Grav. Sus archivos se pueden encontrar en /your/site/grav/user/themes/mundana.

Instalación manual

Para instalar este tema, simplemente descargue la versión zip de este repositorio y descomprímala en /your/site/grav/user/themes. Luego, cambie el nombre de la carpeta a "mundana". Puede encontrar estos archivos en GitHub o mediante GetGrav.org.

Posterior a la instalación

Habilite el tema Mundana, ya sea a través del complemento de administración en admin/themes o en el archivo system.yaml en pages.theme.

pages:
   tema: mundana

No edite directamente el archivo mundana.yaml que se encuentra en la carpeta del tema. Copie el archivo mundana.yaml en user/config/themes y edite el nuevo archivo allí.

Características

  • Publicaciones destacadas en la página de inicio
  • Paginación
  • Compartir publicaciones
  • Categorías
  • Enlaces anterior/siguiente
  • Comentarios de Disqus
  • Integración de Mailchimp
  • Formulario de contacto listo
  • Caracteristicas de diseño:
    • Arranque v4.6
    • Fuente impresionante 5 -HTML5 y CSS3
  • Totalmente receptivo
  • Varias plantillas para presentar su contenido.
  • Menú desplegable completo integrado en la barra de menú y la barra lateral.
  • Estilo para todos los elementos básicos de la página.
  • Estilo para varios módulos.
  • Totalmente responsivo con navegación móvil de página completa
  • Archivos fuente CSS basados en SCSS para una fácil personalización
  • Códigos cortos para escribir tus páginas fácilmente, aprovechando los estilos que ofrece el tema.
  • Estilos personalizados para formularios de inicio de sesión.
  • Soporte para menú de navegación en sitios web de una página.
  • Datos de demostración
  • Listo para traducción
  • Seo amigable
  • Optimizado para velocidad y rendimiento

Plantillas de página admitidas

  • Plantilla predeterminada
  • Plantilla de error
  • Plantilla de blog
  • Plantilla de publicación
  • Plantilla de contacto
  • Plantilla de búsqueda simple
  • Soporte para taxonomylist, páginas relacionadas, complementos aleatorios, feeds y archivos.
  • Plantillas de vista modulares:
    • Plantilla de todas las historias
    • Plantilla de últimas publicaciones
    • Plantilla de publicación adhesiva

Publicaciones destacadas

Las publicaciones etiquetadas con la etiqueta seleccionada en la configuración del tema y el número elegido (hasta un máximo de 5), se mostrarán automáticamente en una mini lista en la barra lateral.

Páginas de blogs

  • Añade una página de blog si la necesitas en tu web.
  • La plantilla de elemento está lista para funcionar con el complemento Tiempo de lectura.
  • Complemento Breadcumbs activado por defecto en las publicaciones.
  • Opción agregada para filtrar por taxonomía de autor. Es necesario configurar la taxonomía de autores, en la configuración del sitio, para que en ellas aparezcan los autores de las páginas del blog y puedas utilizar los filtros por autor que tiene el tema.
  • Se agregaron íconos para compartir en redes sociales a los elementos del blog.
  • Soporte para traducción de fechas si se utilizan los complementos Translate-date o twig-extensions.

Opciones predeterminadas

Mundana viene con algunas opciones predeterminadas que se pueden configurar en todo el sitio. Estas opciones son:

VALOR DEFINICIÓN
dropdown.enabled Activar/Desactivar el menú desplegable en la barra de navegación
modo de producción En el modo de producción, solo se utiliza CSS minimizado. Cuando está deshabilitado, el CSS anidado está habilitado
back_to_top_button Activar/Desactivar el botón de volver al principio
favicon Elige tu propio favicon
custom_logo_enabled Activar/Desactivar logotipo personalizado en la barra de navegación
custom_logo_width Establece el ancho personalizado para el logotipo personalizado (valores entre 20 y 300 píxeles)
custom_logo Un logotipo personalizado en lugar del predeterminado (ver más abajo)
custom_logo_mobile Un logotipo personalizado para usar en la navegación móvil
custom_css Cargar CSS personalizado desde theme://assets/css/custom.css si está disponible
custom_js Cargar js personalizado desde theme://assets/css/custom.js si está disponible
menu_langswitcher Activar/Desactivar icono de langswitcher en el menú (se necesita el complemento langswitcher)
menu_search Activar/Desactivar el icono de búsqueda en la barra de navegación (se necesita el complemento de búsqueda simple)
menu_login Activar/Desactivar el icono de inicio de sesión en el menú
override_page_style Si está habilitado, se anularán todos los estilos de página definidos
default_page_style Si override_page_style está habilitado, puedes elegir el estilo de página predeterminado
navbar.container_fluid Use .container-fluid en la barra de navegación, para un contenedor de ancho completo
navbar.height Establece una altura personalizada para la barra de navegación (valores entre 35 y 150)
navbar.display_site_name Mostrar el nombre del sitio en la barra de navegación
navbar.icon Mostrar icono en la barra de navegación de Fontawesome (solo si custom_log está deshabilitado)
navbar.icon_group Elige el grupo de iconos (fas, fab o fa)
navbar.icon_size Establecer el tamaño del icono (xs, sm o lg)
navbar.style Establece el estilo de la barra de navegación (claro u oscuro)
navbar.bgcolor Establecer color de fondo (disponible en Bootstrap)
navbar.custom_bgcolor Establece un color de fondo personalizado si no quieres configurar ninguno de los disponibles en Bootstrap
custommenus.enabled Activar/Desactivar menús personalizados en el menú superior
custom_menu_items Lista de elementos personalizados para el menú
sidebar_showtaxonomy Habilitar/Deshabilitar la sección de etiquetas populares en la barra lateral (se requiere el complemento taxonomylist)
sidebar_showarchives Habilitar/Deshabilitar la sección de archivos en la barra lateral (se requiere el complemento de archivos)
sidebar_show_relatedpages Habilitar/Deshabilitar la sección de páginas relacionadas en la barra lateral (se requiere el complemento de páginas relacionadas)
sidebar_showfeeds Activar/Desactivar la sección de feeds en la barra lateral (se requiere el complemento de feeds)
sidebar_showrandom Habilitar/Deshabilitar la sección aleatoria en la barra lateral (se requiere un complemento aleatorio)
blog-route '/blog'
publicaciones_destacadas Activar/Desactivar publicaciones destacadas en la barra lateral izquierda
featureposts_category Seleccionar nombre de categoría para publicaciones destacadas (configurado en taxonomías)
featureposts_number El número de publicaciones destacadas se mostrará en la barra lateral izquierda
share_enable Activar/Desactivar los íconos sociales en las publicaciones del blog
share_icons Lista de tus íconos sociales
mailchimp_enable Activar/Desactivar el cuadro de mailchimp
mailchimp_address Establece la dirección de Mailchimp
disqus_enable Activar/Desactivar los comentarios de Disqus
disqus_name Establece el nombre corto para Disqus
footer_text_left Texto personalizado que se mostrará en el pie de página izquierdo
footer_text_right Texto personalizado que se mostrará en el pie de página derecho

Para realizar modificaciones, puede copiar el archivo user/themes/mundana/mundana.yaml a la carpeta user/config/themes/ y modificarlo, o puede usar el complemento de administración.

Aviso

No modifique el archivo user/themes/mundana/mundana.yaml directamente o sus cambios se perderán con cualquier actualización.

Logotipos personalizados

Para agregar un logotipo personalizado, debe colocar el registro en la carpeta usuario/themes/mundana/images/logo. Se admiten formatos de imagen estándar (.png,.jpg, .gif, .svg, etc.). Luego haga referencia al logotipo a través de YAML de esta manera:

logotipo personalizado:
     - nombre: 'mi-logotipo-personalizado.png'
logotipo_personalizado_móvil:
     - nombre: 'mi-logotipo-móvil-personalizado.png'

Alternativamente, puedes usar el campo "Logotipo personalizado" de arrastrar y soltar en las opciones del tema Mundana.

Códigos abreviados (shortcodes)

Los shortcodes incluidos en el tema Mundana facilitan la escritura de contenido a través del complemento de administración, aprovechando el hecho de que todas las clases incluidas en Bootstrap 4 están disponibles, sin necesidad de modificar ninguna plantilla twig. Hasta ahora, están disponibles shortcodes que permiten crear cajas de alerta, distintivos, tarjetas, botones y rejillas.

Shortcode de Alerts

Documentación de Alerts en Bootstrap 4

Uso

En markdown, envuelve una alerta en etiquetas [sc-alert]. El shortcode [sc-alert] tiene algunos parámetros opcionales:

  • class - primary (por defecto), secundary, info, success, warning, danger, light, dark.
  • heading - Muestra un título en la caja de alerta.
  • dismissible - true o false. Muestra un icono de cierre en la caja de alerta.

Un ejemplo del shortcode de Alerta es el siguiente:

[sc-alert class="info" heading="Alerta con título"]
Para escribir un código XML, deberías tener al menos un entendimiento básico del formato y el esquema XML. Puedes ver los vídeos en youtube si eres completamente nuevo en XML. Por ahora, asumo que entiendes completamente qué es XML y, aunque no lo entiendas, simplemente sigue los pasos descritos a continuación y estarás al día con XML.
[/sc-alert]

[sc-alert class="peligro" dismissible=true]
Para escribir un código XML, deberías tener al menos un entendimiento básico del formato y el esquema XML. Puedes ver los vídeos en youtube si eres completamente nuevo en XML. Por ahora, asumo que entiendes completamente qué es XML y, aunque no lo entiendas, simplemente sigue los pasos descritos a continuación y estarás al día con XML.
[/sc-alert]

Ejemplo

https://mundana.pmdesign.dev/shortcodes

Shortcode de Distintivo (Badge)

Documentación para Badges en Bootstrap 4

Uso

En markdown, envuelve un distintivo en etiquetas [sc-badge]. El shortcode [sc-badge] tiene algunos parámetros opcionales:

  • class - primary (por defecto), secondary, info, success, warning, danger, light, dark
  • label - Muestra la etiqueta del distintivo.
  • url - URL a visitar si haces clic en el distintivo.
  • target - Destino de la URL (self, blank, parent, top).

Un ejemplo del shortcode de Distintivo es el siguiente:

[sc-badge class="warning" url="https://getgrav.org" label="warning" target="blank"]

Ejemplo

https://mundana.pmdesign.dev/shortcodes

Button Shortcode

Documentación para Botones en Bootstrap 4

Uso

En markdown, envuelve un botón en etiquetas [sc-button]. El shortcode [sc-button] tiene algunos parámetros opcionales:

  • label - Muestra la etiqueta del botón.
  • type - primary (por defecto), secondary, info, success, warning, danger, light, dark.
  • outline- true o false para botones con contorno, sin color de fondo.
  • size - Tamaño del botón (sm o lg)
  • classes- Clases CSS adicionales (por ejemplo, disabled, btn-block, etc.). NOTA: btn-outline-(color) no es compatible con el parámetro de tipo.
  • url - URL a visitar si haces clic en el botón.
  • target - Destino de la URL (self, blank, parent, top).

Un ejemplo del shortcode de Botón es el siguiente:

This is a primary large button [sc-button type="success" url="https://getgrav.org" label="Button" target="blank" size="lg" classes=""][/sc-button]

This is a danger small button [sc-button type="danger" url="https://getgrav.org" label="Button" target="blank" size="sm" classes=""][/sc-button]

This is a default button with outline class [sc-button type="info" url="https://getgrav.org" label="Button" target="blank" outline=true][/sc-button]

This is a danger small button in block [sc-button type="danger" url="https://getgrav.org" label="Button" target="blank" size="sm" classes="btn-block"][/sc-button]

Ejemplo

https://mundana.pmdesign.dev/shortcodes

Cards Shortcode

Documentación para Tarjetas en Bootstrap 4

Uso

En markdown, envuelve cada grupo de tarjetas en etiquetas [sc-cards] y para cada tarjeta envuélvela en [sc-card]. El shortcode [sc-card] tiene algunos parámetros opcionales:

  • column-size - Tamaño de la columna
  • title - Título de la tarjeta
  • button-text- Texto del botón de la tarjeta
  • button-color - Color del botón de la tarjeta (primary, secondary, info, ...). Ver colores de Bootstrap
  • button-url - URL del botón de la tarjeta

Un ejemplo del shortcode de Tarjetas es el siguiente:

[sc-cards]
[sc-card title="Special title treatment" button-text="Button 1" button-url="#my-url" button-color="primary" column-size="col-md-4"]
With supporting text below as a natural lead-in to additional content. <br>
With supporting text below as a natural lead-in to additional content. 
[/sc-card]
[sc-card title="Special title treatment" button-text="Button 2" button-url="#another-url" button-color="secondary" column-size="col-md-4"]
With supporting text below as a natural lead-in to additional content.
[/sc-card]  
[sc-card title="Special title treatment" button-text="Button 3" button-url="#another-url" button-color="secondary" column-size="col-md-4"]
With supporting text below as a natural lead-in to additional content.
[/sc-card]
[/sc-cards]

Ejemplo

https://mundana.pmdesign.dev/shortcodes

Shortcode de Acordeón

Documentación para Acordeón en Bootstrap 4

Uso

En markdown, envuelve cada acordeón en etiquetas [sc-collapse] y para cada elemento envuélvelo en [sc-collapse-item]. El shortcode [sc-collapse] tiene un parámetro obligatorio:

  • id - Identificador único para cada acordeón en la página.

El shortcode [sc-collapse-item] tiene algunos parámetros opcionales:

  • open - Indica qué elemento de acordeón se mostrará
  • title - Título del elemento de acordeón

Un ejemplo del shortcode de Acordeón es el siguiente:

[sc-collapse id="accordion1"]
[sc-collapse-item title="Elemento de Grupo Colapsable #1" open=true]
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
[/sc-collapse-item]

[sc-collapse-item title="Elemento de Grupo Colapsable #2"]
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
[/sc-collapse-item]

[sc-collapse-item title="Elemento de Grupo Colapsable #3"]
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
[/sc-collapse-item]
[/sc-collapse]

Ejemplo

https://mundana.pmdesign.dev/shortcodes

Página de demostración

https://mundana.pmdesign.dev/