arch主题优化记录

2025-08-15 #hexo #arch #UX

该页面由AI翻译并经过人工校对，你可能想要查看原文

切换语言

Arch 支持切换语言，但点击切换按钮后，您仍然需要选择要切换到的语言。这合理且易于理解，但在只有两种语言的情况下可能没有必要。因此，我做了一些小改动。

如果 _config.yml 文件中只有两种语言，则点击切换按钮后会切换到另一种语言。否则，系统会显示与当前语言不同的语言，并在点击某种语言时切换到该语言。

实现

将 themes/arch/layout/_partial/switchlang.ejs 替换为以下内容。

<% let currentPath = page.path && page.path.indexOf('/') >= 0 ? page.path.substr(page.path.indexOf('/')) : '' %>
<!-- filter lang different from page.lang -->
<% let otherLangs = config.language.filter((lang) => lang && lang !== 'default' && lang !== page.lang) %>
<div class="switchlang-icon tools-bar-item" title="Switch a language">  
<% if (otherLangs.length === 1) { %>
  <a class="lang-item" href="<%- url_for('/' + otherLangs[0] + currentPath) %>" title="<%- __(otherLangs[0]) %>">
    <i class="icon-lang-switcher">
      <svg t="1670338371149" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1377" width="16" height="16"><path d="M890.688 576h-124.672c-6.2912 100.928-27.264 192.7296-58.5216 266.5792 95.36-56.512 164.16-153.1072 183.1936-266.5792z m0-128c-19.0336-113.472-87.8336-210.0672-183.1936-266.5792 31.2512 73.856 52.2304 165.6576 58.528 266.5792h124.672zM133.312 448h124.672c6.2912-100.928 27.264-192.7296 58.5216-266.5792C221.1456 237.9328 152.3456 334.528 133.312 448z m0 128c19.0336 113.472 87.8336 210.0672 183.1936 266.5792-31.2512-73.856-52.2304-165.6576-58.528-266.5792H133.312z m504.416 0h-251.456c6.6944 93.6 27.8848 178.176 59.2 240.7936 16.0448 32.1088 33.4656 55.6416 49.5488 69.248 5.5488 4.6912 10.2336 7.6032 13.8688 9.088 1.7024 0.704 2.528 0.8704 3.1104 0.8704 0.576 0 1.408-0.1664 3.1104-0.864 3.6352-1.4912 8.32-4.4032 13.8688-9.0944 16.0832-13.6064 33.504-37.1392 49.5552-69.248 31.3088-62.6176 52.4992-147.1936 59.2-240.7936z m0-128c-6.6944-93.6-27.8848-178.176-59.2-240.7936-16.0448-32.1088-33.4656-55.6416-49.5488-69.248-5.5488-4.6912-10.2336-7.6032-13.8688-9.088-1.7024-0.704-2.528-0.8704-3.1104-0.8704-0.576 0-1.408 0.1664-3.1104 0.864-3.6352 1.4912-8.32 4.4032-13.8688 9.0944-16.0832 13.6064-33.504 37.1392-49.5552 69.248-31.3088 62.6176-52.4992 147.1936-59.2 240.7936h251.4624zM512 1024c-282.7712 0-512-229.2288-512-512S229.2288 0 512 0s512 229.2288 512 512-229.2288 512-512 512z" p-id="1378" fill="#666666"></path></svg>
    </i>
  </a>
<% } else if (otherLangs.length) { %>
  <a href="javascript: void(0)" id="switchlang">
    <i class="icon-lang-switcher">
      <svg t="1670338371149" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1377" width="16" height="16"><path d="M890.688 576h-124.672c-6.2912 100.928-27.264 192.7296-58.5216 266.5792 95.36-56.512 164.16-153.1072 183.1936-266.5792z m0-128c-19.0336-113.472-87.8336-210.0672-183.1936-266.5792 31.2512 73.856 52.2304 165.6576 58.528 266.5792h124.672zM133.312 448h124.672c6.2912-100.928 27.264-192.7296 58.5216-266.5792C221.1456 237.9328 152.3456 334.528 133.312 448z m0 128c19.0336 113.472 87.8336 210.0672 183.1936 266.5792-31.2512-73.856-52.2304-165.6576-58.528-266.5792H133.312z m504.416 0h-251.456c6.6944 93.6 27.8848 178.176 59.2 240.7936 16.0448 32.1088 33.4656 55.6416 49.5488 69.248 5.5488 4.6912 10.2336 7.6032 13.8688 9.088 1.7024 0.704 2.528 0.8704 3.1104 0.8704 0.576 0 1.408-0.1664 3.1104-0.864 3.6352-1.4912 8.32-4.4032 13.8688-9.0944 16.0832-13.6064 33.504-37.1392 49.5552-69.248 31.3088-62.6176 52.4992-147.1936 59.2-240.7936z m0-128c-6.6944-93.6-27.8848-178.176-59.2-240.7936-16.0448-32.1088-33.4656-55.6416-49.5488-69.248-5.5488-4.6912-10.2336-7.6032-13.8688-9.088-1.7024-0.704-2.528-0.8704-3.1104-0.8704-0.576 0-1.408 0.1664-3.1104 0.864-3.6352 1.4912-8.32 4.4032-13.8688 9.0944-16.0832 13.6064-33.504 37.1392-49.5552 69.248-31.3088 62.6176-52.4992 147.1936-59.2 240.7936h251.4624zM512 1024c-282.7712 0-512-229.2288-512-512S229.2288 0 512 0s512 229.2288 512 512-229.2288 512-512 512z" p-id="1378" fill="#666666"></path></svg>
    </i>
  </a>
  <div class="switchlang-content hidden">
    <% otherLangs.forEach(function(item) { %>
        <a class="lang-item" href="<%- url_for('/' + item + currentPath) %>" title="<%- item %>">
          <%= __(item) %>
        </a>
    <% }) %>
  </div>
  <%- js(['/js/switchlang.js']) %>
<% } %>
</div>

