source

themes/butterfly/source/js/search/algolia.js

@@ -26,7 +26,12 @@ window.addEventListener('load', () => {
   const openSearch = () => {
     btf.overflowPaddingR.add()
     animateElements(true)
-    setTimeout(() => { document.querySelector('#algolia-search .ais-SearchBox-input').focus() }, 100)
+    showLoading(false)
+
+    setTimeout(() => {
+      const searchInput = document.querySelector('#algolia-search-input .ais-SearchBox-input')
+      if (searchInput) searchInput.focus()
+    }, 100)
 
     const handleEscape = event => {
       if (event.code === 'Escape') {
@@ -55,9 +60,38 @@ window.addEventListener('load', () => {
     document.querySelector('#algolia-search .search-close-button').addEventListener('click', closeSearch)
   }
 
-  const cutContent = (content) => {
+  const cutContent = content => {
     if (!content) return ''
-    const firstOccur = content.indexOf('<mark>')
+
+    let contentStr = ''
+    if (typeof content === 'string') {
+      contentStr = content.trim()
+    } else if (typeof content === 'object') {
+      if (content.value !== undefined) {
+        contentStr = String(content.value).trim()
+        if (!contentStr) return ''
+      } else if (content.matchedWords || content.matchLevel || content.fullyHighlighted !== undefined) {
+        return ''
+      } else {
+        try {
+          contentStr = JSON.stringify(content).trim()
+          if (contentStr === '{}' || contentStr === '[]' || contentStr === '""') {
+            return ''
+          }
+        } catch (e) {
+          return ''
+        }
+      }
+    } else if (content.toString && typeof content.toString === 'function') {
+      contentStr = content.toString().trim()
+      if (contentStr === '[object Object]' || contentStr === '[object Array]') {
+        return ''
+      }
+    } else {
+      return ''
+    }
+
+    const firstOccur = contentStr.indexOf('<mark>')
     let start = firstOccur - 30
     let end = firstOccur + 120
     let pre = ''
@@ -70,94 +104,454 @@ window.addEventListener('load', () => {
       pre = '...'
     }
 
-    if (end > content.length) {
-      end = content.length
+    if (end > contentStr.length) {
+      end = contentStr.length
     } else {
       post = '...'
     }
 
-    return `${pre}${content.substring(start, end)}${post}`
+    // Ensure we don't cut off HTML tags in the middle
+    let substr = contentStr.substring(start, end)
+
+    // Handle tag completeness
+    // Check for incomplete opening tags at the beginning
+    const firstCloseBracket = substr.indexOf('>')
+    const firstOpenBracket = substr.indexOf('<')
+
+    // If there's a closing bracket but no opening bracket before it, we've cut a tag
+    if (firstCloseBracket !== -1 && (firstOpenBracket === -1 || firstCloseBracket < firstOpenBracket)) {
+      substr = substr.substring(firstCloseBracket + 1)
+    }
+
+    // Check for incomplete closing tags at the end
+    const lastOpenBracket = substr.lastIndexOf('<')
+    const lastCloseBracket = substr.lastIndexOf('>')
+
+    // If there's an opening bracket after the last closing bracket, we've cut a tag
+    if (lastOpenBracket !== -1 && lastOpenBracket > lastCloseBracket) {
+      substr = substr.substring(0, lastOpenBracket)
+    }
+
+    // Balance tags in the substring
+    const tagStack = []
+    let balancedStr = ''
+    let i = 0
+
+    while (i < substr.length) {
+      if (substr[i] === '<') {
+        // Check if it's a closing tag
+        if (substr[i + 1] === '/') {
+          const closeTagEnd = substr.indexOf('>', i)
+          if (closeTagEnd !== -1) {
+            const closeTagName = substr.substring(i + 2, closeTagEnd)
+            // Remove matching opening tag from stack
+            for (let j = tagStack.length - 1; j >= 0; j--) {
+              if (tagStack[j] === closeTagName) {
+                tagStack.splice(j, 1)
+                break
+              }
+            }
+            balancedStr += substr.substring(i, closeTagEnd + 1)
+            i = closeTagEnd + 1
+            continue
+          }
+        } else if (substr.substr(i, 2) === '<!' || (substr.indexOf('/>', i) !== -1 && substr.indexOf('/>', i) < substr.indexOf('>', i))) {
+          const tagEnd = substr.indexOf('>', i)
+          if (tagEnd !== -1) {
+            balancedStr += substr.substring(i, tagEnd + 1)
+            i = tagEnd + 1
+            continue
+          }
+        } else {
+          const tagEnd = substr.indexOf('>', i)
+          if (tagEnd !== -1) {
+            const tagName = substr.substring(i + 1, (substr.indexOf(' ', i) > -1 && substr.indexOf(' ', i) < tagEnd)
+              ? substr.indexOf(' ', i)
+              : tagEnd).split(/\s/)[0]
+            tagStack.push(tagName)
+            balancedStr += substr.substring(i, tagEnd + 1)
+            i = tagEnd + 1
+            continue
+          }
+        }
+      }
+      balancedStr += substr[i]
+      i++
+    }
+
+    // Close any unclosed tags
+    while (tagStack.length > 0) {
+      const tagName = tagStack.pop()
+      balancedStr += `</${tagName}>`
+    }
+
+    // If we removed content from the beginning, add prefix
+    if (start > 0 || pre) {
+      const actualFirstOpenBracket = contentStr.indexOf('<', start > 0 ? start - 30 : 0)
+      const actualFirstMark = contentStr.indexOf('<mark>', start > 0 ? start - 30 : 0)
+
+      if (actualFirstOpenBracket !== -1 &&
+          (actualFirstMark === -1 || actualFirstOpenBracket < actualFirstMark)) {
+        pre = '...'
+      }
+    }
+
+    substr = balancedStr
+    return `${pre}${substr}${post}`
   }
 
-  const disableDiv = [
-    document.getElementById('algolia-hits'),
-    document.getElementById('algolia-pagination'),
-    document.querySelector('#algolia-info .algolia-stats')
-  ]
+  // Helper function to handle Algolia highlight results
+  const extractHighlightValue = highlightObj => {
+    if (!highlightObj) return ''
 
-  const searchClient = typeof algoliasearch === 'function' ? algoliasearch : window['algoliasearch/lite'].liteClient
-  const search = instantsearch({
-    indexName,
-    searchClient: searchClient(appId, apiKey),
-    searchFunction (helper) {
-      disableDiv.forEach(item => {
-        item.style.display = helper.state.query ? '' : 'none'
-      })
-      if (helper.state.query) helper.search()
+    if (typeof highlightObj === 'string') {
+      return highlightObj.trim()
     }
-  })
 
-  const widgets = [
-    instantsearch.widgets.configure({ hitsPerPage }),
-    instantsearch.widgets.searchBox({
-      container: '#algolia-search-input',
-      showReset: false,
-      showSubmit: false,
-      placeholder: languages.input_placeholder,
-      showLoadingIndicator: true
-    }),
-    instantsearch.widgets.hits({
-      container: '#algolia-hits',
-      templates: {
-        item (data) {
-          const link = data.permalink || (GLOBAL_CONFIG.root + data.path)
-          const result = data._highlightResult
-          const content = result.contentStripTruncate
-            ? cutContent(result.contentStripTruncate.value)
-            : result.contentStrip
-              ? cutContent(result.contentStrip.value)
-              : result.content
-                ? cutContent(result.content.value)
-                : ''
-          return `
-            <a href="${link}" class="algolia-hit-item-link">
-              <span class="algolia-hits-item-title">${result.title.value || 'no-title'}</span>
-              ${content ? `<div class="algolia-hit-item-content">${content}</div>` : ''}
-            </a>`
-        },
-        empty (data) {
-          return `<div id="algolia-hits-empty">${languages.hits_empty.replace(/\$\{query}/, data.query)}</div>`
+    if (typeof highlightObj === 'object' && highlightObj.value !== undefined) {
+      return String(highlightObj.value).trim()
+    }
+
+    return ''
+  }
+
+  // Initialize Algolia client
+  let searchClient
+
+  if (window['algoliasearch/lite'] && typeof window['algoliasearch/lite'].liteClient === 'function') {
+    searchClient = window['algoliasearch/lite'].liteClient(appId, apiKey)
+  } else if (typeof window.algoliasearch === 'function') {
+    searchClient = window.algoliasearch(appId, apiKey)
+  } else {
+    return console.error('Algolia search client not found!')
+  }
+
+  if (!searchClient) {
+    return console.error('Failed to initialize Algolia search client')
+  }
+
+  // Search state
+  let currentQuery = ''
+
+  // Show loading state
+  const showLoading = show => {
+    const loadingIndicator = document.getElementById('loading-status')
+    if (loadingIndicator) {
+      loadingIndicator.hidden = !show
+    }
+  }
+
+  // Cache frequently used elements
+  const elements = {
+    get searchInput () { return document.querySelector('#algolia-search-input .ais-SearchBox-input') },
+    get hits () { return document.getElementById('algolia-hits') },
+    get hitsEmpty () { return document.getElementById('algolia-hits-empty') },
+    get hitsList () { return document.querySelector('#algolia-hits .ais-Hits-list') },
+    get hitsWrapper () { return document.querySelector('#algolia-hits .ais-Hits') },
+    get pagination () { return document.getElementById('algolia-pagination') },
+    get paginationList () { return document.querySelector('#algolia-pagination .ais-Pagination-list') },
+    get stats () { return document.querySelector('#algolia-info .ais-Stats-text') },
+  }
+
+  // Show/hide search results area
+  const toggleResultsVisibility = hasResults => {
+    elements.pagination.style.display = hasResults ? '' : 'none'
+    elements.stats.style.display = hasResults ? '' : 'none'
+  }
+
+  // Render search results
+  const renderHits = (hits, query, page = 0) => {
+    if (hits.length === 0 && query) {
+      elements.hitsEmpty.textContent = languages.hits_empty.replace(/\$\{query}/, query)
+      elements.hitsEmpty.style.display = ''
+      elements.hitsWrapper.style.display = 'none'
+      elements.stats.style.display = 'none'
+      return
+    }
+
+    elements.hitsEmpty.style.display = 'none'
+
+    const hitsHTML = hits.map((hit, index) => {
+      const itemNumber = page * hitsPerPage + index + 1
+      const link = hit.permalink || (GLOBAL_CONFIG.root + hit.path)
+      const result = hit._highlightResult || hit
+
+      // Content extraction
+      let content = ''
+      try {
+        if (result.contentStripTruncate) {
+          content = cutContent(result.contentStripTruncate)
+        } else if (result.contentStrip) {
+          content = cutContent(result.contentStrip)
+        } else if (result.content) {
+          content = cutContent(result.content)
+        } else if (hit.contentStripTruncate) {
+          content = cutContent(hit.contentStripTruncate)
+        } else if (hit.contentStrip) {
+          content = cutContent(hit.contentStrip)
+        } else if (hit.content) {
+          content = cutContent(hit.content)
         }
+      } catch (error) {
+        content = ''
       }
-    }),
-    instantsearch.widgets.stats({
-      container: '#algolia-info > .algolia-stats',
-      templates: {
-        text (data) {
-          const stats = languages.hits_stats
-            .replace(/\$\{hits}/, data.nbHits)
-            .replace(/\$\{time}/, data.processingTimeMS)
-          return `<hr>${stats}`
+
+      // Title handling
+      let title = 'no-title'
+      try {
+        if (result.title) {
+          title = extractHighlightValue(result.title) || 'no-title'
+        } else if (hit.title) {
+          title = extractHighlightValue(hit.title) || 'no-title'
         }
+
+        if (!title || title === 'no-title') {
+          if (typeof hit.title === 'string' && hit.title.trim()) {
+            title = hit.title.trim()
+          } else if (hit.title && typeof hit.title === 'object' && hit.title.value) {
+            title = String(hit.title.value).trim() || 'no-title'
+          } else {
+            title = 'no-title'
+          }
+        }
+      } catch (error) {
+        title = 'no-title'
       }
-    }),
-    instantsearch.widgets.poweredBy({
-      container: '#algolia-info > .algolia-poweredBy'
-    }),
-    instantsearch.widgets.pagination({
-      container: '#algolia-pagination',
-      totalPages: 5,
-      templates: {
-        first: '<i class="fas fa-angle-double-left"></i>',
-        last: '<i class="fas fa-angle-double-right"></i>',
-        previous: '<i class="fas fa-angle-left"></i>',
-        next: '<i class="fas fa-angle-right"></i>'
+
+      return `
+        <li class="ais-Hits-item" value="${itemNumber}">
+          <a href="${link}" class="algolia-hit-item-link">
+            <span class="algolia-hits-item-title">${title}</span>
+            ${content ? `<div class="algolia-hit-item-content">${content}</div>` : ''}
+          </a>
+        </li>`
+    }).join('')
+
+    elements.hitsList.innerHTML = hitsHTML
+    elements.hitsWrapper.style.display = query ? '' : 'none'
+
+    if (hits.length > 0) {
+      elements.stats.style.display = ''
+    }
+  }
+
+  // Render pagination
+  const renderPagination = (page, nbPages) => {
+    if (nbPages <= 1) {
+      elements.pagination.style.display = 'none'
+      elements.paginationList.innerHTML = ''
+      return
+    }
+
+    elements.pagination.style.display = 'block'
+
+    const isFirstPage = page === 0
+    const isLastPage = page === nbPages - 1
+
+    // Responsive page display
+    const isMobile = window.innerWidth < 768
+    const maxVisiblePages = isMobile ? 3 : 5
+    let startPage = Math.max(0, page - Math.floor(maxVisiblePages / 2))
+    const endPage = Math.min(nbPages - 1, startPage + maxVisiblePages - 1)
+
+    // Adjust starting page to maintain max visible pages
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      startPage = Math.max(0, endPage - maxVisiblePages + 1)
+    }
+
+    let pagesHTML = ''
+
+    // Only add ellipsis and first page when there are many pages
+    if (nbPages > maxVisiblePages && startPage > 0) {
+      pagesHTML += `
+        <li class="ais-Pagination-item ais-Pagination-item--page">
+          <a class="ais-Pagination-link" aria-label="Page 1" href="#" data-page="0">1</a>
+        </li>`
+      if (startPage > 1) {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--ellipsis">
+            <span class="ais-Pagination-link">...</span>
+          </li>`
+      }
+    }
+
+    // Add middle page numbers
+    for (let i = startPage; i <= endPage; i++) {
+      const isSelected = i === page
+      if (isSelected) {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
+            <span class="ais-Pagination-link" aria-label="Page ${i + 1}">${i + 1}</span>
+          </li>`
+      } else {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--page">
+            <a class="ais-Pagination-link" aria-label="Page ${i + 1}" href="#" data-page="${i}">${i + 1}</a>
+          </li>`
+      }
+    }
+
+    // Only add ellipsis and last page when there are many pages
+    if (nbPages > maxVisiblePages && endPage < nbPages - 1) {
+      if (endPage < nbPages - 2) {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--ellipsis">
+            <span class="ais-Pagination-link">...</span>
+          </li>`
+      }
+      pagesHTML += `
+        <li class="ais-Pagination-item ais-Pagination-item--page">
+          <a class="ais-Pagination-link" aria-label="Page ${nbPages}" href="#" data-page="${nbPages - 1}">${nbPages}</a>
+        </li>`
+    }
+
+    if (nbPages > 1) {
+      elements.paginationList.innerHTML = `
+            <li class="ais-Pagination-item ais-Pagination-item--previousPage ${isFirstPage ? 'ais-Pagination-item--disabled' : ''}">
+              ${isFirstPage
+                ? '<span class="ais-Pagination-link ais-Pagination-link--disabled" aria-label="Previous Page"><i class="fas fa-angle-left"></i></span>'
+                : `<a class="ais-Pagination-link" aria-label="Previous Page" href="#" data-page="${page - 1}"><i class="fas fa-angle-left"></i></a>`
+              }
+            </li>
+            ${pagesHTML}
+            <li class="ais-Pagination-item ais-Pagination-item--nextPage ${isLastPage ? 'ais-Pagination-item--disabled' : ''}">
+              ${isLastPage
+                ? '<span class="ais-Pagination-link ais-Pagination-link--disabled" aria-label="Next Page"><i class="fas fa-angle-right"></i></span>'
+                : `<a class="ais-Pagination-link" aria-label="Next Page" href="#" data-page="${page + 1}"><i class="fas fa-angle-right"></i></a>`
+              }
+            </li>`
+      elements.pagination.style.display = currentQuery ? '' : 'none'
+    } else {
+      elements.pagination.style.display = 'none'
+    }
+  }
+
+  // Render statistics
+  const renderStats = (nbHits, processingTimeMS, query) => {
+    if (query) {
+      const stats = languages.hits_stats
+        .replace(/\$\{hits}/, nbHits)
+        .replace(/\$\{time}/, processingTimeMS)
+      elements.stats.innerHTML = `<hr>${stats}`
+      elements.stats.style.display = ''
+    } else {
+      elements.stats.style.display = 'none'
+    }
+  }
+
+  // Perform search
+  const performSearch = async (query, page = 0) => {
+    if (!query.trim()) {
+      currentQuery = ''
+      renderHits([], '', 0)
+      renderPagination(0, 0)
+      renderStats(0, 0, '')
+      toggleResultsVisibility(false)
+      return
+    }
+
+    showLoading(true)
+    currentQuery = query
+
+    try {
+      let result
+
+      if (searchClient && typeof searchClient.search === 'function') {
+        // v5 multi-index search
+        const searchResult = await searchClient.search([{
+          indexName,
+          query,
+          params: {
+            page,
+            hitsPerPage,
+            highlightPreTag: '<mark>',
+            highlightPostTag: '</mark>',
+            attributesToHighlight: ['title', 'content', 'contentStrip', 'contentStripTruncate']
+          }
+        }])
+        result = searchResult.results[0]
+      } else if (searchClient && typeof searchClient.initIndex === 'function') {
+        // v4 single-index search
+        const index = searchClient.initIndex(indexName)
+        result = await index.search(query, {
+          page,
+          hitsPerPage,
+          highlightPreTag: '<mark>',
+          highlightPostTag: '</mark>',
+          attributesToHighlight: ['title', 'content', 'contentStrip', 'contentStripTruncate']
+        })
+      } else {
+        throw new Error('Algolia: No compatible search method available')
+      }
+
+      renderHits(result.hits || [], query, page)
+
+      const actualNbPages = result.nbHits <= hitsPerPage ? 1 : (result.nbPages || 0)
+      renderPagination(page, actualNbPages)
+      renderStats(result.nbHits || 0, result.processingTimeMS || 0, query)
+
+      const hasResults = result.hits && result.hits.length > 0
+      toggleResultsVisibility(hasResults)
+
+      // Refresh Pjax links
+      if (window.pjax) {
+        window.pjax.refresh(document.getElementById('algolia-hits'))
+      }
+    } catch (error) {
+      console.error('Algolia search error:', error)
+      renderHits([], query, page)
+      renderPagination(0, 0)
+      renderStats(0, 0, query)
+    } finally {
+      showLoading(false)
+    }
+  }
+
+  // Debounced search
+  let searchTimeout
+  const debouncedSearch = (query, delay = 300) => {
+    clearTimeout(searchTimeout)
+    searchTimeout = setTimeout(() => performSearch(query), delay)
+  }
+
+  // Initialize search box and events
+  const initializeSearch = () => {
+    showLoading(false)
+
+    if (elements.searchInput) {
+      elements.searchInput.addEventListener('input', e => {
+        const query = e.target.value
+        debouncedSearch(query)
+      })
+    }
+
+    const searchForm = document.querySelector('#algolia-search-input .ais-SearchBox-form')
+    if (searchForm) {
+      searchForm.addEventListener('submit', e => {
+        e.preventDefault()
+        const query = elements.searchInput.value
+        performSearch(query)
+      })
+    }
+
+    // Pagination event delegation
+    elements.pagination.addEventListener('click', e => {
+      e.preventDefault()
+      const link = e.target.closest('a[data-page]')
+      if (link) {
+        const page = parseInt(link.dataset.page, 10)
+        if (!isNaN(page) && currentQuery) {
+          performSearch(currentQuery, page)
+        }
       }
     })
-  ]
 
-  search.addWidgets(widgets)
-  search.start()
+    // Initial state
+    toggleResultsVisibility(false)
+  }
+
+  // Initialize
+  initializeSearch()
   searchClickFn()
   searchFnOnce()
 
@@ -165,10 +559,4 @@ window.addEventListener('load', () => {
     if (!btf.isHidden($searchMask)) closeSearch()
     searchClickFn()
   })
-
-  if (window.pjax) {
-    search.on('render', () => {
-      window.pjax.refresh(document.getElementById('algolia-hits'))
-    })
-  }
 })

themes/butterfly/source/js/search/local-search.js

@@ -156,10 +156,10 @@ class LocalSearch {
       }
 
       slicesOfContent.forEach(slice => {
-        resultItem += `<p class="search-result">${this.highlightKeyword(content, slice)}...</p></a>`
+        resultItem += `<p class="search-result">${this.highlightKeyword(content, slice)}...</p>`
       })
 
-      resultItem += '</li>'
+      resultItem += '</a></li>'
       resultItems.push({
         item: resultItem,
         id: resultItems.length,
@@ -236,40 +236,229 @@ class LocalSearch {
 
 window.addEventListener('load', () => {
 // Search
-  const { path, top_n_per_article, unescape, languages } = GLOBAL_CONFIG.localSearch
+  const { path, top_n_per_article, unescape, languages, pagination } = GLOBAL_CONFIG.localSearch
+  const enablePagination = pagination && pagination.enable
   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 input = document.querySelector('.local-search-input input')
+  const statsItem = document.getElementById('local-search-stats')
   const $loadingStatus = document.getElementById('loading-status')
   const isXml = !path.endsWith('json')
 
+  // Pagination variables (only initialize if pagination is enabled)
+  let currentPage = 0
+  const hitsPerPage = pagination.hitsPerPage || 10
+
+  let currentResultItems = []
+
+  if (!enablePagination) {
+    // If pagination is disabled, we don't need these variables
+    currentPage = undefined
+    currentResultItems = undefined
+  }
+
+  // Cache frequently used elements
+  const elements = {
+    get pagination () { return document.getElementById('local-search-pagination') },
+    get paginationList () { return document.querySelector('#local-search-pagination .ais-Pagination-list') }
+  }
+
+  // Show/hide search results area
+  const toggleResultsVisibility = hasResults => {
+    if (enablePagination) {
+      elements.pagination.style.display = hasResults ? '' : 'none'
+    } else {
+      elements.pagination.style.display = 'none'
+    }
+  }
+
+  // Render search results for current page
+  const renderResults = (searchText, resultItems) => {
+    const container = document.getElementById('local-search-results')
+
+    // Determine items to display based on pagination mode
+    const itemsToDisplay = enablePagination
+      ? currentResultItems.slice(currentPage * hitsPerPage, (currentPage + 1) * hitsPerPage)
+      : resultItems
+
+    // Handle empty page in pagination mode
+    if (enablePagination && itemsToDisplay.length === 0 && currentResultItems.length > 0) {
+      currentPage = 0
+      renderResults(searchText, resultItems)
+      return
+    }
+
+    // Add numbering to items
+    const numberedItems = itemsToDisplay.map((result, index) => {
+      const itemNumber = enablePagination
+        ? currentPage * hitsPerPage + index + 1
+        : index + 1
+      return result.item.replace(
+        '<li class="local-search-hit-item">',
+        `<li class="local-search-hit-item" value="${itemNumber}">`
+      )
+    })
+
+    container.innerHTML = `<ol class="search-result-list">${numberedItems.join('')}</ol>`
+
+    // Update stats
+    const displayCount = enablePagination ? currentResultItems.length : resultItems.length
+    const stats = languages.hits_stats.replace(/\$\{hits}/, displayCount)
+    statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
+
+    // Handle pagination
+    if (enablePagination) {
+      const nbPages = Math.ceil(currentResultItems.length / hitsPerPage)
+      renderPagination(currentPage, nbPages, searchText)
+    }
+
+    const hasResults = resultItems.length > 0
+    toggleResultsVisibility(hasResults)
+
+    window.pjax && window.pjax.refresh(container)
+  }
+
+  // Render pagination
+  const renderPagination = (page, nbPages, query) => {
+    if (nbPages <= 1) {
+      elements.pagination.style.display = 'none'
+      elements.paginationList.innerHTML = ''
+      return
+    }
+
+    elements.pagination.style.display = 'block'
+
+    const isFirstPage = page === 0
+    const isLastPage = page === nbPages - 1
+
+    // Responsive page display
+    const isMobile = window.innerWidth < 768
+    const maxVisiblePages = isMobile ? 3 : 5
+    let startPage = Math.max(0, page - Math.floor(maxVisiblePages / 2))
+    const endPage = Math.min(nbPages - 1, startPage + maxVisiblePages - 1)
+
+    // Adjust starting page to maintain max visible pages
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      startPage = Math.max(0, endPage - maxVisiblePages + 1)
+    }
+
+    let pagesHTML = ''
+
+    // Only add ellipsis and first page when there are many pages
+    if (nbPages > maxVisiblePages && startPage > 0) {
+      pagesHTML += `
+        <li class="ais-Pagination-item ais-Pagination-item--page">
+          <a class="ais-Pagination-link" aria-label="Page 1" href="#" data-page="0">1</a>
+        </li>`
+      if (startPage > 1) {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--ellipsis">
+            <span class="ais-Pagination-link">...</span>
+          </li>`
+      }
+    }
+
+    // Add middle page numbers
+    for (let i = startPage; i <= endPage; i++) {
+      const isSelected = i === page
+      if (isSelected) {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
+            <span class="ais-Pagination-link" aria-label="Page ${i + 1}">${i + 1}</span>
+          </li>`
+      } else {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--page">
+            <a class="ais-Pagination-link" aria-label="Page ${i + 1}" href="#" data-page="${i}">${i + 1}</a>
+          </li>`
+      }
+    }
+
+    // Only add ellipsis and last page when there are many pages
+    if (nbPages > maxVisiblePages && endPage < nbPages - 1) {
+      if (endPage < nbPages - 2) {
+        pagesHTML += `
+          <li class="ais-Pagination-item ais-Pagination-item--ellipsis">
+            <span class="ais-Pagination-link">...</span>
+          </li>`
+      }
+      pagesHTML += `
+        <li class="ais-Pagination-item ais-Pagination-item--page">
+          <a class="ais-Pagination-link" aria-label="Page ${nbPages}" href="#" data-page="${nbPages - 1}">${nbPages}</a>
+        </li>`
+    }
+
+    if (nbPages > 1) {
+      elements.paginationList.innerHTML = `
+            <li class="ais-Pagination-item ais-Pagination-item--previousPage ${isFirstPage ? 'ais-Pagination-item--disabled' : ''}">
+              ${isFirstPage
+                ? '<span class="ais-Pagination-link ais-Pagination-link--disabled" aria-label="Previous Page"><i class="fas fa-angle-left"></i></span>'
+                : `<a class="ais-Pagination-link" aria-label="Previous Page" href="#" data-page="${page - 1}"><i class="fas fa-angle-left"></i></a>`
+              }
+            </li>
+            ${pagesHTML}
+            <li class="ais-Pagination-item ais-Pagination-item--nextPage ${isLastPage ? 'ais-Pagination-item--disabled' : ''}">
+              ${isLastPage
+                ? '<span class="ais-Pagination-link ais-Pagination-link--disabled" aria-label="Next Page"><i class="fas fa-angle-right"></i></span>'
+                : `<a class="ais-Pagination-link" aria-label="Next Page" href="#" data-page="${page + 1}"><i class="fas fa-angle-right"></i></a>`
+              }
+            </li>`
+    } else {
+      elements.pagination.style.display = 'none'
+    }
+  }
+
+  // Clear search results and stats
+  const clearSearchResults = () => {
+    const container = document.getElementById('local-search-results')
+    container.textContent = ''
+    statsItem.textContent = ''
+    toggleResultsVisibility(false)
+    if (enablePagination) {
+      currentResultItems = []
+      currentPage = 0
+    }
+  }
+
+  // Show no results message
+  const showNoResults = searchText => {
+    const container = document.getElementById('local-search-results')
+    container.textContent = ''
+    const statsDiv = document.createElement('div')
+    statsDiv.className = 'search-result-stats'
+    statsDiv.textContent = languages.hits_empty.replace(/\$\{query}/, searchText)
+    statsItem.innerHTML = statsDiv.outerHTML
+    toggleResultsVisibility(false)
+    if (enablePagination) {
+      currentResultItems = []
+      currentPage = 0
+    }
+  }
+
   const inputEventFunction = () => {
     if (!localSearch.isfetched) return
     let searchText = input.value.trim().toLowerCase()
     isXml && (searchText = searchText.replace(/</g, '&lt;').replace(/>/g, '&gt;'))
-    if (searchText !== '') $loadingStatus.innerHTML = '<i class="fas fa-spinner fa-pulse"></i>'
+
+    if (searchText !== '') $loadingStatus.hidden = false
+
     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.textContent = ''
-      statsItem.textContent = ''
+      clearSearchResults()
     } else if (resultItems.length === 0) {
-      container.textContent = ''
-      const statsDiv = document.createElement('div')
-      statsDiv.className = 'search-result-stats'
-      statsDiv.textContent = languages.hits_empty.replace(/\$\{query}/, searchText)
-      statsItem.innerHTML = statsDiv.outerHTML
+      showNoResults(searchText)
     } else {
+      // Sort results by relevance
       resultItems.sort((left, right) => {
         if (left.includedCount !== right.includedCount) {
           return right.includedCount - left.includedCount
@@ -279,14 +468,14 @@ window.addEventListener('load', () => {
         return right.id - left.id
       })
 
-      const stats = languages.hits_stats.replace(/\$\{hits}/, resultItems.length)
-
-      container.innerHTML = `<ol class="search-result-list">${resultItems.map(result => result.item).join('')}</ol>`
-      statsItem.innerHTML = `<hr><div class="search-result-stats">${stats}</div>`
-      window.pjax && window.pjax.refresh(container)
+      if (enablePagination) {
+        currentResultItems = resultItems
+        currentPage = 0
+      }
+      renderResults(searchText, resultItems)
     }
 
-    $loadingStatus.textContent = ''
+    $loadingStatus.hidden = true
   }
 
   let loadFlag = false
@@ -340,11 +529,29 @@ window.addEventListener('load', () => {
       localSearch.fetchData()
     }
     localSearch.highlightSearchWords(document.getElementById('article-container'))
+
+    // Pagination event delegation - only add if pagination is enabled
+    if (enablePagination) {
+      elements.pagination.addEventListener('click', e => {
+        e.preventDefault()
+        const link = e.target.closest('a[data-page]')
+        if (link) {
+          const page = parseInt(link.dataset.page, 10)
+          if (!isNaN(page) && currentResultItems.length > 0) {
+            currentPage = page
+            renderResults(input.value.trim().toLowerCase(), currentResultItems)
+          }
+        }
+      })
+    }
+
+    // Initial state
+    toggleResultsVisibility(false)
   }
 
   window.addEventListener('search:loaded', () => {
     const $loadDataItem = document.getElementById('loading-database')
-    $loadDataItem.nextElementSibling.style.display = 'block'
+    $loadDataItem.nextElementSibling.style.visibility = 'visible'
     $loadDataItem.remove()
   })