Switching language is supported by Arch, but after switch is clicked, you still have to choose which language to switch to. This is reasonable and understandable, but can be unnecessary when there are only two languages. So a slight change is made.
If there are only two languages in _config.yml, just switch to another language when switch is clicked. Otherwise, languages different from current language are displayed, and when a language is clicked, switch to that language.
Implement
Replace themes/arch/layout/_partial/switchlang.ejs with following content.
Translate tip is not a built-in feature of Arch. Changes have to made to make it work.
If post or page is translated from another language, use origin_lang: xxx in front matter to show the translate tip which guides user to the original page.
Second, add following code to <div class="markdown-body"> in theme/arch/layout/post.ejs.
1 2 3 4 5 6 7 8 9 10
<!-- add translate tip and navigate to original language --> <% if (page.origin_lang && page.origin_lang !== page.lang) { %> <% let currentPath = page.path && page.path.indexOf('/') >= 0 ? page.path.substr(page.path.indexOf('/')) : '' %> <blockquote> <p> <%- __('TranslateTip') %> <a href="<%- url_for('/' + page.origin_lang + currentPath) %>"><%- __('OriginTip') %></a> </p> </blockquote> <% } %>
I add it to /about page and all post.
Search
Search is supported in Arch, if you want to use it, just following usage below to enable it.
However, I find there are still some improvements can be made.
When search icon is clicked, search input is not focused, and user have to click input to activate getSearchFile.
Event listener can be added to improve UX, for example, when / is clicked, open search modal and focus search input; when ESC is clicked, close search modal.
So I make some changes to search.ejs to implement these improvements. If you're fine with these little defects, changes below is not necessary for you.
// themes/arch/layout/_partial/search.ejs let isSearchFirst = true; inputArea.onclick = function () { doSearchFileOnce() }
// only searchFile once functiondoSearchFileOnce() { if (isSearchFirst) { getSearchFile() isSearchFirst = false; } }
functionopenOrHideSearchContent() { let isHidden = searchOverlayArea.classList.contains('hidden') if (isHidden) { searchOverlayArea.classList.remove('hidden') document.body.classList.add('hidden') setTimeout(() => { // auto focus and doSearchFile inputArea.focus() doSearchFileOnce() }, 100); } else { searchOverlayArea.classList.add('hidden') document.body.classList.remove('hidden') } }
document.addEventListener('keydown', function (event) { // if the search content is open, pressing ESC will close it if (event.keyCode === 27 && !searchOverlayArea.classList.contains('hidden')) { openOrHideSearchContent() return; } // if the search content is closed, pressing '/' will open it and focus on the input and build search index if (event.keyCode === 191 && searchOverlayArea.classList.contains('hidden')) { openOrHideSearchContent() } }, false);
Pin
Pin is supported in Arch, but doesn't work. Make sure you use sticky: xxx in front matter and modify item.top to item.sticky in theme/arch/layout/index.ejs.
