Hexo 添加搜索功能

hexo-generator-search 插件

• 安装

  $ npm install hexo-generator-search

• 配置 安装模块之后在 hexo 的根目录的_config 配置

  search:
  path: search.json
  field: post
  content: true

  插件会在 hexo g 之后生成 search.json 文件，如果 path 的配置是 *.xml 生成的是 xml 格式文件

• 屏蔽搜索 在博客 markdown 的顶部信息里添加 indexing:false

  ---
  title: hexo 添加搜索功能
  tags: hexo
  indexing: false
  ---

补充代码

• 添加搜索框

  <div class="search-area">
    <div>
      <input type="text" id="search-input" autocomplete="off" placeholder="搜索内容" />
    </div>
    <div id="search-result"></div>
  </div>

• 添加 js 代码

  const searchFunc = function (path, search_id, content_id) {
    const resultContent = document.getElementById(content_id)
    const input = document.getElementById(search_id)
    if (!input) return
    fetch(path)
      .then((response) => response.json())
      .then((blogs) => {
        input.addEventListener('input', function () {
          const keywords = this.value
            .trim()
            .toLowerCase()
            .split(/[\s\-]+/)
          resultContent.innerHTML = ''
          let content = ''
          if (keywords.length === 1 && keywords[0].length === 0) {
            return
          }
          // perform local searching
          blogs.forEach(function (blog) {
            let isMatch = true
            if (!blog.title || blog.title.trim() === '') {
              blog.title = 'Untitled'
            }
            const data_title = blog.title.trim().toLowerCase()
            const data_content = blog.content
              .trim()
              .replace(/<[^>]+>/g, '')
              .toLowerCase()
            const data_url = blog.url
            let index_title = -1
            let index_content = -1
            let first_occur = -1
            // only match artiles with not empty contents
            if (data_content !== '') {
              keywords.forEach(function (keyword, i) {
                index_title = data_title.indexOf(keyword)
                index_content = data_content.indexOf(keyword)
                if (index_title < 0 && index_content < 0) {
                  isMatch = false
                } else {
                  if (index_content < 0) {
                    index_content = 0
                  }
                  if (i == 0) {
                    first_occur = index_content
                  }
                }
              })
            }
            // show search results
            if (isMatch) {
              content += `<li><a href="${data_url}" class="search-title">${data_title}</a>`
              if (first_occur >= 0) {
                // cut out 100 characters
                var start = first_occur - 20
                var end = first_occur + 80
                if (start < 0) {
                  start = 0
                }
                if (start == 0) {
                  end = 100
                }
                if (end > data_content.length) {
                  end = data_content.length
                }
                var match_content = data_content.substring(start, end)
                // highlight all keywords
                keywords.forEach(function (keyword) {
                  var regS = new RegExp(keyword, 'gi')
                  match_content = match_content.replace(regS, `<span class="search-keyword">${keyword}</span>`)
                })
                content += `<p class="search-content">${match_content}...</p>`
              }
              content += '</li>'
            }
          })
          if (content.length > 0) {
            let str = `<ul class="search-result-list">${content}</ul>`
            resultContent.innerHTML = str
          }
        })
      })
  }
  searchFunc('/search.json', 'search-input', 'search-result')

参考链接：

hexo-generator-search github