Mix
Una colección completa de funciones simples pero útiles para la construcción, gestión, desarrollo y mejora de la experiencia de usuario en sitios Drupal.
mix
Instalar
composer require 'drupal/mix:^1.10'
Overview
Mix es un módulo utilitario todo en uno que proporciona una amplia gama de funciones comúnmente necesarias en proyectos Drupal sin requerir múltiples módulos dedicados. Se enfoca en simplificar tareas comunes, automatizar flujos de trabajo y centralizar configuraciones para una gestión de sitios más eficiente.
El módulo incluye herramientas de desarrollo como un interruptor rápido de modo dev/prod que controla el caché, la depuración de Twig, la agregación de CSS/JS y la visualización de errores. También ofrece funciones de gestión de contenido como sincronización de contenido entre entornos, ignorar importación de configuración para ajustes específicos del entorno, y un sistema de menú mejorado con soporte de tokens, títulos HTML y visibilidad basada en roles.
Para la experiencia del usuario, Mix proporciona mejoras de formularios como prevención de envíos duplicados, advertencias de formularios sin guardar y una página independiente de cambio de contraseña. También incluye funciones SEO con gestión de meta tags para la página principal y nodos, páginas de error 500 personalizadas y eliminación del encabezado X-Generator para seguridad por oscuridad.
Features
- Interruptor de modo de desarrollo que cambia rápidamente entre configuraciones dev y prod, controlando la depuración de Twig, backends de caché, agregación de CSS/JS y verbosidad de mensajes de error
- Indicador de entorno que muestra un banner de texto personalizable en la parte superior de todas las páginas para identificar el entorno actual (Desarrollo, Staging, Producción, etc.)
- Función mostrar ID de formulario que muestra el ID del formulario y la plantilla de código hook_form_FORM_ID_alter() antes de cada formulario para facilitar el desarrollo de módulos
- Funcionalidad de ocultar botón de envío que deshabilita los botones de envío después del clic para prevenir envíos duplicados de formularios
- Confirmación de formulario sin guardar que advierte a los usuarios con un diálogo del navegador cuando intentan abandonar una página con cambios de formulario sin guardar
- Sincronización de contenido (Beta) que permite exportar e importar blocks, enlaces de menú y términos de taxonomía junto con la configuración, resolviendo el problema de blocks rotos al sincronizar configuraciones entre entornos
- Ignorar importación de configuración que permite excluir configuraciones específicas o claves de configuración durante la importación, útil para mantener ajustes específicos del entorno en producción
- Página de error 500 personalizada con contenido HTML configurable para una experiencia de usuario con marca durante errores del servidor
- Gestión de meta tags para la página principal (título, descripción, palabras clave, meta tags personalizados) y nodos (descripción con soporte de tokens)
- Sistema de menú mejorado con soporte de tokens en títulos y URLs de menú ([current-user:xxx], [site:xxx]), HTML en títulos de menú, atributos de enlace/contenedor (id, class, target) y visibilidad basada en roles
- Clases CSS de block que permiten agregar clases CSS personalizadas a cualquier elemento contenedor de block a través del formulario de configuración de block
- Opción de visualización de menú desplegable que transforma blocks de menú en menús desplegables responsivos solo con CSS con soporte de toggle móvil
- Página independiente de cambio de contraseña que mueve los campos de contraseña del formulario de edición de usuario a una página dedicada /user/{uid}/password con una pestaña de Contraseña
- Opción de registro con contraseña que muestra campos de contraseña en el formulario de registro de usuario en lugar de depender del restablecimiento de contraseña por correo electrónico
- Función eliminar X-Generator que elimina el encabezado HTTP X-Generator y la meta tag Generator para ocultar la plataforma Drupal
- Opción ocultar campo de revisión que oculta el fieldset de información de revisión a todos los usuarios excepto UID 1 para una interfaz de edición más limpia
- Token de imagen de usuario ([current-user:picture] y [current-user:picture:image-style]) para mostrar avatares de usuario en menús
Use Cases
Desarrollo rápido de temas
Habilite el modo de desarrollo para iterar rápidamente en el desarrollo de temas sin limpiar cachés manualmente. El modo dev deshabilita cachés render, page y dynamic page, habilita la depuración de Twig con sugerencias de plantillas en comentarios HTML, y muestra todos los mensajes de error con backtrace. Combinado con la función Mostrar ID de formulario, los desarrolladores pueden identificar fácilmente qué formularios alterar y probar cambios instantáneamente.
Despliegue multi-entorno
Use el indicador de entorno para distinguir claramente entre entornos de desarrollo, staging y producción. Configure texto de indicador diferente para cada entorno y use ignorar importación de configuración para prevenir que configuraciones de modo dev se importen a producción. Mantenga módulos de desarrollo como Devel deshabilitados en producción agregando core.extension:module.devel a la lista de ignorados.
Sincronización de contenido de block entre entornos
Al colocar blocks que están definidos como entidades block_content, la configuración de colocación del block referencia el block por UUID, pero el contenido real se almacena por separado. Habilite la sincronización de contenido, marque blocks específicos para exportar en la página de biblioteca de blocks, luego exporte/importe la configuración normalmente. Ejecute 'Generar contenidos faltantes' en el entorno destino para crear los blocks. Esto resuelve el error 'Este block está roto o falta' común al sincronizar configuraciones.
Flujo de registro amigable para el usuario
Habilite 'Registrar con contraseña' para permitir a los usuarios establecer su contraseña durante el registro en lugar de recibir un correo electrónico con un enlace de inicio de sesión único. Esto es especialmente útil para sitios donde el acceso inmediato es importante. La configuración se integra directamente en la página de configuración de usuario del administrador en /admin/config/people/accounts.
Gestión simplificada de perfil de usuario
Habilite la página de contraseña independiente para mover la funcionalidad de cambio de contraseña a una página dedicada /user/{uid}/password con una pestaña 'Contraseña' en perfiles de usuario. Esto mantiene el formulario principal de edición de usuario más limpio y proporciona una interfaz enfocada para cambios de contraseña con validación adecuada incluyendo verificación de contraseña actual.
Menús desplegables responsivos sin JavaScript
Use la opción de desplegable a nivel de block para blocks de menú para convertir menús estándar en menús desplegables responsivos usando solo CSS. La implementación usa gestión de estado basada en checkbox para toggles móviles, asegurando funcionalidad incluso cuando JavaScript está deshabilitado. Personalice la apariencia anulando los estilos dropdown.css o la plantilla menu.html.twig.
Visibilidad de elementos de menú basada en roles
Use las configuraciones avanzadas de enlace de menú para restringir elementos de menú a roles de usuario específicos. Esto permite crear elementos de menú solo para administradores en la navegación principal o enlaces específicos por rol sin usar módulos de control de acceso. La visibilidad del menú se evalúa en tiempo de renderizado con contextos de caché apropiados.
Contenido de menú dinámico con tokens
Cree menús personalizados usando tokens en títulos y URLs de enlaces de menú. Muestre la imagen del usuario actual en el menú con [current-user:picture:thumbnail], cree un enlace 'Mi Perfil' con /user/[current-user:uid], o muestre el nombre del sitio dinámicamente. El módulo soporta tokens [current-user:xxx], [site:xxx] y [date:xxx] en contenido de menú.
Optimización SEO sin módulos pesados
Use la configuración de meta tags de Mix como alternativa ligera a módulos SEO con todas las funciones. Configure meta tags de página principal incluyendo título con tokens, descripción, palabras clave y meta tags personalizados para verificación de sitio y Open Graph. Para nodos, configure plantillas de descripción usando [node:summary] u otros tokens de nodo para generar meta descripciones automáticamente.
Páginas de error con marca
Reemplace la página de error 500 predeterminada de Drupal con una página personalizada con marca que mantiene la identidad del sitio incluso durante errores inesperados. El contenido de la página de error se almacena en la configuración y puede incluir HTML completo con estilos personalizados. Los detalles del error se agregan basados en el nivel de reporte de errores del sistema, permitiendo a los desarrolladores ver información de depuración mientras los usuarios regulares ven un mensaje amigable.
Prevención de envíos duplicados de formulario
Habilite la función de ocultar botón de envío para prevenir que los usuarios envíen formularios accidentalmente múltiples veces al hacer clic repetidamente en el botón de envío. La biblioteca JavaScript crea un clon deshabilitado del botón y oculta el original después del primer clic, manteniendo la funcionalidad del formulario mientras previene duplicados.
Protección de datos de formulario sin guardar
Habilite la confirmación de formulario sin guardar para advertir a los usuarios cuando intentan navegar fuera de una página con cambios de formulario sin guardar. Esto es particularmente valioso para formularios de edición de contenido donde perder trabajo podría ser frustrante. La función rastrea cambios de estado del formulario y muestra un diálogo de confirmación nativo del navegador.
Tips
- El interruptor de modo de desarrollo es más seguro que editar manualmente settings.php para desarrollo local, ya que almacena la configuración en config y reconstruye automáticamente cachés y contenedores cuando se alterna.
- Use la función de ignorar importación de configuración para mantener configuraciones específicas del entorno como el propio dev_mode, asegurando que las configuraciones de desarrollo nunca se importen accidentalmente a producción.
- La sincronización de contenido soporta entidades block_content, menu_link_content y taxonomy_term. El formato de ID de sincronización es mix.content_sync.{entity_type}.{bundle}.{uuid}.
- Al usar tokens de menú, el módulo automáticamente establece route_name a <none> para enlaces con URLs de token para prevenir errores de enrutamiento. El reemplazo de tokens ocurre en tiempo de renderizado.
- El CSS de menú desplegable usa estado de checkbox (:checked + ul) para toggles móviles, haciéndolo funcionar sin JavaScript. Anule el CSS para estilos personalizados.
- Las clases CSS de block se almacenan en configuraciones de terceros y se limpian apropiadamente cuando están vacías. Múltiples clases pueden separarse con espacios.
- El indicador de entorno usa cache tags (mix:environment-indicator) para que los cambios entre valores no vacíos solo invaliden cachés específicos en lugar de reconstruir todos los cachés.
- Los tokens de meta tags se procesan con filtrado XSS por seguridad. Los meta tags personalizados en la configuración de página principal deben ser elementos meta HTML válidos.
- La página de contraseña independiente respeta tokens de restablecimiento de contraseña de correos electrónicos, permitiendo a los usuarios cambiar la contraseña sin ingresar la contraseña actual al usar el flujo de restablecimiento.
- Por seguridad, considere habilitar 'Eliminar X-Generator' en sitios de producción para evitar publicitar la plataforma CMS, aunque esto es seguridad por oscuridad.
Technical Details
Admin Pages 3
/admin/config/mix
Página de configuración principal del módulo Mix que contiene todos los ajustes primarios organizados en secciones lógicas incluyendo desarrollo, sincronización de contenido, gestión de configuración, páginas de error y SEO.
/admin/config/mix/meta
Configura meta tags para la página principal y páginas de nodos. Esta página puede accederse como modal desde la página principal de configuración de Mix o directamente.
/user/{user}/password
Página independiente de cambio de contraseña que aparece cuando la opción 'Página independiente de cambio de contraseña' está habilitada. Proporciona un formulario dedicado para cambiar la contraseña del usuario con verificación de contraseña actual (omitida para tokens de restablecimiento de contraseña y usuarios administradores).
Hooks 18
hook_form_alter
Adjunta bibliotecas de ocultar botón de envío y confirmación de formulario sin guardar a los formularios. También muestra el ID del formulario cuando show_form_id está habilitado y oculta el campo de revisión cuando está configurado.
hook_form_user_admin_settings_alter
Agrega casilla 'Mostrar campos de contraseña en formulario de registro' al formulario de configuración de administración de usuario.
hook_form_user_register_form_alter
Agrega campos de contraseña al formulario de registro de usuario cuando register_password está habilitado.
hook_form_user_form_alter
Oculta campos de contraseña en el formulario de edición de usuario y redirige a la página de contraseña independiente cuando standalone_password_page está habilitado.
hook_form_block_form_alter
Agrega campo de clase(s) CSS y casilla de menú desplegable (para blocks de menú) a los formularios de configuración de block.
hook_form_menu_link_content_form_alter
Agrega configuraciones avanzadas (roles, atributos de enlace, atributos de contenedor, permitir HTML, token de menú) a los formularios de enlace de menú.
hook_page_top
Agrega banner de indicador de entorno en la parte superior de todas las páginas cuando está configurado.
hook_page_attachments_alter
Elimina system_meta_generator de los adjuntos cuando remove_x_generator está habilitado.
hook_preprocess_html
Agrega meta tags y modifica el título de página para página principal y páginas de nodos basado en configuración de meta.
hook_preprocess_block
Agrega clases CSS personalizadas y funcionalidad desplegable a blocks basado en configuraciones de terceros.
hook_preprocess_menu
Procesa elementos de menú para reemplazar tokens, ocultar elementos basado en restricciones de roles y aplicar atributos de contenedor.
hook_menu_links_discovered_alter
Escanea enlaces de menú en busca de tokens y almacena valores originales en opciones para procesamiento posterior.
hook_link_alter
Reemplaza tokens en URLs de enlaces de menú y permite HTML en títulos de menú.
hook_theme_registry_alter
Registra tema personalizado mix_menu basado en el tema de menú core para funcionalidad desplegable.
hook_token_info
Proporciona tokens [current-user:picture] y [current-user:picture:image-style] para mostrar avatares de usuario.
hook_tokens
Implementa reemplazo de tokens para tokens de imagen de usuario.
hook_block_presave
Limpia configuraciones de terceros vacías antes de guardar la entidad block.
hook_views_pre_render
Agrega IDs de sincronización de contenido a resultados de vista block_content para mostrar en la lista de administración.
Security Notes 5
- La opción 'Permitir HTML' en enlaces de menú debe usarse con cuidado ya que permite HTML sin procesar en títulos de menú. Solo usuarios de confianza deberían tener acceso para editar enlaces de menú con esta opción.
- La sincronización de contenido exporta datos completos de entidad incluyendo todos los campos. Revise el contenido exportado antes de importar para asegurar que ningún dato sensible se transfiera inadvertidamente.
- El contenido de página de error personalizada se renderiza como HTML. Asegúrese de que el contenido configurado no incluya contenido suministrado por el usuario o no confiable.
- El modo de desarrollo deshabilita múltiples capas de caché y habilita reporte de errores verboso. Nunca habilite en entornos de producción ya que expone información detallada de errores.
- La función de ignorar importación de configuración opera en el almacenamiento activo durante la importación. Asegúrese de que la lista de ignorados esté propiamente configurada en cada entorno ya que también está sujeta a ser ignorada.