html - HTML & HUBL:如何添加页码
问题描述
我正在开发一个博客,它几乎完成了。我想要每页上的页码,我已经有下一页和上一页的箭头。
它是在 Hubspot 中开发的自定义编码博客,因此使用了 HUBL,一种模板语言和 HTML。
谁能告诉我我需要添加哪一行代码才能获得页码?
我已将其分成文档:BlogList.html 和 Blogpost.html,并将向您展示我目前所拥有的。
任何建议都将受到欢迎。
谢谢你。
博客列表.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>
解决方案
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;
}
推荐阅读
- r - R - 访问数据库时处理错误
- android - 我在我的 gradle 中看不到 root 来提取用于谷歌登录的 SHA 密钥。我的 android 版本是 4.2
- javascript - 为什么这条路线在没有在任何地方定义的情况下以快递方式工作?
- javascript - 无法将类添加到包含的 HTML 文件中的元素
- flutter - 按下浮动操作按钮时防止键盘出现
- node.js - 无法使用正确的 Solc 版本编译 Solidity 文件
- javascript - javascript BigInt乘法给出错误的结果
- python - 使用链接变量配对和取消配对 Tk CheckButtons
- javascript - 关于html中元素的父样式的混淆
- powershell - 微软 PowerShell 5.1。脚本变量更改为实名