support multilingual search
This commit is contained in:
geekifan
@ -1,207 +0,0 @@
|
||||
// Configuration
|
||||
const DEFAULT_CONFIG = {
|
||||
search: {
|
||||
minChars: 2, // Minimum characters before searching
|
||||
maxResults: 5, // Maximum number of results to show
|
||||
fields: { // Fields to search through
|
||||
title: true, // Allow searching in title
|
||||
description: true, // Allow searching in description
|
||||
section: true // Allow searching in section
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
class FastSearch {
|
||||
constructor({
|
||||
searchInput, resultsContainer, json,
|
||||
searchResultTemplate = null,
|
||||
noResultsText = null,
|
||||
}) {
|
||||
this.searchInput = searchInput;
|
||||
this.resultsContainer = resultsContainer;
|
||||
this.json = json;
|
||||
this.searchResultTemplate = searchResultTemplate;
|
||||
this.noResultsText = noResultsText;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.loadSearchIndex();
|
||||
// this.initShortcutListener();
|
||||
this.searchInput.addEventListener('input', (event) => {
|
||||
if (!this.searchIndex) {
|
||||
this.resultsContainer.innerHTML = '<li class="search-message">Loading search index...</li>';
|
||||
return;
|
||||
}
|
||||
this.performSearch(this.searchInput.value);
|
||||
});
|
||||
}
|
||||
|
||||
// Load the search index
|
||||
async loadSearchIndex() {
|
||||
try {
|
||||
const response = await fetch(this.json);
|
||||
if (!response.ok) throw new Error('Failed to load search index');
|
||||
const data = await response.json();
|
||||
|
||||
this.searchIndex = data.map(item => ({
|
||||
...item,
|
||||
searchableTitle: item.title?.toLowerCase() || '',
|
||||
searchableDesc: item.desc?.toLowerCase() || '',
|
||||
searchableSection: item.section?.toLowerCase() || ''
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('Error loading search index:', error);
|
||||
this.resultsContainer.innerHTML = '<li class="search-message">Error loading search index...</li>';
|
||||
}
|
||||
}
|
||||
|
||||
escapeHtml(unsafe) {
|
||||
if (!unsafe) return '';
|
||||
return unsafe
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
|
||||
// Simple fuzzy match for single words
|
||||
simpleFuzzyMatch(text, term) {
|
||||
if (text.includes(term)) return true;
|
||||
if (term.length < 3) return false;
|
||||
|
||||
let matches = 0;
|
||||
let lastMatchIndex = -1;
|
||||
|
||||
for (let i = 0; i < term.length; i++) {
|
||||
const found = text.indexOf(term[i], lastMatchIndex + 1);
|
||||
if (found > -1) {
|
||||
matches++;
|
||||
lastMatchIndex = found;
|
||||
}
|
||||
}
|
||||
|
||||
return matches === term.length;
|
||||
}
|
||||
|
||||
// Check if keyboard event matches shortcut config
|
||||
matchesShortcut(event, shortcutConfig) {
|
||||
return event.key === shortcutConfig.key &&
|
||||
event.metaKey === shortcutConfig.metaKey &&
|
||||
event.altKey === shortcutConfig.altKey &&
|
||||
event.ctrlKey === shortcutConfig.ctrlKey &&
|
||||
event.shiftKey === shortcutConfig.shiftKey;
|
||||
}
|
||||
|
||||
initShortcutListener() {
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', (event) => {
|
||||
// ESC to close search
|
||||
if (event.key === 'Escape' && this.searchInput.focus) {
|
||||
this.searchInput.blur();
|
||||
this.searchInput.value = '';
|
||||
this.resultsContainer.innerHTML = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
performSearch(term) {
|
||||
term = term.toLowerCase().trim();
|
||||
|
||||
if (!term || !this.searchIndex) {
|
||||
this.resultsContainer.innerHTML = '';
|
||||
let resultsAvailable = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Split search into terms
|
||||
const searchTerms = term.split(/\s+/).filter(t => t.length > 0);
|
||||
|
||||
// Search with scoring
|
||||
const results = this.searchIndex
|
||||
.map(item => {
|
||||
let score = 0;
|
||||
const matchesAllTerms = searchTerms.every(term => {
|
||||
let matched = false;
|
||||
|
||||
// Title matches (weighted higher)
|
||||
if (DEFAULT_CONFIG.search.fields.title) {
|
||||
if (item.searchableTitle.startsWith(term)) {
|
||||
score += 3; // Highest score for prefix matches in title
|
||||
matched = true;
|
||||
} else if (this.simpleFuzzyMatch(item.searchableTitle, term)) {
|
||||
score += 2; // Good score for fuzzy matches in title
|
||||
matched = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Other field matches
|
||||
if (!matched) {
|
||||
if (DEFAULT_CONFIG.search.fields.description && item.searchableDesc.includes(term)) {
|
||||
score += 0.5; // Lower score for description matches
|
||||
matched = true;
|
||||
}
|
||||
if (DEFAULT_CONFIG.search.fields.section && item.searchableSection.includes(term)) {
|
||||
score += 0.5; // Lower score for section matches
|
||||
matched = true;
|
||||
}
|
||||
}
|
||||
|
||||
return matched;
|
||||
});
|
||||
|
||||
return {
|
||||
item,
|
||||
score: matchesAllTerms ? score : 0
|
||||
};
|
||||
})
|
||||
.filter(result => result.score > 0)
|
||||
.sort((a, b) => b.score - a.score)
|
||||
.slice(0, DEFAULT_CONFIG.search.maxResults)
|
||||
.map(result => result.item);
|
||||
|
||||
let resultsAvailable = results.length > 0;
|
||||
|
||||
if (!resultsAvailable) {
|
||||
this.resultsContainer.innerHTML = '<p class="mt-5">Oops! No results found.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const searchItems = results.map( (item) => {
|
||||
let categories = '';
|
||||
let tags = '';
|
||||
if (item.categories) {
|
||||
categories = item.categories.join(', ');
|
||||
categories = `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${categories}</div>`;
|
||||
}
|
||||
if (item.tags) {
|
||||
tags = item.tags.join(', ');
|
||||
tags = `<div><i class="fa fa-tag fa-fw"></i>${tags}</div>`
|
||||
}
|
||||
return `
|
||||
<article class="px-1 px-sm-2 px-lg-4 px-xl-0">
|
||||
<header>
|
||||
<h2><a href="${this.escapeHtml(item.permalink)}">${this.escapeHtml(item.title)}</a></h2>
|
||||
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
|
||||
${categories}
|
||||
${tags}
|
||||
</div>
|
||||
</header>
|
||||
<p>${this.escapeHtml(item.contents)}</p>
|
||||
</article>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
this.resultsContainer.innerHTML = searchItems;
|
||||
}
|
||||
}
|
||||
|
||||
const search = new FastSearch({
|
||||
searchInput: document.getElementById('search-input'),
|
||||
resultsContainer: document.getElementById('search-results'),
|
||||
json: '/index.json'
|
||||
});
|
||||
@ -6,7 +6,6 @@
|
||||
-}}
|
||||
{{- $themeOpts := merge $jsOpts (dict "global" "Theme") -}}
|
||||
{{- $theme := resources.Get "js/modules/theme.js" | js.Build $themeOpts -}}
|
||||
{{- $search := resources.Get "js/search.js" | js.Build $jsOpts -}}
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
|
||||
@ -78,7 +77,6 @@
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="{{ $theme.RelPermalink }}"></script>
|
||||
<script defer src="{{ $search.RelPermalink }}"></script>
|
||||
|
||||
{{ partial "js-selector.html" . }}
|
||||
|
||||
|
||||
@ -6,3 +6,241 @@
|
||||
<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const DEFAULT_CONFIG = {
|
||||
search: {
|
||||
minChars: 1, // 最小字符数
|
||||
maxResults: 5, // 最大结果数
|
||||
fields: { // 搜索字段
|
||||
title: true,
|
||||
description: true,
|
||||
section: true,
|
||||
contents: true
|
||||
},
|
||||
// 简化搜索配置
|
||||
strictMode: true // 严格模式：只返回精确匹配结果
|
||||
}
|
||||
};
|
||||
|
||||
class FastSearch {
|
||||
constructor({
|
||||
searchInput, resultsContainer, json,
|
||||
searchResultTemplate = null,
|
||||
noResultsText = null,
|
||||
}) {
|
||||
this.searchInput = searchInput;
|
||||
this.resultsContainer = resultsContainer;
|
||||
this.json = json;
|
||||
this.searchResultTemplate = searchResultTemplate;
|
||||
this.noResultsText = noResultsText;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.loadSearchIndex();
|
||||
this.searchInput.addEventListener('input', (event) => {
|
||||
if (!this.searchIndex) {
|
||||
this.resultsContainer.innerHTML = '<li class="search-message">Loading search index...</li>';
|
||||
return;
|
||||
}
|
||||
this.performSearch(this.searchInput.value);
|
||||
});
|
||||
}
|
||||
|
||||
// Load the search index
|
||||
async loadSearchIndex() {
|
||||
try {
|
||||
const response = await fetch(this.json);
|
||||
if (!response.ok) throw new Error('Failed to load search index');
|
||||
const data = await response.json();
|
||||
|
||||
this.searchIndex = data.map(item => ({
|
||||
...item,
|
||||
// 转换为小写以进行不区分大小写的搜索
|
||||
searchableTitle: item.title?.toLowerCase() || '',
|
||||
searchableDesc: item.desc?.toLowerCase() || '',
|
||||
searchableSection: item.section?.toLowerCase() || '',
|
||||
searchableContents: item.contents?.toLowerCase() || ''
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('Error loading search index:', error);
|
||||
this.resultsContainer.innerHTML = '<li class="search-message">Error loading search index...</li>';
|
||||
}
|
||||
}
|
||||
|
||||
escapeHtml(unsafe) {
|
||||
if (!unsafe) return '';
|
||||
return unsafe
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
// 检测文本是否包含查询术语 - 使用严格的精确匹配
|
||||
containsTerm(text, term) {
|
||||
if (!text || !term) return false;
|
||||
return text.includes(term);
|
||||
}
|
||||
|
||||
performSearch(query) {
|
||||
// 清理和标准化查询
|
||||
query = query.toLowerCase().trim();
|
||||
|
||||
// 检查查询是否有效
|
||||
if (!query || !this.searchIndex || query.length < DEFAULT_CONFIG.search.minChars) {
|
||||
this.resultsContainer.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 使用空格分隔查询词（对多语言适用）
|
||||
const searchTerms = [
|
||||
query, // 保留整个查询字符串作为必须匹配的项
|
||||
...query.split(/\s+/).filter(term => term.length > 0) // 添加单独的词
|
||||
];
|
||||
|
||||
// 去重
|
||||
const uniqueTerms = [...new Set(searchTerms)];
|
||||
|
||||
// 要求完整查询必须匹配的标志
|
||||
const requireFullQueryMatch = DEFAULT_CONFIG.search.strictMode;
|
||||
|
||||
// 搜索
|
||||
const results = this.searchIndex
|
||||
.map(item => {
|
||||
// 首先检查完整查询是否匹配（严格模式下必须匹配）
|
||||
const fullQueryMatched = this.checkFieldsForMatch(item, uniqueTerms[0]);
|
||||
|
||||
// 如果启用了严格模式且完整查询未匹配，则跳过此项
|
||||
if (requireFullQueryMatch && !fullQueryMatched) {
|
||||
return { item, score: 0, matched: false };
|
||||
}
|
||||
|
||||
// 计算匹配得分
|
||||
let score = 0;
|
||||
let matchedTermsCount = 0;
|
||||
let matchedInTitle = false;
|
||||
|
||||
// 检查每个词的匹配情况
|
||||
uniqueTerms.forEach((term, index) => {
|
||||
// 对于整个查询字符串(index=0)，给予更高权重
|
||||
const isFullQuery = index === 0;
|
||||
const matched = this.checkFieldsForMatch(item, term);
|
||||
|
||||
if (matched) {
|
||||
matchedTermsCount++;
|
||||
|
||||
// 基于匹配位置计算得分
|
||||
if (matched.inTitle) {
|
||||
score += isFullQuery ? 10 : 5;
|
||||
matchedInTitle = true;
|
||||
}
|
||||
if (matched.inDesc) {
|
||||
score += isFullQuery ? 8 : 4;
|
||||
}
|
||||
if (matched.inSection) {
|
||||
score += isFullQuery ? 6 : 3;
|
||||
}
|
||||
if (matched.inContents) {
|
||||
score += isFullQuery ? 4 : 2;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 计算匹配率
|
||||
const matchRatio = matchedTermsCount / uniqueTerms.length;
|
||||
|
||||
// 最终得分计算
|
||||
const finalScore = score * matchRatio * (matchedInTitle ? 1.5 : 1);
|
||||
|
||||
return {
|
||||
item,
|
||||
score: finalScore,
|
||||
matched: fullQueryMatched // 只有完整查询匹配才视为有效
|
||||
};
|
||||
})
|
||||
.filter(result => result.matched)
|
||||
.sort((a, b) => b.score - a.score)
|
||||
.slice(0, DEFAULT_CONFIG.search.maxResults)
|
||||
.map(result => result.item);
|
||||
|
||||
// 显示结果
|
||||
if (results.length === 0) {
|
||||
this.resultsContainer.innerHTML = '<p class="mt-5">{{ i18n "search.no_results" }}</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const searchItems = results.map((item) => {
|
||||
let categories = '';
|
||||
let tags = '';
|
||||
if (item.categories) {
|
||||
categories = item.categories.join(', ');
|
||||
categories = `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${categories}</div>`;
|
||||
}
|
||||
if (item.tags) {
|
||||
tags = item.tags.join(', ');
|
||||
tags = `<div><i class="fa fa-tag fa-fw"></i>${tags}</div>`
|
||||
}
|
||||
return `
|
||||
<article class="px-1 px-sm-2 px-lg-4 px-xl-0">
|
||||
<header>
|
||||
<h2><a href="${this.escapeHtml(item.permalink)}">${this.escapeHtml(item.title)}</a></h2>
|
||||
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
|
||||
${categories}
|
||||
${tags}
|
||||
</div>
|
||||
</header>
|
||||
<p>${this.escapeHtml(item.contents)}</p>
|
||||
</article>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
this.resultsContainer.innerHTML = searchItems;
|
||||
}
|
||||
|
||||
// 检查一个词是否匹配指定项的任何字段
|
||||
checkFieldsForMatch(item, term) {
|
||||
const matches = {
|
||||
inTitle: false,
|
||||
inDesc: false,
|
||||
inSection: false,
|
||||
inContents: false
|
||||
};
|
||||
|
||||
// 检查各个字段
|
||||
if (DEFAULT_CONFIG.search.fields.title && this.containsTerm(item.searchableTitle, term)) {
|
||||
matches.inTitle = true;
|
||||
}
|
||||
|
||||
if (DEFAULT_CONFIG.search.fields.description && this.containsTerm(item.searchableDesc, term)) {
|
||||
matches.inDesc = true;
|
||||
}
|
||||
|
||||
if (DEFAULT_CONFIG.search.fields.section && this.containsTerm(item.searchableSection, term)) {
|
||||
matches.inSection = true;
|
||||
}
|
||||
|
||||
if (DEFAULT_CONFIG.search.fields.contents && this.containsTerm(item.searchableContents, term)) {
|
||||
matches.inContents = true;
|
||||
}
|
||||
|
||||
// 如果任何字段匹配，则返回匹配信息
|
||||
if (matches.inTitle || matches.inDesc || matches.inSection || matches.inContents) {
|
||||
return matches;
|
||||
}
|
||||
|
||||
// 否则返回false
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const search = new FastSearch({
|
||||
searchInput: document.getElementById('search-input'),
|
||||
resultsContainer: document.getElementById('search-results'),
|
||||
json: `{{ path.Join .Site.Home.RelPermalink "index.json" }}`
|
||||
});
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user