HTML & HUBL: как добавить номера страниц - PullRequest
0 голосов
/ 03 февраля 2020

Я занимаюсь разработкой блога, и он почти готов. Мне нужны номера страниц на каждой странице, у меня уже есть стрелки для следующей и предыдущей страниц.

Это блог с пользовательским кодом, разработанный в Hubspot, поэтому используется HUBL, язык шаблонов и HTML.

Может кто-нибудь сказать мне, какую строку кода мне нужно добавить, чтобы там тоже были номера страниц?

Я разделил ее на документы: BlogList. html и Blogpost. html и покажет вам, что у меня есть.

Любой совет будет приветствоваться.

Спасибо.

BlogList. html:

<!DOCTYPE html>
<html lang="en">

<head>
  {% set page_domain = "https://hello.com" %}
  {% set images_domain = "https://login.hello.com" %}

  {% import '/2019 Theme/MacroMeta.html' %}
  {{ scm_meta(page_meta.html_title) }}
</head>
<body>
  {% import '/2019 Theme/MacroHeader.html' %}

  {{ scm_header() }}
  {{ standard_header_includes }}

  <div class="content_container">
    <div class="banner internal_banner" style="background-image: url('{{images_domain}}/blog-images/banner_blog.jpg')">
      <div class="content text-center">
        <img src="{{images_domain}}/blog-images/banner_icon_blog.png"
          srcset="{{images_domain}}/blog-images/banner_icon_blog@2x.png 2x" alt="" class="mb-4">
        <h1 class="mb-3"><strong>Blog</strong></h1>
      </div>
    </div>
    <div class="section section_grey">
      <div class="content">
        <div class="row blog_posts_list_ctn">
          {% for content in contents %}
          <div class="col-12 col-sm-6 col-md-4 py-3">
            <div class="blog_post_list">
              <div class="blog_list_img_holder">
                {% if content.post_list_summary_featured_image %}
                <a href="{{content.absolute_url}}"><img src="{{ content.post_list_summary_featured_image }}" alt=""
                    class="img-fluid"></a>
                {% endif %}
              </div>
              <div class="blog_list_text text-center">
                <div class="blog_list_date text-uppercase">
                  {{ content.updated|datetimeformat('%A, %B %e, %Y') }}
                </div>
                <div class="blog-list-title">
                  <h3><a href="{{content.absolute_url}}"><strong>{{ content.name }}</strong></a></h3>
                </div>
                <div class="blog-list-text">
                  {{ content.post_list_content|safe }}
                </div>
                <div class="blog-list-btn">
                  <a href="{{content.absolute_url}}" class="btn btn-lg btn_arrow blue">Read more</a>
                </div>
                <!--
                  {% if content.topic_list %}
                  <div class="acticle_tags">
                    {% for topic in content.topic_list %}
                    <a href="{{ group.absolute_url }}/topic/{{ topic.slug }}" tabindex="0">#{{ topic.name }}</a>{% if not loop.last %},{% endif %}
                    {% endfor %}
                  </div>
                  {% endif %}
                  -->
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        <div class="blog_paginate d-flex">
          {% if last_page_num %}
          <a href="{{ blog_page_link(last_page_num) }}" class="paginate_prev"><i class="fa fa-long-arrow-left"
              aria-hidden="true"></i> Prev</a>
          {% endif %}
          {% if next_page_num %}
          <a href="{{ blog_page_link(next_page_num) }}" class="paginate_next">Next <i class="fa fa-long-arrow-right"
              aria-hidden="true"></i></a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  {% import '/2019 Theme/MacroFooter.html' %}
  {{ scm_footer() }}
  {{ standard_footer_includes }}
</body>

</html>

BlogPost. html:

<!DOCTYPE html>
<html lang="en">

<head>
  {% set page_domain = "https://hello.com" %}
  {% set images_domain = "https://login.hello.com" %}

  {% import '/2019 Theme/MacroMeta.html' %}
  {{ scm_meta(page_meta.html_title + ' | Hello Blog') }}
  {% import '/2019 Theme/MacroBlogCanonicalUrl.html' %}
</head>

