默认情况下,文章导航按如下方式显示:
下面的 CSS 将按如下方式显示文章上下页:
图标类型:字体
.post-navigation {
display: flex;
}
.post-navigation .nav-next {
width: 50%;
text-align: right;
}
.post-navigation .nav-previous {
width: 50%;
}
.post-navigation .nav-next .next:before {
display: none;
}
.post-navigation .nav-next .next:after {
font-family: GeneratePress;
text-decoration: inherit;
position: relative;
margin-left: .6em;
width: 13px;
text-align: center;
display: inline-block;
content: "\f105";
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
speak: none;
}
图标类型: SVG
.post-navigation {
display: flex;
}
.post-navigation .nav-next {
width: 50%;
text-align: right;
display: flex;
flex-direction: row-reverse;
}
.post-navigation .nav-previous {
width: 50%;
}
.nav-next .gp-icon {
margin-left: .6em;
margin-right: 0;
}
根据个人情况添加css,边距字体大小自行调整padding-top:20px; font-size: 16px;
另一种方法是在GenerateBlocks中自行设计导航,其中有很多模板可供选择,也可以设置导航在同一类别中,等等可玩性很多。