快捷搜索测试

Posted on Edited on

选中并点击右上角放大镜即可搜索

红楼梦

快捷搜索，不是自动搜索，因为快捷是需要注意力主导的，自动是注意力在防备上面

已经将document.add…代码去掉<script>，然后vim ./source/js/keyword-search.js（放在主题目录 /themes/next/source/js/：）

然后在 themes/next/_layout.njk 底部 </body> 前：

1
<script src="{{ url_for('/js/keyword-search.js') }}"></script>

备注：暂时用这种格式，慢慢打磨

可以实现点击自动复制，然后点击搜索按钮即可

存在的问题，不考虑这个代码的功能，直接两次点击搜索框，第二次会无法谈出搜索框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
document.addEventListener('DOMContentLoaded', () => {
  // 给所有关键词添加点击事件
  const keywords = document.querySelectorAll('.post-body code, .post-body a[data-caption]');
  keywords.forEach(keyword => {
    keyword.style.cursor = 'pointer';
    keyword.addEventListener('click', () => {

      // 1️⃣ 复制关键词到剪贴板
      const textToCopy = keyword.textContent || keyword.getAttribute('data-caption');
      navigator.clipboard.writeText(textToCopy)
        .then(() => console.log(`已复制: ${textToCopy}`))
        .catch(err => console.error('复制失败:', err));

      const searchPopup = document.querySelector('.search-popup');
      const searchInput = document.querySelector('.search-input');
      if (!searchPopup || !searchInput) return;

      // 显示搜索弹窗
      searchPopup.style.display = 'block';
      searchPopup.classList.add('active');
      // 填入关键词
      searchInput.value = textToCopy;
      // 聚焦输入框
      searchInput.focus();
      // 如果你的搜索是通过 input 事件触发，可以触发事件
      const event = new Event('input', { bubbles: true });
      searchInput.dispatchEvent(event);

    });
  });

  // 可选：关闭按钮
  const closeBtn = document.querySelector('.popup-btn-close');
  if (closeBtn) {
    closeBtn.addEventListener('click', () => {
      const searchPopup = document.querySelector('.search-popup');
      searchPopup.style.display = 'none';
      searchPopup.classList.remove('active');
    });
  }
});
</script>

第二版

红楼梦

黛玉

移除了复制功能

可以实现点击，然后点击搜索按钮即可

已解决：存在的问题，不考虑这个代码的功能，直接两次点击搜索框，第二次会无法谈出搜索框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
document.addEventListener('DOMContentLoaded', () => {
  // 给所有关键词添加点击事件
  const keywords = document.querySelectorAll('.post-body code, .post-body a[data-caption]');

  keywords.forEach(keyword => {
    keyword.style.cursor = 'pointer';

    keyword.addEventListener('click', () => {
      const text = keyword.textContent || keyword.getAttribute('data-caption');

      // 兼容 NexT Local Search
      if (window.NEXT_LOCAL_SEARCH) {
        // 打开搜索弹窗
        window.NEXT_LOCAL_SEARCH.open?.();

        // 填入关键词并搜索
        window.NEXT_LOCAL_SEARCH.search?.(text);
        return;
      }

      // 如果没有 NEXT_LOCAL_SEARCH 对象，回退到手动方式（可选）
      const searchPopup = document.querySelector('.search-popup');
      const searchInput = document.querySelector('.search-input');
      if (!searchPopup || !searchInput) return;

      searchPopup.style.display = 'block';
      searchPopup.classList.add('active');
      searchInput.value = text;
      searchInput.focus();
      searchInput.dispatchEvent(new Event('input', { bubbles: true }));
    });
  });
});
</script>

样式可以进一步打磨：

在主题自定义 CSS 文件 /themes/next/source/css/_custom/custom.styl：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.keyword {
  color: #007acc;
  cursor: pointer;
  border-bottom: 1px dashed #007acc;
  transition: color 0.2s, border-color 0.2s;
}

.keyword:hover {
  color: #ff4081;
  border-color: #ff4081;
}

#keyword-popup .results li a {
  text-decoration: none;
  color: #333;
  transition: color 0.2s;
}

#keyword-popup .results li a:hover {
  color: #007acc;
}