Paginate long pages in flask flask-flatpages

Question

Я новичок в python, и я пытаюсь создать сайт с использованием флеш-рамки.

Я использую расширение Flask-FlatPages для рендеринга файлов разметки из определенного каталога, и я хотел бы разбивать страницы на страницы. Чтобы предотвратить длинные страницы и бесконечную прокрутку, я хотел бы разрезать страницы и отображать каждую страницу на нескольких страницах. Я думаю, что простой способ может состоять в том, чтобы разрезать на html-тег, например <h2>.

Я не уверен, что я достаточно ясен, основная идея - это разновидность статьи из нескольких частей или серии статей.

Я только нашел ответы об использовании базы данных и результатов запроса paginate.

Я не знаю, должно ли это быть сделано в python/flask или в шаблоне jinja.

---

Edit: Как упоминалось в моем комментарии здесь, я использую это для рендеринга мои .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

Вот что я делаю. Во-первых, вам нужно ограничить ваш запрос к базе данных, так что если вы результат 2000 записей вы хотите видеть только первые 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. Также вам нужно сохранить порядок заказа, чтобы результаты оставались неизменно упорядоченными во время пейджинга.

Вам также потребуется запустить другой запрос без ограничения, чтобы вы знали, сколько у вас страниц в целом. Этот запрос может уйти, только выбрав 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 %} 

Надеются, что это помогает!

Answer 2

Самый простой способ сделать это, чтобы позволить the table of contents extension в вашей FLATPAGES_MARKDOWN_EXTENSIONS (в качестве альтернативы, вы можете включить или header IDsattribute lists и поддерживать ТОС самостоятельно.):

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>