External Links
Añade iconos visuales a enlaces externos, enlaces mailto y enlaces telefónicos en tu sitio Drupal utilizando JavaScript.
extlink
Install
composer require 'drupal/extlink:^2.0'
Overview
El módulo External Links proporciona un enfoque simple pero potente para diferenciar visualmente los enlaces externos de los internos en tu sitio web Drupal. Utilizando JavaScript, detecta y marca automáticamente los enlaces a sitios web externos, direcciones de correo electrónico (mailto:) y números de teléfono (tel:) con iconos distintivos.
Esta implementación del lado del cliente significa que los iconos solo se muestran a usuarios con JavaScript habilitado, asegurando una mejora progresiva mientras se mantiene la accesibilidad a través de etiquetas ARIA apropiadas. El módulo ofrece amplias opciones de configuración incluyendo ubicación de iconos, soporte para Font Awesome, modificaciones de comportamiento de enlaces (target="_blank", rel="nofollow", rel="noreferrer"), y control granular sobre qué enlaces se procesan mediante selectores CSS y patrones de expresiones regulares.
External Links es particularmente útil para sitios web gubernamentales, educativos y corporativos que necesitan indicar claramente cuando los usuarios abandonan el sitio, y puede mostrar diálogos de advertencia antes de navegar a destinos externos.
Features
- Añade automáticamente iconos visuales (SVG o Font Awesome) a enlaces externos, enlaces mailto y enlaces tel
- Abre enlaces externos en nuevas ventanas/pestañas con comportamiento configurable del atributo target
- Añade atributos rel="nofollow" y rel="noreferrer" para control de SEO y privacidad
- Muestra un diálogo de advertencia emergente personalizable antes de navegar a sitios externos
- Soporta iconos de Font Awesome como alternativa a los iconos SVG predeterminados
- Ubicación de iconos configurable: antes, al inicio, al final, o después del texto del enlace
- Coincidencia de patrones usando expresiones regulares para incluir o excluir URLs específicas
- Filtrado basado en selectores CSS para apuntar o excluir regiones específicas de la página
- Trata los subdominios como enlaces internos para identificación consistente del sitio
- Soporta lista de dominios permitidos para incluir sitios externos de confianza
- Previene la separación de texto manteniendo la última palabra junto con el icono
- Oculta iconos decorativos de los lectores de pantalla para mejorar la accesibilidad
- Proporciona soporte de migración desde versiones de Drupal 6 y 7
- Opción de archivo JS externo para reducir el tamaño del script inline en sitios con muchos patrones
- Clases CSS personalizables para flexibilidad adicional de estilos
Use Cases
Cumplimiento de sitios web gubernamentales
Los sitios web gubernamentales frecuentemente requieren indicación clara cuando los usuarios abandonan dominios oficiales. Configura External Links para mostrar iconos en todos los enlaces externos, habilitar advertencias emergentes, y añadir rel="noreferrer" para proteger la privacidad del usuario.
Manejo de enlaces de afiliados en comercio electrónico
Las tiendas en línea pueden usar coincidencia de patrones para excluir dominios de socios afiliados de confianza de los indicadores de enlaces externos mientras marcan todos los demás enlaces externos. Usa el ajuste allowed_domains para incluir sitios de socios en la lista blanca.
Intranet con enlaces a recursos externos
Las intranets corporativas pueden usar filtrado de selectores CSS para mostrar iconos externos solo en áreas de contenido mientras excluyen menús de navegación y enlaces del pie de página que pueden contener recursos externos.
Sitios de contenido optimizados para SEO
Los editores de contenido pueden habilitar rel="nofollow" en enlaces externos para controlar la distribución de autoridad de enlaces, mientras usan el patrón de exclusión para preservar los atributos follow para sitios de socios de confianza.
Mejora de accesibilidad
Habilita etiquetas de lector de pantalla y oculta iconos decorativos cuando sea apropiado para asegurar que los usuarios con discapacidad visual entiendan los destinos de los enlaces sin anuncios redundantes.
Redes multisitio
Las organizaciones que ejecutan múltiples sitios Drupal en diferentes subdominios pueden habilitar la opción de exclusión de subdominios para tratar todos los sitios de la red como internos, evitando que los enlaces entre sitios muestren indicadores externos.
Tips
- Usa selectores CSS para excluir menús de navegación y pies de página donde los indicadores externos pueden ser visualmente desordenados
- Habilita la opción de archivo JS externo en sitios con muchos patrones de exclusión para reducir el peso de la página
- Sobrescribe las funciones Drupal.theme en el JavaScript de tu tema para personalizar completamente la apariencia de los iconos
- Añade clases CSS personalizadas para estilizar enlaces externos de manera diferente según tus requisitos de diseño
- Usa el ajuste allowed_domains para sitios de socios de confianza en lugar de patrones regex complejos
- Prueba la coincidencia de patrones en la consola de desarrollador del navegador usando: new RegExp('tu-patron', 'i').test('url-de-prueba')
Technical Details
Admin Pages 1
/admin/config/user-interface/extlink
Configura cómo se muestran y comportan los enlaces externos, enlaces mailto y enlaces telefónicos en todo tu sitio. Controla la apariencia de iconos, atributos de enlaces, mensajes de advertencia y opciones de filtrado.
Permissions 1
Hooks 2
hook_extlink_settings_alter
Permite a los módulos modificar todos los ajustes de External Links antes de que se pasen a JavaScript.
hook_extlink_css_exclude_alter
Permite a los módulos modificar específicamente la cadena del selector CSS de exclusión.
Troubleshooting 6
Asegúrate de que JavaScript esté habilitado en el navegador. Verifica que el módulo no esté deshabilitado en rutas de administración si estás probando en páginas de administración. Verifica que los selectores CSS no estén excluyendo tu área de contenido. Limpia las cachés de Drupal después de los cambios de configuración.
Verifica el ajuste del patrón extlink_include - puede estar coincidiendo incorrectamente con URLs internas. Verifica que allowed_domains no tenga errores tipográficos. Habilita 'Excluir enlaces con el mismo dominio principal' para el manejo de subdominios.
Asegúrate de que la biblioteca Font Awesome esté correctamente cargada en tu sitio antes de habilitar esta opción. Verifica que las clases correctas de versión de Font Awesome estén configuradas (FA 4.x usa 'fa fa-external-link', FA 5+ usa 'fas fa-external-link-alt').
Verifica que la opción 'Mostrar una advertencia emergente' esté habilitada. Revisa la consola del navegador en busca de errores de JavaScript. Asegúrate de que ningún otro JavaScript esté interfiriendo con los manejadores de clic.
Después de habilitar la opción de archivo JS externo, limpia todas las cachés. Verifica que /extlink/settings.js sea accesible (no bloqueado por reglas de seguridad). Verifica que el suscriptor de eventos del módulo esté limpiando correctamente los assets en caché.
Recuerda que los patrones son expresiones regulares de JavaScript. Los caracteres especiales deben escaparse con barras invertidas (ej., ejemplo\.com no ejemplo.com). Prueba los patrones en la consola del navegador antes de aplicarlos.
Security Notes 5
- El permiso 'administer extlink' está marcado como 'restringir acceso' y solo debe otorgarse a administradores de confianza
- El atributo noreferrer está habilitado por defecto para proteger la privacidad del usuario al no enviar información del referente a sitios externos
- Al habilitar 'abrir en nueva ventana', el módulo añade automáticamente rel="noopener" para prevenir ataques de reverse tabnapping
- El texto de alerta es sanitizado usando Xss::filterAdmin() para prevenir vulnerabilidades XSS en mensajes de advertencia
- Todas las etiquetas y patrones proporcionados por el usuario son escapados apropiadamente antes de ser enviados a JavaScript