Single Post Navigation

Thumbnail

// <PageNav>
.uk-margin-top.uk-margin-bottom
  .uk-grid-collapse.uk-padding.uk-padding-remove-horizontal.uk-child-width-1-2.uk-grid-divider.grid-divider-secondary(uk-grid)
    div
      a(href='#')
        .uk-position-relative
          i.uk-position-center-left.uk-text-secondary(uk-icon='icon:chevron-left; ratio: 2;' style='left: -.5rem;')
          .uk-grid-small.uk-margin-left(uk-grid)
            div(class='uk-width-1-3@m uk-visible@m')
              .uk-width-1-1.uk-background-cover.uk-display-block(data-src="img/default_image.png" uk-img style="padding-top: calc(115 / 172 * 100%);")
            div(class='uk-width-2-3@m')
              p.text-white.text-xsmall.uk-text-center(class='uk-text-left@s')
                span.uk-background-secondary.uk-position-relative(style='top: .2rem; padding: .2rem .5rem;' class='uk-visible@s') PREV | 上一篇
                span.uk-background-secondary.uk-position-relative.text-remove-spacing.uk-text-nowrap(style='top: 0; padding: .2rem .5rem;' class='uk-hidden@s') PREV | 上一篇
              p.text-medium-m.text-default.uk-padding-default-top.uk-text-bold(class='uk-visible@s' style='letter-spacing: .9px; line-height: 1.94') AA
    div
      a(href='#')
        .uk-position-relative
          i.uk-position-center-right.uk-text-secondary(uk-icon='icon:chevron-right; ratio: 2;' style='right: -.5rem;')
          .uk-grid-small.uk-margin-right(uk-grid)
            div(class='uk-width-1-3@m uk-visible@m')
              .uk-width-1-1.uk-background-cover.uk-display-block(data-src="img/default_image.png" uk-img style="padding-top: calc(115 / 172 * 100%);")
            div(class='uk-width-2-3@m padding-remove-left-s')
              p.text-white.text-xsmall.uk-text-center(class='uk-text-left@s')
                span.uk-background-secondary.uk-position-relative(style='top: .2rem; padding: .2rem .5rem;' class='uk-visible@s') NEXT | 下一篇
                span.uk-background-secondary.uk-position-relative.text-remove-spacing.uk-text-nowrap(style='top: 0; padding: .2rem .5rem;' class='uk-hidden@s') NEXT | 下一篇
              p.text-medium-m.text-default.uk-padding-default-top.uk-text-bold(class='uk-visible@s' style='letter-spacing: .9px; line-height: 1.94') BB
// </PageNav>
.uk-grid-divider.grid-divider-secondary > :not(.uk-first-column)::before {
  border-color: $global-secondary-background;
}

<div class="uk-margin-top uk-margin-bottom">
  <div class="uk-grid-collapse uk-padding uk-padding-remove-horizontal uk-child-width-1-2 uk-grid-divider grid-divider-secondary" uk-grid="">
    <div>
      <?php if(get_previous_post()): ?>
      <a href="<?php echo esc_url(get_previous_post()->guid); ?>">
        <div class="uk-position-relative">
          <i class="uk-position-center-left uk-text-secondary" uk-icon="icon:chevron-left; ratio: 2;" style="left: -.5rem;"></i>
          <div class="uk-grid-small uk-margin-left" uk-grid="">
            <div class="uk-width-1-3@m uk-visible@m">
              <div class="uk-width-1-1 uk-background-cover uk-display-block" data-src="<?php echo esc_url(get_the_post_thumbnail_url(get_previous_post()->ID),'full'); ?>" uk-img="" style="padding-top: calc(115 / 172 * 100%);"></div>
            </div>
            <div class="uk-width-2-3@m">
              <p class="text-white text-xsmall uk-text-center uk-text-left@s"><span class="uk-background-secondary uk-position-relative uk-visible@s" style="top: .2rem; padding: .2rem .5rem;">PREV | 上一篇</span><span class="uk-background-secondary uk-position-relative text-remove-spacing uk-text-nowrap uk-hidden@s" style="top: 0; padding: .2rem .5rem;">PREV | 上一篇</span></p>
              <p class="text-medium-m text-default uk-padding-default-top uk-text-bold uk-visible@s" style="letter-spacing: .9px; line-height: 1.94"><?php echo esc_html(get_previous_post()->post_title); ?></p>
            </div>
          </div>
        </div>
      </a>
      <?php endif; ?>
    </div>
    <div>
      <?php if(get_next_post()): ?>
      <a href="<?php echo esc_url(get_next_post()->guid); ?>">
        <div class="uk-position-relative">
          <i class="uk-position-center-right uk-text-secondary" uk-icon="icon:chevron-right; ratio: 2;" style="right: -.5rem;"></i>
          <div class="uk-grid-small uk-margin-right" uk-grid="">
            <div class="uk-width-1-3@m uk-visible@m">
              <div class="uk-width-1-1 uk-background-cover uk-display-block" data-src="<?php echo esc_url(get_the_post_thumbnail_url(get_next_post()->ID),'full'); ?>" uk-img="" style="padding-top: calc(115 / 172 * 100%);"></div>
            </div>
            <div class="uk-width-2-3@m padding-remove-left-s">
              <p class="text-white text-xsmall uk-text-center uk-text-left@s"><span class="uk-background-secondary uk-position-relative uk-visible@s" style="top: .2rem; padding: .2rem .5rem;">NEXT | 下一篇</span><span class="uk-background-secondary uk-position-relative text-remove-spacing uk-text-nowrap uk-hidden@s" style="top: 0; padding: .2rem .5rem;">NEXT | 下一篇</span></p>
              <p class="text-medium-m text-default uk-padding-default-top uk-text-bold uk-visible@s" style="letter-spacing: .9px; line-height: 1.94"><?php echo esc_html(get_next_post()->post_title); ?></p>
            </div>
          </div>
        </div>
      </a>
      <?php endif; ?>
    </div>
  </div>
</div>