如何將 Flask 搜尋引擎結果拆分到不同的頁面？

Question

我使用 Flask 創建了一個搜尋引擎，它會傳回從與健康主題相關的文章產生的維基百科語料庫的搜尋結果。有些查詢會傳回數百個結果，因此我想新增一個功能，將結果拆分為多個頁面。下面是產生網頁的index.html程式碼：

{% extends "base.html" %}
{% block title %}Search Page{% endblock %}
{% block contents %}

  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="search-result-box card-box">
          <div class="row">
            <div class="col-md-8 offset-md-2">
              <div class="pt-3 pb-4">
                <div class="search-form">
                  <form action="#" method="POST">
                      <div class="input-group">
                        <input type="text" name="msg" class="form-control input-lg">                    
                        <div class="input-group-btn">
                          <button class="btn  btn-primary" type="submit">Search</button>
                        </div>
                      </div>
                  </form>
                </div>

                <div class="mt-4 text-center"><h4>Search Results For {{user_query}}</h4></div>
              </div>
            </div>
          </div>
          <!-- end row -->
          <ul class="nav nav-tabs tabs-bordered">
              <li class="nav-item"><a href="#home" data-toggle="tab" aria-expanded="true" class="nav-link active">All results <span class="badge badge-success ml-1">{{search_results_list|length}}</span></a></li>
          </ul>
             <div class="tab-content">
                <div class="tab-pane active" id="home">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="search-item">
                                {% if search_results_list|length > 0 %}

                                {% for r in search_results_list %}

                                <div class="font-13 text-success mb-3"><a href='{{r[0]}}' target="_blank">{{r[0]}}</a></div>
                                <div class="font-13 text-success mb-3"><p target="_blank">{{r[1]}}</p></div>

                                {% endfor %}
                                {% else %}
                                <p class="mt-4 text-center">No search result</P>
                                {% endif %}
                              </div>
                                <ul class="pagination justify-content-end pagination-split mt-0">
                                  <li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span> <span class="sr-only">Previous</span></a></li>
                                  <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                  <li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span> <span class="sr-only">Next</span></a></li>
                              </ul>
                              <div class="clearfix"></div>
                           </div>
                     </div>
                </div>
                <!-- end All results tab -->

              </div>
            </div>
         </div>
        </div>
        <!-- end row -->
  </div>
  <!-- Footer -->
  <footer id="main-footer" class="pt-2 py-4 bg-dark text-white text-center">
    Copyright &copy;
    <span class="year"></span> Team Dream
  </footer>
  <!-- container -->


{% endblock %}

我沒有太多使用 HTML 建立網頁的經驗，所以我不完全確定如何新增此功能。這裡還有生成應用程式的 Python 程式碼：

from flask import Flask, render_template, request
from search_engine import query_prep, OkapiBM25
import pickle

app = Flask(__name__)

@app.route('/')
def results():
    return render_template('index.html')

@app.route('/', methods=['POST'])
def process_res():
    with open("inv_index.pickle", "rb") as file:
        inv_ind = pickle.load(file)
    user_search_query = request.form['msg']
    queries = {'q': query_prep(user_search_query)}
    ranking = OkapiBM25(inv_ind, queries)['q']
    seen = set()

    newRes= []
    myDict = pickle.load(open('text_summaries.pickle','rb'))
    
    for r in ranking:
        newRes.append((r[1], myDict[r[1]]))

    return render_template('index.html', search_results_list = newRes,
                                          user_query=user_search_query)

if __name__ == "__main__":
    app.run(debug=True)

程式碼使用語料庫的倒排索引開啟一個 pickle 文件，然後針對該索引執行查詢，對結果進行排名並傳回它們。每個搜尋結果下方也顯示每個維基百科文章的文字摘要。如果您想嘗試一下並看看我正在嘗試做什麼，這裡是網頁的部署版本：https://searchenginecapstone.herokuapp.com/

如果您搜尋“健康”，您會看到一頁上有 442 個結果。我想調整程式碼（我認為這將僅在 HTML 部分中完成 - 但不完全確定）以將結果分成 10-20 個區塊。頁面右下角已經有一個用於頁面的按鈕，但目前它沒有任何作用。我感謝您提供的任何幫助或想法。如果您還需要從編碼方面查看其他內容來回答這個問題，請告訴我。

我發現 Flask 對 paginate() 方法的分頁有本機支持，因此如果我使用以下內容修改 render_template() 中傳回的內容：

from flask_paginate import Pagination, get_page_parameter

    def process_res():
    with open("inv_index.pickle", "rb") as file:
        inv_ind = pickle.load(file)
    user_search_query = request.form['msg']
    queries = {'q': query_prep(user_search_query)}
    ranking = OkapiBM25(inv_ind, queries)['q']
    seen = set()

    newRes= []
    myDict = pickle.load(open('text_summaries.pickle','rb'))
    
    for r in ranking:
        newRes.append((r[1], myDict[r[1]]))

    page = request.args.get(get_page_parameter(), type=int, default=1)
    pagination = Pagination(page=page, total=len(newRes), search=user_search_query, record_name='Search Results')
    return render_template('index.html', search_results_list = newRes,
                                          user_query=user_search_query,
                                          Pagination = pagination)

該頁面似乎可以工作（沒有出現分頁），所以我想我必須更新索引文件以反映分頁更改，但我不知道如何。

Answer 1

如果您使用 Flask-SQLAlchemy 擴展，則可以使用 paginate() 方法將搜尋引擎結果分割為不同的頁面。