<section
  th:fragment="toc-widget"
  class="widget toc-widget"
  id="catalog-widget"
  style="display: none"
  th:if="${(post != null and theme.config.custom.enable_post_toc != false and #annotations.getOrDefault(post, 'toc', 'true') == 'true') or (singlePage != null and theme.config.custom.enable_page_toc != false and #annotations.getOrDefault(singlePage, 'toc', 'false') == 'true') or docTree != null}"
>
  <hgroup class="widget-title">
    <span class="title-text" th:text="${docTree != null ? '文档目录' : '文章目录'}">文章目录</span>
    <a
      th:if="${post != null}"
      onclick="return false;"
      aria-label="点赞文章"
      x-data="postLike()"
      x-init="init()"
      @click="toggleLike()"
      :data-title="liked ? '已点赞' : '点赞'"
      :class="{ 'liked': liked }"
      th:data-count="${post?.stats?.upvote ?: 0}"
      th:data-name="${post?.metadata?.name}"
    >
      <span class="icon-[ph--heart-bold]" x-show="!liked"></span>
      <span class="icon-[ph--heart-fill]" x-show="liked"></span>
      <span class="like-count" x-show="count > 0" x-text="count"></span>
    </a>
    <a
      href="#content"
      aria-label="返回顶部"
      data-title="返回顶部"
      onclick="
        window.scrollTo({ top: 0, behavior: 'smooth' });
        return false;
      "
    >
      <span class="icon-[ph--arrow-circle-up-bold]"></span>
    </a>
    <a
      th:if="${post != null or docTree != null}"
      href="#comment"
      aria-label="评论区"
      data-title="评论区"
      onclick="
        document.getElementById('comment')?.scrollIntoView({ behavior: 'smooth' });
        return false;
      "
    >
      <span class="icon-[ph--chat-circle-text-bold]"></span>
    </a>
  </hgroup>

  <div class="widget-body widget-card toc-body">
    <nav id="catalog-content" class="toc-nav"></nav>
    <p id="no-toc-tip" class="no-toc" style="display: none">暂无目录信息</p>
  </div>

  <th:block th:replace="~{modules/aside-widgets/scripts/toc-scripts :: toc-scripts}"></th:block>
</section>
