Hexo 主题开发系列教程（四）：高级功能与优化

/**
 * 搜索索引生成器
 */

hexo.extend.generator.register('search', function(locals) {
  const config = this.config;
  const searchConfig = this.theme.search;
  
  // 如果搜索未启用或使用外部服务，不生成索引
  if (!searchConfig || !searchConfig.enable || searchConfig.provider !== 'local') {
    return;
  }
  
  const posts = locals.posts.sort('-date');
  const pages = locals.pages;
  
  // 合并文章和页面
  const allContent = [];
  
  // 处理文章
  posts.forEach(post => {
    if (post.indexing === false) return; // 跳过不需要索引的文章
    
    allContent.push({
      title: post.title,
      url: post.path,
      content: stripHtml(post.content),
      categories: post.categories ? post.categories.map(cat => cat.name) : [],
      tags: post.tags ? post.tags.map(tag => tag.name) : [],
      date: post.date.format('YYYY-MM-DD')
    });
  });
  
  // 处理页面
  pages.forEach(page => {
    if (page.indexing === false) return;
    
    allContent.push({
      title: page.title,
      url: page.path,
      content: stripHtml(page.content),
      categories: [],
      tags: [],
      date: page.date ? page.date.format('YYYY-MM-DD') : ''
    });
  });
  
  // 生成搜索索引
  return {
    path: 'search.json',
    data: JSON.stringify(allContent)
  };
  
  // 辅助函数：移除 HTML 标签
  function stripHtml(html) {
    if (!html) return '';
    
    return html
      .replace(/<style[^>]*>.*?<\/style>/gis, '')
      .replace(/<script[^>]*>.*?<\/script>/gis, '')
      .replace(/<[^>]+>/g, '')
      .replace(/\s+/g, ' ')
      .trim()
      .substring(0, 5000); // 限制内容长度
  }
});

/**
 * 本地搜索功能
 */

class LocalSearch {
  constructor(options = {}) {
    this.searchData = null;
    this.dataUrl = options.dataUrl || '/search.json';
    this.maxResults = options.maxResults || 20;
    this.highlightTag = options.highlightTag || 'em';
    
    this.overlay = document.getElementById('search-overlay');
    this.input = document.getElementById('search-input');
    this.results = document.getElementById('search-results');
    this.hint = document.getElementById('search-hint');
    this.noResults = document.getElementById('search-no-results');
    this.loading = document.getElementById('search-loading');
    this.clearBtn = document.getElementById('search-clear');
    this.closeBtn = document.getElementById('search-close');
    
    this.selectedIndex = -1;
    
    this.init();
  }
  
  init() {
    // 绑定事件
    this.bindEvents();
    
    // 预加载搜索数据
    this.loadSearchData();
  }
  
  bindEvents() {
    // 搜索按钮点击
    const searchBtn = document.getElementById('search-button');
    if (searchBtn) {
      searchBtn.addEventListener('click', () => this.open());
    }
    
    // 快捷键
    document.addEventListener('keydown', (e) => {
      // Ctrl/Cmd + K 打开搜索
      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        this.open();
      }
      
      // ESC 关闭搜索
      if (e.key === 'Escape' && this.isOpen()) {
        this.close();
      }
    });
    
    // 输入事件
    if (this.input) {
      this.input.addEventListener('input', this.debounce(() => {
        this.search();
      }, 300));
      
      // 键盘导航
      this.input.addEventListener('keydown', (e) => {
        this.handleKeyboard(e);
      });
    }
    
    // 清除按钮
    if (this.clearBtn) {
      this.clearBtn.addEventListener('click', () => {
        this.input.value = '';
        this.clearResults();
        this.input.focus();
      });
    }
    
    // 关闭按钮
    if (this.closeBtn) {
      this.closeBtn.addEventListener('click', () => this.close());
    }
    