<body>
  {% import '/2019 Theme/MacroHeader.html' %}
  {{ scm_header() }}
  {{ standard_header_includes }}
  <div class="section">
    <div class="content">
      <div class="back-to-blog-link">
        <a class="back-link" href="https://blog.scanmarket.com">Back to the Hello Blog</a>
      </div>
      <div class="article_title_ctn">
        <h2 class="text-center"><strong>{{ content.name }}</strong></h2>
      </div>
      <div class="row blog_post_details py-5 my-3 my-lg-5">
        <div class="col-12 col-md-6">
          <div class="section_grey p-4 p-lg-5 blog-post-intro">
            <h3><strong>{{ content.post_list_content|safe }}</strong></h3>
          </div>
        </div>
        <div class="col-12 col-md-5 offset-md-1 mt-5 mt-md-0">
          <div class="article_details">
            <table class="table_details border-0 align-middle w-100">
              <tbody>
                <tr>
                  <td><strong>Author</strong></td>
                  <td>
                    <div class="article_authors">
                      <a class="author-link"
                        href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td><strong>Date</strong></td>
                  <td>
                    <p class="small_text text_grey mb-0 text-uppercase">
                      <strong>{{ content.updated|datetimeformat('%A, %B %e, %Y') }}</strong></p>
                  </td>
                </tr>
                <tr class="separator">
                  <td colspan="2"></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="content_small article_content content py-0">
        {{ content.post_body }}
      </div>
    </div>
  </div>

  {% import '/2019 Theme/MacroFooter.html' %}
  {{ scm_footer() }}
  {{ standard_footer_includes }}
</body>

</html>

1 Ответ

0 голосов
/ 25 апреля 2020

Код HTML / HubL: -

<div class="blog-pagination">
      {% set page_list = [-2, -1, 0, 1, 2] %}
      {% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
      {% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
      {% elif current_page_num == 2 %}{% set offset = 1 %}
      {% elif current_page_num == 1 %}{% set offset = 2 %}
      {% else %}{% set offset = 0 %}{% endif %}

      <a class="blog-pagination__link blog-pagination__prev-link {{ "blog-pagination__prev-link--disabled" if !last_page_num }}" href="{{ blog_page_link(last_page_num) }}">
        {% icon name="chevron-left" style="SOLID", width="13", no_wrapper=True %}
        Prev
      </a>
      {% for page in page_list %}
        {% set this_page = current_page_num + page + offset %}
        {% if this_page > 0 and this_page <= contents.total_page_count %}
          <a class="blog-pagination__link blog-pagination__number-link {{ "blog-pagination__link--active" if this_page == current_page_num }}" href="{{ blog_page_link(this_page) }}">{{ this_page }}</a>
        {% endif %}
      {% endfor %}
      <a class="blog-pagination__link blog-pagination__next-link {{ "blog-pagination__next-link--disabled" if !next_page_num }}" href="{{ blog_page_link(current_page_num + 1) }}">
        Next
        {% icon name="chevron-right" style="SOLID", width="13", no_wrapper=True %}
      </a>
    </div>

CSS Код

.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: Lato,sans-serif;
    margin-bottom: 3.3rem;
}
.blog-pagination__link {
    color: #494a52;
}
.blog-pagination__prev-link--disabled, .blog-pagination__next-link--disabled {
    color: #b0c1d4;
    pointer-events: none;
    cursor: default;
}

.blog-pagination__prev-link {
    text-align: right;
    margin-right: .25rem;
}
.blog-pagination__prev-link, .blog-pagination__next-link {
    display: inline-flex;
    align-items: center;
}
.blog-pagination__link {
        display: block;
    transition: color 0.1s ease-in-out;
    line-height: 1.25;
    color: #77838f;
    background-color: #fff;
    border: 0 solid #77838f;
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    font-weight: 600;
  margin-left:5px;
}
.blog-pagination__link:hover {
     text-decoration: none;
    color: #3e416d;
    background-color: rgba(9, 27, 18, 0.1);
    border-color: rgba(9, 27, 18, 0.1); 
}
.blog-pagination__link--active {
    border: 2px solid #b0c1d4;
}
...