Butterfly 魔改 - 在 404 页面添加搜索链接

概述

目标

由于修改过一次 permalink，但没有设定重定向，导致之前的链接会出现 404 问题。

_config.yml

- permalink: :year/:month/:day/:title/
+ permalink: posts/:hash/ 

我们希望能够添加一个搜索链接，让用户搜索找到新的页面。

效果图：

需要修改的文件

• themes\butterfly\layout\includes\404.pug（用于修改 404 页面内容）
• themes\butterfly\source\js\search\local-search.js（用于自动填入搜索内容）

修改 404 页面

themes\butterfly\layout\includes\404.pug

- var top_img_404 = theme.error_404.background || theme.default_top_img

#body-wrap.error404
  include ./header/index.pug

  #error-wrap
    .error-content
      .error-img
        img(src=url_for(top_img_404) alt='Page not found')
      .error-info
        h1.error_title= '404'
        .error_subtitle= theme.error_404.subtitle || _p('error404')
        // -------------- 以下是新增内容 ------------------------
        // 用来套用css样式的虚拟article-container
        #article-container
          .404_info 由于进行过一次 url 的变更，可能导致 404 现象。<br>但文章没有被删除，您可以尝试搜索找到原文章。
          a#try_search(href="javascript:void(0);")= '尝试搜索 ？'
          script.
            window.addEventListener('load', () => {
              function getLastPathSegment(urlPath) {
                // 处理空值和非法输入
                if (typeof urlPath !== 'string') return '';
                // 清理末尾斜杠
                const cleanedPath = urlPath.replace(/\/+$/, '');
                // 处理根路径
                if (cleanedPath === '') return '/';
                const lastSlashIndex = cleanedPath.lastIndexOf('/');
                return cleanedPath.substring(lastSlashIndex);
              }
              var path = getLastPathSegment(decodeURIComponent(window.location.pathname))
                .replaceAll(/[/-]/g," ").trim();
              document.getElementById('try_search').text = '尝试搜索 \"' + path + '\" ？'
              document.getElementById('try_search').addEventListener('click', function() {
                const event = new CustomEvent('searchWithData', {
                detail: {
                    message: path
                  }
                });
                document.getElementById('try_search').dispatchEvent(event);
              });
            })

加入一个 div 元素用于提示信息，然后用一个 a#try_search 元素作为按钮。

加入一个 script，添加 window 的一个 load 事件监听器（DOM加载完成之后再修改内容），其中：

• 获取 window.location.pathname，并对其清洗获得最后一个部分；
• 通过 dispathEvent 派发一个自定义的事件 searchWithData，让 local-search.js 处理。

修改 local-search.js

因为整个 local-search 里面的内容都在一个闭包里，我们只能侵入性地修改里面的内容。

一共需要修改 4 处：