    // 点击遮罩关闭
    if (this.overlay) {
      this.overlay.addEventListener('click', (e) => {
        if (e.target === this.overlay) {
          this.close();
        }
      });
    }
  }
  
  async loadSearchData() {
    if (this.searchData) return;
    
    try {
      this.showLoading();
      
      const response = await fetch(this.dataUrl);
      if (!response.ok) throw new Error('Failed to load search data');
      
      this.searchData = await response.json();
      this.hideLoading();
      
      console.log(`Search index loaded: ${this.searchData.length} items`);
    } catch (error) {
      console.error('Error loading search data:', error);
      this.hideLoading();
      this.showError('搜索索引加载失败');
    }
  }
  
  search() {
    const query = this.input.value.trim().toLowerCase();
    
    if (!query) {
      this.clearResults();
      return;
    }
    
    if (!this.searchData) {
      this.showError('搜索索引未加载');
      return;
    }
    
    // 搜索
    const results = this.performSearch(query);
    
    // 显示结果
    this.displayResults(results, query);
  }
  
  performSearch(query) {
    const keywords = query.split(/\s+/).filter(k => k.length > 0);
    const results = [];
    
    this.searchData.forEach(item => {
      let score = 0;
      const matchedKeywords = new Set();
      
      keywords.forEach(keyword => {
        // 标题匹配（权重最高）
        const titleIndex = item.title.toLowerCase().indexOf(keyword);
        if (titleIndex !== -1) {
          score += 10;
          if (titleIndex === 0) score += 5; // 开头匹配额外加分
          matchedKeywords.add(keyword);
        }
        
        // 分类/标签匹配
        const categories = item.categories || [];
        const tags = item.tags || [];
        if (categories.some(c => c.toLowerCase().includes(keyword)) ||
            tags.some(t => t.toLowerCase().includes(keyword))) {
          score += 5;
          matchedKeywords.add(keyword);
        }
        
        // 内容匹配
        if (item.content && item.content.toLowerCase().includes(keyword)) {
          score += 1;
          matchedKeywords.add(keyword);
        }
      });
      
      // 只有匹配到所有关键词才加入结果
      if (matchedKeywords.size === keywords.length && score > 0) {
        results.push({
          ...item,
          score: score
        });
      }
    });
    
    // 按分数排序
    return results.sort((a, b) => b.score - a.score).slice(0, this.maxResults);
  }
  
  displayResults(results, query) {
    this.hideHint();
    this.hideNoResults();
    
    if (results.length === 0) {
      this.showNoResults();
      return;
    }
    
    const keywords = query.split(/\s+/);
    const html = results.map((item, index) => {
      const title = this.highlight(item.title, keywords);
      const excerpt = this.getExcerpt(item.content, keywords);
      
      return `
        <div class="search-result-item" data-index="${index}">
          <a href="/${item.url}" class="search-result-link">
            <h3 class="search-result-title">${title}</h3>
            ${excerpt ? `<p class="search-result-excerpt">${excerpt}</p>` : ''}
            <div class="search-result-meta">
              ${item.date ? `<span class="meta-date">${item.date}</span>` : ''}
              ${item.categories && item.categories.length > 0 ? 
                `<span class="meta-category">${item.categories[0]}</span>` : ''}
            </div>
          </a>
        </div>
      `;
    }).join('');
    
    this.results.innerHTML = html;
    this.results.style.display = 'block';
    this.selectedIndex = -1;
    
    // 绑定点击事件
    this.results.querySelectorAll('.search-result-link').forEach((link, index) => {
      link.addEventListener('click', (e) => {
        // 记录搜索统计
        this.trackSearch(query, item.url);
      });
    });
  }
  
  highlight(text, keywords) {
    if (!text) return '';
    
    let result = text;
    keywords.forEach(keyword => {
      const regex = new RegExp(`(${this.escapeRegex(keyword)})`, 'gi');
      result = result.replace(regex, `<${this.highlightTag}>$1</${this.highlightTag}>`);
    });
    
    return result;
  }
  
  getExcerpt(content, keywords) {
    if (!content) return '';
    
    // 查找第一个关键词的位置
    let index = -1;
    let matchedKeyword = '';
    
    for (const keyword of keywords) {
      const pos = content.toLowerCase().indexOf(keyword.toLowerCase());
      if (pos !== -1 && (index === -1 || pos < index)) {
        index = pos;
        matchedKeyword = keyword;
      }
    }
    
    if (index === -1) return '';
    
    // 提取摘要
    const start = Math.max(0, index - 50);
    const end = Math.min(content.length, index + 150);
    let excerpt = content.substring(start, end);
    
    // 添加省略号
    if (start > 0) excerpt = '...' + excerpt;
    if (end < content.length) excerpt = excerpt + '...';
    
    // 高亮关键词
    return this.highlight(excerpt, keywords);
  }
  
  handleKeyboard(e) {
    const items = this.results.querySelectorAll('.search-result-item');
    if (items.length === 0) return;
    
    switch(e.key) {
      case 'ArrowDown':
        e.preventDefault();
        this.selectedIndex = Math.min(this.selectedIndex + 1, items.length - 1);
        this.updateSelection(items);
        break;
        
      case 'ArrowUp':
        e.preventDefault();
        this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
        this.updateSelection(items);
        break;
        
      case 'Enter':
        e.preventDefault();
        if (this.selectedIndex >= 0) {
          const link = items[this.selectedIndex].querySelector('a');
          if (link) link.click();
        }
        break;
    }
  }
  
  updateSelection(items) {
    items.forEach((item, index) => {
      item.classList.toggle('selected', index === this.selectedIndex);
    });
    
    if (this.selectedIndex >= 0) {
      items[this.selectedIndex].scrollIntoView({
        block: 'nearest',
        behavior: 'smooth'
      });
    }
  }
  
  open() {
    if (this.overlay) {
      this.overlay.classList.add('active');
      document.body.style.overflow = 'hidden';
      
      // 聚焦输入框
      setTimeout(() => {
        if (this.input) this.input.focus();
      }, 300);
      
      // 如果还没加载数据，立即加载
      if (!this.searchData) {
        this.loadSearchData();
      }
    }
  }
  
  close() {
    if (this.overlay) {
      this.overlay.classList.remove('active');
      document.body.style.overflow = '';
      this.clearResults();
    }
  }
  
  isOpen() {
    return this.overlay && this.overlay.classList.contains('active');
  }
  
  clearResults() {
    if (this.results) {
      this.results.innerHTML = '';
      this.results.style.display = 'none';
    }
    this.showHint();
    this.hideNoResults();
    this.selectedIndex = -1;
  }
  
  showHint() {
    if (this.hint) this.hint.style.display = 'block';
  }
  
  hideHint() {
    if (this.hint) this.hint.style.display = 'none';
  }
  
  showNoResults() {
    if (this.noResults) this.noResults.style.display = 'block';
  }
  
  hideNoResults() {
    if (this.noResults) this.noResults.style.display = 'none';
  }
  
  showLoading() {
    if (this.loading) this.loading.style.display = 'flex';
  }
  
  hideLoading() {
    if (this.loading) this.loading.style.display = 'none';
  }
  
  showError(message) {
    console.error(message);
  }
  
  trackSearch(query, url) {
    // 可以集成统计分析
    if (typeof gtag !== 'undefined') {
      gtag('event', 'search', {
        search_term: query,
        result_url: url
      });
    }
  }
  
  // 工具函数
  escapeRegex(str) {
    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  }
  
  debounce(func, wait) {
    let timeout;
    return function(...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
  if (document.getElementById('search-overlay')) {
    window.localSearch = new LocalSearch({
      dataUrl: '/search.json',
      maxResults: 20
    });
  }
});