翻译提示

翻译提示不是Arch的内置功能。需要进行一些修改才能使其正常工作。

如果文章或页面是从其他语言翻译而来的，请在首页使用 origin_lang: xxx 来显示翻译提示，引导用户访问原始页面。

使用

---
title: online 404 error troubleshooting
date: 2025-07-27 17:41:21
lang: en
origin_lang: zh-CN
sticky: 2
---

实现

首先，将翻译添加到 theme/arch/ languages/[lang].yml。

1
2
3

# themes/arch/languages/en.yml
TranslateTip: This page was translated by AI and proofread by humans. You may want to
OriginTip: view in original language.

1
2
3

# themes/arch/languages/zh-CN.yml
TranslateTip: 该页面由AI翻译并经过人工校对，你可能想要
OriginTip: 查看原文

其次，将以下代码添加到 theme/arch/layout/post.ejs 的 <div class="markdown-body"> 中。

<!-- 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>
<% } %>

我将其添加到 /about 页面和所有帖子。

搜索

Arch 支持搜索功能，如果您想使用，只需按照以下使用方法启用即可。

然而，我发现仍有一些改进空间。

点击搜索图标时，搜索输入框不会获得焦点，用户必须点击输入框才能激活 getSearchFile 方法。
可以添加事件监听器来提升用户体验，例如，点击 / 时，打开搜索模态框并聚焦搜索输入框；点击 ESC 时，关闭搜索模态框。

因此，我对 search.ejs 进行了一些修改以实现这些改进。如果您不介意这些小瑕疵，则无需进行以下更改。

用法

# _config.yml
# https://github.com/wzpan/hexo-generator-search
search:
  path: search.xml
  field: all
  content: true

# _config.arch.yml
# Article Content Search / 文章搜索
search:
  enable: true
  placeholder: search...

改进

// themes/arch/layout/_partial/search.ejs
let isSearchFirst = true;
inputArea.onclick = function () {
  doSearchFileOnce()
}

// only searchFile once
function doSearchFileOnce() {
  if (isSearchFirst) {
    getSearchFile()
    isSearchFirst = false;
  }
}

function openOrHideSearchContent() {
  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);

固定

Arch 支持固定功能，但无法使用。请确保在 front matter 中使用 sticky: xxx，并在 theme/arch/layout/index.ejs 中将 item.top 修改为 item.sticky。

用法

---
title: online 404 error troubleshooting
date: 2025-07-27 17:41:21
lang: en
origin_lang: zh-CN
sticky: 2
---

2025-08-15 #hexo #arch #UX