diff --git a/index.html b/index.html index 17d28d098..6bed6543f 100644 --- a/index.html +++ b/index.html @@ -89,6 +89,12 @@ }, pathNamespaces: ['/es', '/de-de', '/ru-ru', '/zh-cn'], }, + skipLink: { + '/es/': 'Saltar al contenido principal', + '/de-de/': 'Ga naar de hoofdinhoud', + '/ru-ru/': 'Перейти к основному содержанию', + '/zh-cn/': '跳到主要内容', + }, vueComponents: { 'button-counter': { template: /* html */ ``, diff --git a/src/core/render/index.js b/src/core/render/index.js index 62b68030b..6b49f7c87 100644 --- a/src/core/render/index.js +++ b/src/core/render/index.js @@ -242,6 +242,26 @@ export function Render(Base) { el.setAttribute('href', nameLink[match]); } } + + #renderSkipLink(vm) { + const { skipLink } = vm.config; + + if (skipLink !== false) { + const el = dom.getNode('#skip-to-content'); + const text = + typeof skipLink === 'string' + ? skipLink + : skipLink?.[vm.route.path] || 'Skip to main content'; + + if (el) { + el.innerHTML = text; + } else { + const html = ``; + dom.body.insertAdjacentHTML('afterbegin', html); + } + } + } + _renderTo(el, content, replace) { const node = dom.getNode(el); if (node) { @@ -396,6 +416,9 @@ export function Render(Base) { _updateRender() { // Render name link this.#renderNameLink(this); + + // Render skip link + this.#renderSkipLink(this); } initRender() { @@ -414,8 +437,6 @@ export function Render(Base) { if (el) { let html = ''; - html += tpl.skipLink(); - if (config.repo) { html += tpl.corner(config.repo, config.cornerExternalLinkTarget); } @@ -450,8 +471,7 @@ export function Render(Base) { if (isMergedSidebar) { dom.find('.sidebar').prepend(navEl); } else { - dom.find('#skip-to-content').after(navEl); - + dom.body.prepend(navEl); navEl.classList.add('app-nav'); navEl.classList.toggle('no-badge', !config.repo); } diff --git a/src/core/render/tpl.js b/src/core/render/tpl.js index b50895d2a..b4451ef3e 100644 --- a/src/core/render/tpl.js +++ b/src/core/render/tpl.js @@ -122,15 +122,3 @@ export function helper(className, content) { export function theme(color) { return /* html */ ``; } - -/** - * Renders skip link - * @returns {String} HTML of the skip link - */ -export function skipLink() { - return /* html */ ` - - `; -}