Vínculos
- Temas:
- Edge Delivery Services
Notas:
Los hipervínculos son esenciales para conectar sitios web y contenido. Para crear un vínculo, solo tiene que utilizar la opción insert link en word o google doc.
Se pueden agregar vínculos en todo el contenido predeterminado y en las distintas opciones de formato.
En Word y Google Docs solo se aceptan vínculos absolutos, lo que generalmente facilita copiar y pegar elementos desde el explorador. Los vínculos se convierten automáticamente en relación con el sitio, mientras que los vínculos externos se mantienen absolutos.
Los vínculos suelen utilizarse más allá de los vínculos de texto y hacer referencia, por ejemplo, a medios incrustados o fragmentos referenciados insertados en la página.
Ejemplo:
Estructura de contenido:
Código:
Como los vínculos se consideran Contenido predeterminado, se les aplica estilo en el código CSS de proyecto o de bloque. Normalmente no se utiliza ningún código JavaScript.
No hay ningún código de estilo relacionado con vínculos en el proyecto de plantillas.
Mención especial: Microsoft Word Online no permite vínculos en imágenes, por lo que una solución sería permitir que los autores coloquen un vínculo directamente debajo de la imagen y lo ajusten al lado del cliente, p. ej.
/**
* Wraps images followed by links within a matching <a> tag.
* @param {Element} container The container element
*/
function wrapImgsInLinks(container) {
const pictures = container.querySelectorAll('picture');
pictures.forEach((pic) => {
const link = pic.nextElementSibling;
if (link && link.tagName === 'A' && link.href) {
link.innerHTML = pic.outerHTML;
pic.replaceWith(link);
}
});
}
Mención especial: Se recomienda administrar ciertos vínculos que deben abrirse en una nueva ventana en función de si son vínculos externos o PDF (por ejemplo) en el lado del cliente, p. ej.
/**
* Handles external links and PDFs to be opened in a new tab/window
* @param {Element} main The main element
*/
export function decorateExternalLinks(main) {
main.querySelectorAll('a').forEach((a) => {
const href = a.getAttribute('href');
if (href) {
const extension = href.split('.').pop().trim();
if (!href.startsWith('/')
&& !href.startsWith('#')) {
if (!href.includes('xyz.com') || (extension === 'pdf')) {
a.setAttribute('target', '_blank');
}
}
}
});
}