1. inputEventFunction 修改，让无结果也显示。

   themes\butterfly\source\js\search\local-search.js@inputEventFunction

   const inputEventFunction = () => {
     if (!localSearch.isfetched) return
     const searchText = input.value.trim().toLowerCase()
     if (searchText !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
     const keywords = searchText.split(/[-\s]+/)
     const container = document.getElementById('local-search-results')
     let resultItems = []
     if (searchText.length > 0) {
     // Perform local searching
       resultItems = localSearch.getResultItems(keywords)
     }
     if (keywords.length === 1 && keywords[0] === '') {
       container.classList.add('no-result')
       container.textContent = ''
     } else if (resultItems.length === 0) {
   +   container.classList.remove('no-result')
       container.textContent = ''
       statsItem.innerHTML = `<div class="search-result-stats">${languages.hits_empty.replace(/\$\{query}/, searchText)}  </div>`
     } else {
       resultItems.sort((left, right) => {
         if (left.includedCount !== right.includedCount) {
           return right.includedCount - left.includedCount
         } else if (left.hitCount !== right.hitCount) {
           return right.hitCount - left.hitCount
         }
         return right.id - left.id
       })
     
       const stats = languages.hits_stats.replace(/\$\{hits}/, resultItems.length)
     
       container.classList.remove('no-result')
       container.innerHTML = `<div class="search-result-list">${resultItems.map(result => result.item).join('')}</div>`
       statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
       window.pjax && window.pjax.refresh(container)
     }
     
     $loadingStatus.textContent = ''
   }

   这是为了如果搜索不到结果也增加一个找不到的提示。

2. 添加 openSearchWithData 函数，处理 searchWithData 事件。

   themes\butterfly\source\js\search\local-search.js@window.addEventListener('load') callback

   const openSearchWithData = (data) => {
     openSearch();
     if (input) {
       input.value = data;
       inputEventFunction();
     }
   }

3. 修改 searchClickFn，给 a#try_search 元素加上监听器。

   themes\butterfly\source\js\search\local-search.js@searchClickFn

   const searchClickFn = () => {
     document.querySelector('#search-button > .search').addEventListener('click', openSearch)
   + const element = document.querySelector('#try_search'); // 404 页面用
   + if (element) {
   +   element.addEventListener('searchWithData',(e) => {
   +     openSearchWithData(e.detail.message)
   +   });
   + }
   }

   注意判断不存在这个元素的情况。

4. 由于加载是异步的，需要在 window.addEventListener('search:loaded') 中再显式调用一遍 inputEventFunction()，以得到初次搜索的结果。

   themes\butterfly\source\js\search\local-search.js@window.addEventListener('search:loaded') callback

   window.addEventListener('search:loaded', () => {
     const $loadDataItem = document.getElementById('loading-database')
     $loadDataItem.nextElementSibling.style.display = 'block'
     $loadDataItem.remove()
   + inputEventFunction();
   })

完整代码

可以直接复制。

404.pug

- var top_img_404 = theme.error_404.background || theme.default_top_img

#body-wrap.error404
  include ./header/index.pug

  #error-wrap
    .error-content
      .error-img
        img(src=url_for(top_img_404) alt='Page not found')
      .error-info
        h1.error_title= '404'
        .error_subtitle= theme.error_404.subtitle || _p('error404')
        // 用来套用css样式的虚拟article-container
        #article-container
          .404_info 由于进行过一次 url 的变更，可能导致 404 现象。<br>但文章没有被删除，您可以尝试搜索找到原文章。
          a#try_search(href="javascript:void(0);")= '尝试搜索 ？'
          script.
            window.addEventListener('load', () => {
              function getLastPathSegment(urlPath) {
                // 处理空值和非法输入
                if (typeof urlPath !== 'string') return '';
                // 清理末尾斜杠
                const cleanedPath = urlPath.replace(/\/+$/, '');
                // 处理根路径
                if (cleanedPath === '') return '/';
                const lastSlashIndex = cleanedPath.lastIndexOf('/');
                return cleanedPath.substring(lastSlashIndex);
              }
              var path = getLastPathSegment(decodeURIComponent(window.location.pathname))
                .replaceAll(/[/-]/g," ").trim();
              document.getElementById('try_search').text = '尝试搜索 \"' + path + '\" ？'
              document.getElementById('try_search').addEventListener('click', function() {
                const event = new CustomEvent('searchWithData', {
                detail: {
                    message: path
                  }
                });
                document.getElementById('try_search').dispatchEvent(event);
              });
            })

local-search.js

/**
 * Refer to hexo-generator-searchdb
 * https://github.com/next-theme/hexo-generator-searchdb/blob/main/dist/search.js
 * Modified by hexo-theme-butterfly
 */

class LocalSearch {
  constructor ({
    path = '',
    unescape = false,
    top_n_per_article = 1
  }) {
    this.path = path
    this.unescape = unescape
    this.top_n_per_article = top_n_per_article
    this.isfetched = false
    this.datas = null
  }

  getIndexByWord (words, text, caseSensitive = false) {
    const index = []
    const included = new Set()

    if (!caseSensitive) {
      text = text.toLowerCase()
    }
    words.forEach(word => {
      if (this.unescape) {
        const div = document.createElement('div')
        div.innerText = word
        word = div.innerHTML
      }
      const wordLen = word.length
      if (wordLen === 0) return
      let startPosition = 0
      let position = -1
      if (!caseSensitive) {
        word = word.toLowerCase()
      }
      while ((position = text.indexOf(word, startPosition)) > -1) {
        index.push({ position, word })
        included.add(word)
        startPosition = position + wordLen
      }
    })
    // Sort index by position of keyword
    index.sort((left, right) => {
      if (left.position !== right.position) {
        return left.position - right.position
      }
      return right.word.length - left.word.length
    })
    return [index, included]
  }

  // Merge hits into slices
  mergeIntoSlice (start, end, index) {
    let item = index[0]
    let { position, word } = item
    const hits = []
    const count = new Set()
    while (position + word.length <= end && index.length !== 0) {
      count.add(word)
      hits.push({
        position,
        length: word.length
      })
      const wordEnd = position + word.length

      // Move to next position of hit
      index.shift()
      while (index.length !== 0) {
        item = index[0]
        position = item.position
        word = item.word
        if (wordEnd > position) {
          index.shift()
        } else {
          break
        }
      }
    }
    return {
      hits,
      start,
      end,
      count: count.size
    }
  }

  // Highlight title and content
  highlightKeyword (val, slice) {
    let result = ''
    let index = slice.start
    for (const { position, length } of slice.hits) {
      result += val.substring(index, position)
      index = position + length
      result += `<mark class="search-keyword">${val.substr(position, length)}</mark>`
    }
    result += val.substring(index, slice.end)
    return result
  }

  getResultItems (keywords) {
    const resultItems = []
    this.datas.forEach(({ title, content, url }) => {
      // The number of different keywords included in the article.
      const [indexOfTitle, keysOfTitle] = this.getIndexByWord(keywords, title)
      const [indexOfContent, keysOfContent] = this.getIndexByWord(keywords, content)
      const includedCount = new Set([...keysOfTitle, ...keysOfContent]).size

      // Show search results
      const hitCount = indexOfTitle.length + indexOfContent.length
      if (hitCount === 0) return

      const slicesOfTitle = []
      if (indexOfTitle.length !== 0) {
        slicesOfTitle.push(this.mergeIntoSlice(0, title.length, indexOfTitle))
      }

      let slicesOfContent = []
      while (indexOfContent.length !== 0) {
        const item = indexOfContent[0]
        const { position } = item
        // Cut out 120 characters. The maxlength of .search-input is 80.
        const start = Math.max(0, position - 20)
        const end = Math.min(content.length, position + 100)
        slicesOfContent.push(this.mergeIntoSlice(start, end, indexOfContent))
      }

      // Sort slices in content by included keywords' count and hits' count
      slicesOfContent.sort((left, right) => {
        if (left.count !== right.count) {
          return right.count - left.count
        } else if (left.hits.length !== right.hits.length) {
          return right.hits.length - left.hits.length
        }
        return left.start - right.start
      })

      // Select top N slices in content
      const upperBound = parseInt(this.top_n_per_article, 10)
      if (upperBound >= 0) {
        slicesOfContent = slicesOfContent.slice(0, upperBound)
      }

      let resultItem = ''

      url = new URL(url, location.origin)
      url.searchParams.append('highlight', keywords.join(' '))

      if (slicesOfTitle.length !== 0) {
        resultItem += `<div class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${this.highlightKeyword(title, slicesOfTitle[0])}</span>`
      } else {
        resultItem += `<div class="local-search-hit-item"><a href="${url.href}"><span class="search-result-title">${title}</span>`
      }

      slicesOfContent.forEach(slice => {
        resultItem += `<p class="search-result">${this.highlightKeyword(content, slice)}...</p></a>`
      })

      resultItem += '</div>'
      resultItems.push({
        item: resultItem,
        id: resultItems.length,
        hitCount,
        includedCount
      })
    })
    return resultItems
  }

  fetchData () {
    const isXml = !this.path.endsWith('json')
    fetch(this.path)
      .then(response => response.text())
      .then(res => {
        // Get the contents from search data
        this.isfetched = true
        this.datas = isXml
          ? [...new DOMParser().parseFromString(res, 'text/xml').querySelectorAll('entry')].map(element => ({
              title: element.querySelector('title').textContent,
              content: element.querySelector('content').textContent,
              url: element.querySelector('url').textContent
            }))
          : JSON.parse(res)
        // Only match articles with non-empty titles
        this.datas = this.datas.filter(data => data.title).map(data => {
          data.title = data.title.trim()
          data.content = data.content ? data.content.trim().replace(/<[^>]+>/g, '') : ''
          data.url = decodeURIComponent(data.url).replace(/\/{2,}/g, '/')
          return data
        })
        // Remove loading animation
        window.dispatchEvent(new Event('search:loaded'))
      })
  }

  // Highlight by wrapping node in mark elements with the given class name
  highlightText (node, slice, className) {
    const val = node.nodeValue
    let index = slice.start
    const children = []
    for (const { position, length } of slice.hits) {
      const text = document.createTextNode(val.substring(index, position))
      index = position + length
      const mark = document.createElement('mark')
      mark.className = className
      mark.appendChild(document.createTextNode(val.substr(position, length)))
      children.push(text, mark)
    }
    node.nodeValue = val.substring(index, slice.end)
    children.forEach(element => {
      node.parentNode.insertBefore(element, node)
    })
  }

  // Highlight the search words provided in the url in the text
  highlightSearchWords (body) {
    const params = new URL(location.href).searchParams.get('highlight')
    const keywords = params ? params.split(' ') : []
    if (!keywords.length || !body) return
    const walk = document.createTreeWalker(body, NodeFilter.SHOW_TEXT, null)
    const allNodes = []
    while (walk.nextNode()) {
      if (!walk.currentNode.parentNode.matches('button, select, textarea, .mermaid')) allNodes.push(walk.currentNode)
    }
    allNodes.forEach(node => {
      const [indexOfNode] = this.getIndexByWord(keywords, node.nodeValue)
      if (!indexOfNode.length) return
      const slice = this.mergeIntoSlice(0, node.nodeValue.length, indexOfNode)
      this.highlightText(node, slice, 'search-keyword')
    })
  }
}

window.addEventListener('load', () => {
// Search
  const { path, top_n_per_article, unescape, languages } = GLOBAL_CONFIG.localSearch
  const localSearch = new LocalSearch({
    path,
    top_n_per_article,
    unescape
  })

  const input = document.querySelector('#local-search-input input')
  const statsItem = document.getElementById('local-search-stats-wrap')
  const $loadingStatus = document.getElementById('loading-status')

  const inputEventFunction = () => {
    if (!localSearch.isfetched) return
    const searchText = input.value.trim().toLowerCase()
    if (searchText !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
    const keywords = searchText.split(/[-\s]+/)
    const container = document.getElementById('local-search-results')
    let resultItems = []
    if (searchText.length > 0) {
    // Perform local searching
      resultItems = localSearch.getResultItems(keywords)
    }
    if (keywords.length === 1 && keywords[0] === '') {
      container.classList.add('no-result')
      container.textContent = ''
    } else if (resultItems.length === 0) {
      container.classList.remove('no-result')
      container.textContent = ''
      statsItem.innerHTML = `<div class="search-result-stats">${languages.hits_empty.replace(/\$\{query}/, searchText)}</div>`
    } else {
      resultItems.sort((left, right) => {
        if (left.includedCount !== right.includedCount) {
          return right.includedCount - left.includedCount
        } else if (left.hitCount !== right.hitCount) {
          return right.hitCount - left.hitCount
        }
        return right.id - left.id
      })

      const stats = languages.hits_stats.replace(/\$\{hits}/, resultItems.length)

      container.classList.remove('no-result')
      container.innerHTML = `<div class="search-result-list">${resultItems.map(result => result.item).join('')}</div>`
      statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
      window.pjax && window.pjax.refresh(container)
    }

    $loadingStatus.textContent = ''
  }

  let loadFlag = false
  const $searchMask = document.getElementById('search-mask')
  const $searchDialog = document.querySelector('#local-search .search-dialog')

  // fix safari
  const fixSafariHeight = () => {
    if (window.innerWidth < 768) {
      $searchDialog.style.setProperty('--search-height', window.innerHeight + 'px')
    }
  }

  const openSearch = () => {
    const bodyStyle = document.body.style
    bodyStyle.width = '100%'
    bodyStyle.overflow = 'hidden'
    btf.animateIn($searchMask, 'to_show 0.5s')
    btf.animateIn($searchDialog, 'titleScale 0.5s')
    setTimeout(() => { input.focus() }, 300)
    if (!loadFlag) {
      !localSearch.isfetched && localSearch.fetchData()
      input.addEventListener('input', inputEventFunction)
      loadFlag = true
    }
    // shortcut: ESC
    document.addEventListener('keydown', function f (event) {
      if (event.code === 'Escape') {
        closeSearch()
        document.removeEventListener('keydown', f)
      }
    })

    fixSafariHeight()
    window.addEventListener('resize', fixSafariHeight)
  }

  const openSearchWithData = (data) => {
    openSearch();
    if (input) {
      input.value = data;
      inputEventFunction();
    }
  }

  const closeSearch = () => {
    const bodyStyle = document.body.style
    bodyStyle.width = ''
    bodyStyle.overflow = ''
    btf.animateOut($searchDialog, 'search_close .5s')
    btf.animateOut($searchMask, 'to_hide 0.5s')
    window.removeEventListener('resize', fixSafariHeight)
  }

  const searchClickFn = () => {
    document.querySelector('#search-button > .search').addEventListener('click', openSearch)
    const element = document.querySelector('#try_search'); // 404 页面用
    if (element) {
      element.addEventListener('searchWithData',(e) => {
        openSearchWithData(e.detail.message)
      });
    }
  }

  const searchFnOnce = () => {
    document.querySelector('#local-search .search-close-button').addEventListener('click', closeSearch)
    $searchMask.addEventListener('click', closeSearch)
    if (GLOBAL_CONFIG.localSearch.preload) {
      localSearch.fetchData()
    }
    localSearch.highlightSearchWords(document.getElementById('article-container'))
  }

  window.addEventListener('search:loaded', () => {
    const $loadDataItem = document.getElementById('loading-database')
    $loadDataItem.nextElementSibling.style.display = 'block'
    $loadDataItem.remove()
    inputEventFunction();
  })

  searchClickFn()
  searchFnOnce()

  // pjax
  window.addEventListener('pjax:complete', () => {
    !btf.isHidden($searchMask) && closeSearch()
    localSearch.highlightSearchWords(document.getElementById('article-container'))
    searchClickFn()
  })
})