Links
Notes:
Hyperlinks are essential to connect websites and your content. To create a link, just use the insert link option in word or google doc.
Links can be added across all the default content and the different formatting options.
In Word and Google Docs only absolute links are accepted, which is usually easier to copy paste from your browser. Links are automatically converted to be relative to your site, while external links are kept absolute.
Links are often used beyond text links and reference for example embedded media or referenced fragments that are inlined in the page.
Example:
Content Structure:
Code:
As links are considered Default Content they are styled in project or block CSS code. There is usually no JavaScript code used.
There is no link related styling code in the boilerplate project.
Special Mention: Microsoft Word Online does not allow links on images, so a workaround would be to let authors put a link directly below the image and then wrap it on the client side, e.g.
/**
* 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);
}
});
}
Special Mention: It is recommended to handle certain links that need to be opened in a new window based on whether they are external links or PDFs (for example) on the client side, e.g.
/**
* 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');
}
}
}
});
}