Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

Localizing links

The best practice for localizing the text in a URL is to maintain this text within the content on Google Drive or Microsoft SharePoint. However, you can use functions defined in the scripts/scripts.js file to localize links programmatically.

The decorateLinks function automatically prepends all your content links within Google Drive or Microsoft SharePoint with the root path of each language.

/**
* Decorates links.
* @param {Element} main The main element
*/
export function decorateLinks(main) {
const root = getRootPath();
if (root === '/') return;
const links = main.querySelectorAll('a');
links.forEach((link) => {
const url = new URL(link.href, window.location.origin);
const { pathname } = url;
// If the link is already localized, do nothing
if (pathname.startsWith('//') || pathname.startsWith(root)) return;
if (
link.href.startsWith('/')
|| link.href.startsWith(window.location.origin)
) {
link.href = `${root}${url.pathname.substring(1)}${url.search}${url.hash}`;
}
});
}

This function is disabled by default. To enable the function, add it to your main element. The boilerplate handles it within scripts/scripts.js as follows.

/**
* Decorates the main element.
* @param {Element} main The main element
*/
// eslint-disable-next-line import/prefer-default-export
export function decorateMain(main) {
// hopefully forward compatible button decoration
decorateButtons(main);
decorateIcons(main);
buildAutoBlocks(main);
decorateSections(main);
decorateBlocks(main);
// decorateLinks(main); // author can decide when to localize links
}

The rootLink function prepends each language’s root path to the link it receives. Use it within a block to localize links coming from a drop-in for loading scripts, styles, or links to other pages within a drop-in. This approach is necessary for maintaining consistency across different languages and store views.

/**
* Decorates links.
* @param {string} [url] url to be localized
*/
export function rootLink(link) {
const root = getRootPath().replace(/\/$/, '');
// If the link is already localized, do nothing
if (link.startsWith(root)) return link;
return `${root}${link}`;
}