/**
 * Algolia 搜索
 */

// 引入 Algolia 库
import algoliasearch from 'algoliasearch/lite';
import instantsearch from 'instantsearch.js';
import { searchBox, hits, pagination } from 'instantsearch.js/es/widgets';

class AlgoliaSearch {
  constructor(options) {
    this.appId = options.appId;
    this.apiKey = options.apiKey;
    this.indexName = options.indexName;
    
    this.searchClient = algoliasearch(this.appId, this.apiKey);
    this.search = null;
    
    this.init();
  }
  
  init() {
    this.search = instantsearch({
      indexName: this.indexName,
      searchClient: this.searchClient,
      routing: true
    });
    
    // 配置搜索框
    this.search.addWidgets([
      searchBox({
        container: '#algolia-search-input',
        placeholder: '搜索文章...',
        showReset: true,
        showSubmit: false,
        autofocus: true
      }),
      
      // 配置结果展示
      hits({
        container: '#algolia-hits',
        templates: {
          item: (hit) => this.renderHit(hit),
          empty: '未找到相关结果'
        }
      }),
      
      // 配置分页
      pagination({
        container: '#algolia-pagination',
        padding: 2,
        showFirst: false,
        showLast: false
      })
    ]);
    
    this.search.start();
    this.bindEvents();
  }
  
  renderHit(hit) {
    const title = hit._highlightResult.title.value;
    const excerpt = hit._highlightResult.excerpt 
      ? hit._highlightResult.excerpt.value 
      : '';
    
    return `
      <div class="algolia-hit">
        <a href="${hit.path}" class="hit-link">
          <h3 class="hit-title">${title}</h3>
          ${excerpt ? `<p class="hit-excerpt">${excerpt}</p>` : ''}
          <div class="hit-meta">
            ${hit.date ? `<span class="meta-date">${hit.date}</span>` : ''}
            ${hit.categories && hit.categories.length > 0 ? 
              `<span class="meta-category">${hit.categories[0]}</span>` : ''}
          </div>
        </a>
      </div>
    `;
  }
  
