halo-theme/templates/modules/right-panel.html

<aside
  class="devcm-rightbar"
  th:fragment="right-panel (pageType)"
  th:classappend="${pageType == 'page' or pageType == 'links' or pageType == 'moments'} ? ' devcm-rightbar--hidden' : ''"
  th:aria-label="#{devcm.right.context}"
>
  <th:block th:if="${pageType == 'post'}">
    <section class="devcm-widget" th:if="${post != null}">
      <div class="devcm-widget__title">
        <span th:text="#{devcm.right.articleInfo}">ARTICLE INFO</span>
        <span aria-hidden="true">...</span>
      </div>
      <div class="devcm-info-list">
        <div class="devcm-info-list__row">
          <span th:text="#{devcm.right.author}">Author</span>
          <strong th:text="${post.owner.displayName}">Author</strong>
        </div>
        <div class="devcm-info-list__row">
          <span th:text="#{devcm.right.publishedAt}">Published at</span>
          <strong th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm')}">Date</strong>
        </div>
      </div>
    </section>

    <section class="devcm-widget" th:if="${post.categories != null and !#lists.isEmpty(post.categories)}">
      <div class="devcm-widget__title">
        <span th:text="#{devcm.explorer.categories}">CATEGORIES</span>
        <span aria-hidden="true">...</span>
      </div>
      <div class="devcm-panel-list">
        <a class="devcm-panel-link" th:each="category : ${post.categories}" th:href="${category.status.permalink}">
          <strong th:text="${category.spec.displayName}">Category</strong>
          <span>
            <span th:text="${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0}">0</span>
            <span th:text="#{devcm.right.posts}">posts</span>
          </span>
        </a>
      </div>
    </section>

    <section class="devcm-widget" th:if="${post.tags != null and !#lists.isEmpty(post.tags)}">
      <div class="devcm-widget__title">
        <span th:text="#{devcm.right.tags}">TAGS</span>
        <span aria-hidden="true">...</span>
      </div>
      <div class="devcm-tag-cloud">
        <a
          class="devcm-tag"
          th:each="tag : ${post.tags}"
          th:href="${tag.status.permalink}"
          th:text="'#' + ${tag.spec.displayName}"
        >
          #tag
        </a>
      </div>
    </section>

    <section class="devcm-widget" x-data="postToc" x-init="init()" x-show="items.length > 0">
      <div class="devcm-widget__title">
        <span th:text="#{devcm.right.toc}">TABLE OF CONTENTS</span>
        <span aria-hidden="true">...</span>
      </div>
      <div class="post-toc">
        <ul class="toc-tree">
          <template x-for="(item, index) in items" :key="index">
            <li
              class="toc-item"
              :class="{ 'toc-item--active': activeId === item.id }"
              :style="`padding-left: ${getIndent(item.level)}`"
              @click="scrollTo(item.id)"
            >
              <span class="toc-item__toggle toc-item__toggle--empty">▼</span>
              <span class="toc-item__tag" x-text="item.tagName"></span>
              <span class="toc-item__title" x-text="item.title"></span>
            </li>
          </template>
        </ul>
      </div>
    </section>

    <th:block th:with="postCursor=${postFinder.cursor(post.metadata?.name)}">
      <section class="devcm-widget" th:if="${postCursor.hasPrevious() or postCursor.hasNext()}">
        <div class="devcm-widget__title">
          <span th:text="#{devcm.right.nearbyPosts}">NEARBY POSTS</span>
          <span aria-hidden="true">...</span>
        </div>
        <div class="devcm-panel-list">
          <a
            class="devcm-panel-link"
            th:if="${postCursor.hasPrevious()}"
            th:href="${postCursor.previous?.status?.permalink}"
          >
            <span th:text="#{devcm.right.previousPost}">Previous</span>
            <strong th:text="${postCursor.previous?.spec?.title}">Previous</strong>
          </a>
          <a class="devcm-panel-link" th:if="${postCursor.hasNext()}" th:href="${postCursor.next?.status?.permalink}">
            <span th:text="#{devcm.right.nextPost}">Next</span>
            <strong th:text="${postCursor.next?.spec?.title}">Next</strong>
          </a>
        </div>
      </section>
    </th:block>
  </th:block>

  <th:block th:unless="${pageType == 'post'}">
    <section class="devcm-widget" th:if="${posts != null and posts.items != null and !#lists.isEmpty(posts.items)}">
      <div class="devcm-widget__title">
        <span th:text="#{devcm.right.latestPosts}">LATEST POSTS</span>
        <span aria-hidden="true">...</span>
      </div>
      <div class="devcm-panel-list">
        <a class="devcm-panel-link" th:each="post : ${posts.items}" th:href="${post.status.permalink}">
          <strong th:text="${post.spec.title}">Post title</strong>
          <span th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">2026-01-01</span>
        </a>
      </div>
    </section>
    <section class="devcm-widget" th:if="${categories != null and !#lists.isEmpty(categories)}">
      <div class="devcm-widget__title">
        <span th:text="#{devcm.explorer.categories}">CATEGORIES</span>
        <span aria-hidden="true">...</span>
      </div>
      <div class="devcm-panel-list">
        <a class="devcm-panel-link" th:each="category : ${categories}" th:href="${category.status.permalink}">
          <strong th:text="${category.spec.displayName}">Category</strong>
          <span
            ><span th:text="${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0}">0</span>
            <span th:text="#{devcm.right.posts}">posts</span></span
          >
        </a>
      </div>
    </section>
    <section class="devcm-widget" th:if="${tags != null and !#lists.isEmpty(tags)}">
      <div class="devcm-widget__title">
        <span th:text="#{devcm.right.tags}">TAGS</span>
        <span aria-hidden="true">...</span>
      </div>
      <div class="devcm-tag-cloud">
        <a
          class="devcm-tag"
          th:each="tag : ${tags}"
          th:href="${tag.status.permalink}"
          th:text="'#' + ${tag.spec.displayName}"
        >
          #tag
        </a>
      </div>
    </section>
  </th:block>
</aside>