selfPrevnext / 上下篇

<hlx-template
  component-type="selfPrevnext"
  component-query-option="{'newsId':''}"
  component-variable="prevNext"
></hlx-template>

实测数据

无上一页

{
  "prevArt": null,
  "nextArt": {
    "newsId": 1394385406638391300,
    "title": "重庆市书法家协会会员管理办法",
    "url": "https://www.cqssfjxh.com/web/article/1394385406638391296/web/content_1394385406638391296.html",
    "h5Url": "",
    "appUrl": "",
    "jsonUrl": "",
    "publishTime": "2021-11-16T16:38:00"
  }
}

上下页都有

{
  "prevArt": {
    "newsId": 1394385345719894000,
    "title": "重庆市书法家协会第五届副秘书长名单",
    "url": "https://www.cqssfjxh.com/web/article/1394385345719894016/web/content_1394385345719894016.html",
    "h5Url": "",
    "appUrl": "",
    "jsonUrl": "",
    "publishTime": "2022-06-30T16:50:00"
  },
  "nextArt": {
    "newsId": 1394384245219344400,
    "title": "重庆市书协第五届名誉主席、顾问、主席团委员、名誉理事名单",
    "url": "https://www.cqssfjxh.com/web/article/1394384245219344384/web/content_1394384245219344384.html",
    "h5Url": "",
    "appUrl": "",
    "jsonUrl": "",
    "publishTime": "2021-07-14T13:02:00"
  }
}

thymeleaf 示例

<!-- 上一篇 -->
<a
  class="prev-next"
  th:href="${prevnext.prevArt ? prevnext.prevArt.url : 'javascript:void(0)'}"
>
  <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M31 36L19 24L31 12"
      stroke="#783F04"
      stroke-width="4"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
  <span class="label">上一篇：</span>
  <span
    class="page-title"
    th:text="${prevnext.prevArt ? prevnext.prevArt.title : '无'}"
  >
    ________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
  </span>
</a>
<!-- 下一篇 -->
<a
  class="prev-next"
  th:href="${prevnext.nextArt ? prevnext.nextArt.url : 'javascript:void(0)'}"
>
  <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
      d="M17 36L29 24L17 12"
      stroke="#783F04"
      stroke-width="4"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
  <span class="label">下一篇：</span>
  <span
    class="page-title"
    th:text="${prevnext.nextArt ? prevnext.nextArt.title : '无'}"
  >
  </span>
</a>

.prev-next {
  margin-top: 20px;

  font-family: "Microsoft YaHei";
  font-size: 12px;
  color: rgb(120, 63, 4);

  display: flex;
  display: -ms-flexbox;
  align-items: center;

  width: 100%;

  cursor: pointer;

  svg {
    width: 14px;
    height: 14px;
  }

  .label {
    margin-left: 4px;
    color: inherit;
    font-size: inherit;
  }

  .page-title {
    width: 0;
    display: block;
    flex: 1 0 0;
    -ms-flex: 1 0 0%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: inherit;
    font-size: inherit;
  }

  &:hover {
    color: rgb(204, 0, 0);

    svg {
      path {
        stroke: rgb(204, 0, 0);
      }
    }
  }
}