在烧瓶烧瓶中对长页面进行分页

Question

我是 python 新手，我正在尝试使用 Flask 框架制作网站。

我正在使用Flask-FlatPages 扩展名来呈现来自特定目录的markdown 文件，并且我想对页面进行分页。为了防止长页面和无限滚动，我想剪切页面并将每个页面呈现在多个页面上。我在想一个简单的方法可能是剪切像<h2>这样的html标签。

我不确定我是否足够清楚，主要思想是一种多部分文章或系列文章。

我只找到了有关使用数据库和分页查询结果的答案。

我不知道这是否应该在 python/flask 或 jinja 模板中完成。

---

编辑： 正如我在此处的评论中提到的，我正在使用它来渲染我的 .md 文件：

pages = FlatPages(app)

@app.route('/')
def index():
    # Articles are pages with a publication date
    articles = (p for p in pages if 'published' in p.meta)
    # Show the 10 most recent articles, most recent first.
    latest = sorted(articles, reverse=True,
                    key=lambda p: p.meta['published'])
    return render_template('articles.html', articles=latest[:10])

@app.route('/<path:path>/')
def page(path):
    page = pages.get_or_404(path)
    template = page.meta.get('template', 'flatpage.html')
    return render_template(template, page=page)

我认为我需要修改这条路线（或平面模板），以分页page。

Answer 1

最简单的方法是在您的FLATPAGES_MARKDOWN_EXTENSIONS 中启用the table of contents extension（或者，您可以启用header IDs 或attribute lists 并自己维护TOC。）：

FLATPAGES_MARKDOWN_EXTENSIONS = ['markdown.extensions.toc']

然后你可以使用一点 CSS 来设置所选元素的样式：

h2, p {
  display: none;
}
/* At some future time
   you'll be able to hide the summary
   using the :has pseudo selector.
   For now you'll have to use some JavaScript
   to listen to click events on the TOC. */
h1:has(~ h2:target), h1:has(~ h2:target) + p {
  display: none;
}

h1, h1:target + p,
h2:target, h2:target + p {
  display: block;
}

/* TOC styling - not relevant to whole */
ul {
  border: 1px solid gray;
  list-style-type: none;
  margin: 0;
  padding: 1em .25em;
}
li {
  display: inline-block;
  margin: 0;
  padding: 0;
}
li::before {
  color: #777;
  content: ":";
  display: inline-block;
  margin: 0 .5em;
}
li:first-child {
  margin-left: 0;
}
li:first-child::before {
  content: none;
}

<ul>
  <li><a href="#summary">summary</a>
  </li>
  <li><a href="#first-section">1</a>
  </li>
  <li><a href="#second-section">2</a>
  </li>
</ul>

<h1 id="summary">This is my article</h1>
<p>Some introductory content
  <br>With some lines
  <br>in it</p>
<h2 id="first-section">First section</h2>
<p>The most interesting thing about this content? It exists.</p>
<h2 id="second-section">Second section</h2>
<p>More content, content, content, content, content.</p>

Answer 2

这就是我所做的。首先，您需要限制您的数据库请求，以便如果您的结果是 2,000 条记录，您只想查看前 50 条记录，您可以在查询结束时执行类似的操作....

"order by TableName.SomeID limit " + str(int(CurrentPage) * 50 - 50) + ", 50;"

这里有更多关于限制和偏移的信息：http://www.mysqltutorial.org/mysql-limit.aspx

无论如何，使用 CurrentPage 来获取您的偏移量，以便在第 1 页上的限制看起来像这个限制 0、50 - 意思是给我 50 行并从第 0 行开始。在第 2 页上，限制看起来像这个限制 50， 50 - 表示给我 50 行并从第 50 行开始。此外，您需要在其中保留 order by 子句，以便在分页时结果保持一致。

您还需要运行另一个没有限制的查询，以便知道您总共有多少页。此查询只需选择 count(*) 即可。以下是我从该查询中计算总页数的方法...

    # 50 for the number of results per page
    TotalPages = (ResultsCount[0]['Count(*)'] // 50)  
    # find out if there is a remainder of results if so add one more page
    if((ResultsCount[0]['Count(*)'] % 50) > 0):
        TotalPages +=1

现在你的 jinja2 应该看起来像这样......

{% if TotalPages > 1 and CurrentPage < 15 %}
{% for Item in range(TotalPages) %}
{% if loop.index == CurrentPage %}
        <div style="border: 1px solid; border-color: #1C5F8B; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px"><b>{{ loop.index }}</b></div>
    {% elif loop.index < 15 %}
        <a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">{{ loop.index }}</div></a>
    {% elif loop.index == 15 %}
        <a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 28px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">Next</div></a>
    {% endif %} 
{% endfor %}
{% elif TotalPages > 1 and (CurrentPage + 15) < TotalPages %}
    {% for Item in range(15 * CurrentPage) %}
        {% if loop.index0 == (CurrentPage - 15) %}
            <a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 28px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">Prev</div></a>
        {% elif loop.index == CurrentPage %}
            <div style="border: 1px solid; border-color: #1C5F8B; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px"><b>{{ loop.index }}</b></div>
        {% elif loop.index > CurrentPage and loop.index < (CurrentPage + 15) and loop.index < TotalPages %}
            <a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">{{ loop.index }}</div></a>
        {% elif loop.index == (CurrentPage + 15) and loop.index < TotalPages %}
            <a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 28px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">Next</div></a>
        {% elif loop.index == TotalPages and (CurrentPage + 15) > TotalPages %}
            <a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">{{ loop.index }}</div></a>
        {% endif %} 
    {% endfor %}
    {% elif TotalPages > 1 %}
        {% for Item in range(15 * CurrentPage) %}
            {% if (loop.index - 1) == (CurrentPage - 15) %}
                <a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 28px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">Prev</div></a>
            {% elif loop.index == CurrentPage %}
                <div style="border: 1px solid; border-color: #1C5F8B; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px"><b>{{ loop.index }}</b></div>
            {% elif loop.index > (TotalPages - 15) and loop.index < (CurrentPage + 15) and loop.index < TotalPages %}
                <a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">{{ loop.index }}</div></a>
            {% elif loop.index == TotalPages and (CurrentPage + 15) > TotalPages %}
                <a style="cursor: pointer; color: #000000" href="/class/getdata?CurrentPage={{ loop.index }}"><div style="border: 1px solid; width: 22px; height: 16px; text-align: center; float: left; margin: 2px; padding-top: 2px">{{ loop.index }}</div></a>
            {% endif %} 
        {% endfor %}
    {% endif %}

希望这会有所帮助！