  bindEvents() {
    // 打开搜索
    const searchBtn = document.getElementById('search-button');
    if (searchBtn) {
      searchBtn.addEventListener('click', () => this.open());
    }
    
    // 关闭搜索
    const closeBtn = document.querySelector('#algolia-search .search-close');
    if (closeBtn) {
      closeBtn.addEventListener('click', () => this.close());
    }
    
    // 快捷键
    document.addEventListener('keydown', (e) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        this.open();
      }
      
      if (e.key === 'Escape') {
        this.close();
      }
    });
  }
  
  open() {
    const overlay = document.getElementById('algolia-search');
    if (overlay) {
      overlay.classList.add('active');
      document.body.style.overflow = 'hidden';
    }
  }
  
  close() {
    const overlay = document.getElementById('algolia-search');
    if (overlay) {
      overlay.classList.remove('active');
      document.body.style.overflow = '';
    }
  }
}

// 初始化
if (window.algoliaConfig) {
  new AlgoliaSearch(window.algoliaConfig);
}

/**
 * 评论系统 Helper
 */

hexo.extend.helper.register('load_comment_script', function() {
  const provider = this.theme.comments.provider;
  
  if (!this.theme.comments.enable || provider === 'none') {
    return '';
  }
  
  const scripts = {
    gitalk: 'https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js',
    disqus: `https://${this.theme.comments.disqus.shortname}.disqus.com/embed.js`,
    valine: 'https://cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js',
    waline: 'https://cdn.jsdelivr.net/npm/@waline/client@latest/dist/waline.js',
    utterances: 'https://utteranc.es/client.js',
    giscus: 'https://giscus.app/client.js'
  };
  
  return scripts[provider] || '';
});

hexo.extend.helper.register('comment_id', function() {
  const page = this.page;
  
  // 使用 MD5 生成唯一 ID
  const crypto = require('crypto');
  const id = crypto.createHash('md5').update(page.path).digest('hex');
  
  return id;
});

/**
 * 生成统计页面
 */

hexo.extend.generator.register('stats', function(locals) {
  if (!this.theme.stats || !this.theme.stats.enable) {
    return;
  }
  
  const posts = locals.posts.sort('-date');
  const categories = locals.categories;
  const tags = locals.tags;
  
  // 计算统计数据
  const stats = {
    // 基础统计
    total_posts: posts.length,
    total_categories: categories.length,
    total_tags: tags.length,
    
    // 字数统计
    total_words: 0,
    avg_words: 0,
    
    // 阅读时间统计
    total_reading_time: 0,
    avg_reading_time: 0,
    
    // 时间统计
    first_post_date: null,
    last_post_date: null,
    days_active: 0,
    
    // 年度统计
    posts_by_year: {},
    
    // 月度统计
    posts_by_month: {},
    
    // 分类统计
    top_categories: [],
    
    // 标签统计
    top_tags: []
  };
  
  // 处理文章数据
  posts.forEach(post => {
    // 字数统计
    const words = post.word_count || 0;
    stats.total_words += words;
    
    // 阅读时间
    const readingTime = post.reading_time || 0;
    stats.total_reading_time += readingTime;
    
    // 年度统计
    const year = post.date.year();
    stats.posts_by_year[year] = (stats.posts_by_year[year] || 0) + 1;
    
    // 月度统计
    const month = post.date.format('YYYY-MM');
    stats.posts_by_month[month] = (stats.posts_by_month[month] || 0) + 1;
    
    // 时间范围
    if (!stats.first_post_date || post.date < stats.first_post_date) {
      stats.first_post_date = post.date;
    }
    if (!stats.last_post_date || post.date > stats.last_post_date) {
      stats.last_post_date = post.date;
    }
  });
  
  // 计算平均值
  if (posts.length > 0) {
    stats.avg_words = Math.round(stats.total_words / posts.length);
    stats.avg_reading_time = Math.round(stats.total_reading_time / posts.length);
  }
  
  // 计算活跃天数
  if (stats.first_post_date && stats.last_post_date) {
    stats.days_active = stats.last_post_date.diff(stats.first_post_date, 'days');
  }
  
  // Top 分类
  stats.top_categories = categories
    .sort('length', -1)
    .limit(10)
    .map(cat => ({
      name: cat.name,
      count: cat.length,
      path: cat.path
    }));
  
  // Top 标签
  stats.top_tags = tags
    .sort('length', -1)
    .limit(20)
    .map(tag => ({
      name: tag.name,
      count: tag.length,
      path: tag.path
    }));
  
  return {
    path: 'stats/index.html',
    data: stats,
    layout: 'stats'
  };
});