Saltar a contenido

49. CMS wagtail codered

Construido sobre wagtail añade interesantes funcionalidades para construir web rapidamente.

49.1 Instalación

Usando el entorno virtual Python

 pip install coderedcms
Para crear un proyecto Django/wagtail/codered, ejecutar: 
coderedcms start mysite --sitename "My Company Inc." --domain www.example.com
--sitename y --domain son opcionales

Siguiente:

  1. cd miblog/
  2. python manage.py migrate
  3. python manage.py createsuperuser
  4. python manage.py runserver
  5. Go to http://localhost:8000/admin/ and start editing!

49.2 Usamos wagtail codered

En http://localhost:8000/admin hay una sección de settings para crx settings.
ver codered .

49.3 Tutorial inicial

49.3.1 Parte 1. Nombre del portal, logo y lo básico

Login con superuser creado anteriormente en la página admin

Cambiar nombre web . En Settings > Sites

Logo . en Settings > CRX Settings.

El color y estilos por defecto procede de colores estandar de Bootstrap

  • Navbar color scheme: Dark
  • Navbar CSS class: bg-dark . Para elegir colores usar Bootstrap color utilities

Se incluye una selección de temas de Bootswatch. Se seleccionan en el "Theme variant", guardar y se puede ver el resultado.

49.3.2 Parte 2. Añadir contenido.

49.3.2.1 Añadir hero unit a la página de inicio.

Seleccionar page del menu y la única página existente hasta ahora.
Pulsar lapiz y editar.
Tenderemos tres secciones:
* Título * Imagen de portada * Body. Donde se añaden los contenidos. Cada componente de esta sección se llama bloque CRX se basa en Bootstrap para organizar los bloques, filas y columnas que se ordenan dinámicamente dependiendo de la pantalla.

Como primer bloque tenemos "hero Unit block" y elegimos poner una imagen o color de fondo.

Select the Hero Unit block. Next set a background image or color - we are going to download and use this image from Pixabay.
A continuación del campo de contenido elegir Responsive Grid Row y a continuación column y un contenido entre : mas
Después del texto, justo debajo pulsar + . Esto añade un bloque justo debajo del texto, elegimos button link

Select the Button Link block. We are going to add a “Learn More” button. Right now we don’t have any other pages on our site, so for the time being set Other link to “http://example.com”, and the Button Title to “Learn More”.

Save and preview

49.3.3.1 Adaptando la navegación.

El diseño e la barra de navegación se encuentra en Settings > CRX Settings. Podemos hacer cambios:
* Cambiar el tema y añadir clases Bootstrap * Poner/quitar busqueda * Fijar barra navegación arriba * Resolución de pantalla para que colapse en menu desplegable

49.3.3.1.1 Crear los menús

Creamos una navbar nueva en Snippets > Navigation Bars. , le damos nombre.

Podemos usar tre tipos de enlaces.
* Page link con sub-links. Enlaces a páginas de portal y sublinks desplegables. * Enlaces externos con subenlaces. * Enlaces documentos y subenlaces

Añadimos "page link" para cada página que aparece en el nav bar.
En '''Settings > CRX Settings ``` en la entrada navbar seleccionar la creada en los snippets.

Principalmente es un menú de enlaces. Vamos a Snippets > Footer

Give your footer a name. We choose Main Footer since this will be the main footer for our site.

Let’s get some practice with Responsive Grid Rows and Columns! We want to make a 4-column footer with our logo in the first column, our sub-page links in the second column, our main page links in the third column, and contact information in the fourth column. Don’t worry - This is actually going to be easy!

Añadimos cuatro columnas con diferentes contenidos

Por último en ''' Settings > CRX Settings and scroll down to Site Footers``` seleccionar el pie de página creado.

Continua en este ejemplo de blog