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>

Single Post Tag List

Thumbnail

each i in single
  each j in i.tag
    .uk-grid-small.uk-margin-medium-top(uk-grid)
      div(style='width: 25px')
        img(src='img/icon-tag.svg')
      .uk-width-expand
        ul.uk-flex.uk-flex-wrap
          each k in j.list
            li.uk-margin-small-bottom
              a.uk-button.button-secondary-outline.text-small.uk-margin-small-left.uk-text-nowrap(href=k.href)=k.text
.button-secondary-outline {
  border: 1px solid $global-secondary-background;
  color: $global-secondary-background;
  &:hover {
    color: #fff;
    background-color: $global-secondary-background;
  }
}

Single Post Meta

Thumbnail

PugPHP
h1.heading-default-m.heading-xsmall-s.heading-xxsmall.text-large-weight.uk-margin-bottom.text-small-spacing=i.title
.uk-flex.uk-flex-between.uk-flex-wrap
  div
    ul.uk-navbar.uk-margin-small-bottom.uk-margin-remove-bottom-s
      each k in i.meta
        li.uk-text-primary.uk-margin-right
          img(src=k.icon uk-svg)
          | &nbsp;
          span.text-default-s.text-xsmall=k.text
  div
    ul.uk-navbar.uk-margin-remove-bottom
      li
        .line-it-button(data-lang="zh_Hant" data-type="share-a" data-ver="2" data-url="https://media.line.me/zh_TW/how_to_install" style="display: none;")
        script(src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer")
      li.uk-padding-remove.uk-position-relative(style='top: 0px; margin-left: .3rem;')
        .fb-like(data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false")
hr.uk-margin-bottom(style='border-color: #fc9202;')
<h1 class="heading-default-m heading-xsmall-s heading-xxsmall text-large-weight uk-margin-bottom text-small-spacing"><?php echo esc_html(get_the_title()); ?></h1>
  <div class="uk-flex uk-flex-between uk-flex-wrap">
    <div>
      <ul class="uk-navbar uk-margin-small-bottom uk-margin-remove-bottom-s">
        <li class="uk-text-primary uk-margin-right"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-calendar_orange.svg" uk-svg>&nbsp;<span class="text-default-s text-xsmall"><?php echo esc_html(get_the_date('Y-m-d')); ?></span></li>
        <li class="uk-text-primary uk-margin-right uk-flex uk-flex-middle"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-views.svg" uk-svg>&nbsp;<?php echo do_shortcode('[post-views]'); ?></li>
        <li class="uk-text-primary uk-margin-right"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-pen.svg" uk-svg>&nbsp;<span class="text-default-s text-xsmall"><?php echo (get_field('post_report'))?esc_html(get_field('post_report')):esc_html(get_the_author()); ?> 報導</span></li>
      </ul>
    </div>
    <div>
      <ul class="uk-navbar uk-margin-remove-bottom">
        <li>
          <div class="line-it-button" data-lang="zh_Hant" data-type="share-a" data-ver="2" data-url="<?php echo esc_url(get_the_permalink()); ?>" style="display: none;"></div>
          <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
        </li>
        <li class="uk-padding-remove uk-position-relative" style="top: 0px; margin-left: .3rem;">
          <div class="fb-like" data-href="<?php echo esc_url(get_the_permalink()); ?>" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>
        </li>
      </ul>
    </div>
  </div>
  <hr class="uk-margin-bottom" style="border-color: #fc9202;">