<!doctype html>
<th:block
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{components/base-layout/template :: html(
    title = ${#annotations.getOrDefault(post, 'higan.howiehz.top/page-title', post.spec?.title)}, 
    head = ~{:: head},
    content = ~{:: body}, 
    header = ~{}, 
    navbar = ~{components/nav-post/template :: navbar}, 
    language=${#annotations.get(post, 'higan.howiehz.top/page-language')}
  )}"
>
  <head th:remove="tag">
    <link
      rel="canonical"
      th:if="${theme.config?.post_styles?.is_enable_canonical_link}"
      th:href="${siteUrl} + @{${post.status.permalink}}"
    />
    <th:block th:if="${pluginFinder.available('PluginFeed')}">
      <th:block th:each="contributor : ${post?.contributors}">
        <link
          th:unless="${#strings.equals(contributor.permalink, '/authors/ghost')}"
          rel="alternate"
          type="application/rss+xml"
          th:title="'Posts - Author: ' + ${contributor?.displayName}"
          th:href="@{'/feed/authors/' + ${contributor.metadata?.name} + '.xml'}"
        />
      </th:block>
      <th:block th:unless="${#lists.isEmpty(post.categories)}">
        <th:block th:each="categoryLeafNode, categoryLeafNodeIterStat : ${post.categories}">
          <th:block>
            <th:block th:each="category, iterStat : ${categoryFinder.getBreadcrumbs(categoryLeafNode.metadata?.name)}">
              <link
                rel="alternate"
                type="application/rss+xml"
                th:title="'Posts - Category: ' + ${category.spec?.displayName}"
                th:href="@{'/feed/categories/' + ${category.spec?.slug} + '.xml'}"
              />
            </th:block>
          </th:block>
        </th:block>
      </th:block>
      <th:block th:unless="${#lists.isEmpty(post.tags)}">
        <th:block th:each="tag, iterStat : ${post.tags}">
          <link
            rel="alternate"
            type="application/rss+xml"
            th:title="'Posts - Tag: ' + ${tag.spec?.displayName}"
            th:href="@{'/feed/tags/' + ${tag.spec?.slug} + '.xml'}"
          />
        </th:block>
      </th:block>
    </th:block>
    <th:block
      th:if="${theme.config?.post_styles?.is_post_upvote_button_show}"
      th:insert="~{components/upvote-runtime/template :: head}"
    ></th:block>
    <th:block
      th:if="${theme.config?.post_styles?.is_show_post_nav_share_button
               or theme.config?.post_styles?.is_show_share_footer}"
      th:insert="~{components/share/template :: head}"
    ></th:block>
    <th:block
      th:if="${theme.config?.post_styles?.is_post_comment_section_show
               and haloCommentEnabled}"
      th:insert="~{components/halo-comment-widget/template :: head}"
    ></th:block>
    <script type="module" crossorigin src="/themes/howiehz-higan/assets/1.65.0C0tGwqz.js" integrity="sha384-A30PqARWlXCgGsDs+Wv48iLD6RQJi7ORB1uwTCFoGXSj02v/ThjQMDaPCeUxfR5m"></script>
    <link rel="modulepreload" crossorigin href="/themes/howiehz-higan/assets/1.65.0B5Dsnp8.js" integrity="sha384-jh9fNrQ4e1dfnNNeSJ5j6Xk0Q3yaywFUu7lofIRIE/glirnKgAxh97UVWuDQAVso">
    <link rel="modulepreload" crossorigin href="/themes/howiehz-higan/assets/1.65.0Db3n32t.js" integrity="sha384-ATXJmckKn/B7mUfzNbdWrZYHOjPSSrgBUzwUdeyG3cWIMUKQGocYAAibcdMOBqbM">
    <link rel="modulepreload" crossorigin href="/themes/howiehz-higan/assets/1.65.0I1yhx0e.js" integrity="sha384-t4V7hGIoLIwDWpAo4dakpeNLlIRndH8+lTVyGyU4eIJNq+nYp5nO90rx8Ijc1Hgy">
    <link rel="modulepreload" crossorigin href="/themes/howiehz-higan/assets/1.65.0Bk5FHpu.js" integrity="sha384-cg6x7Pb77Zqih642wbHELBIb8vuQ0VeuH0Zb6tWgHC6J1oxIpFMgVUPeGS0CiGHV">
    <link rel="modulepreload" crossorigin href="/themes/howiehz-higan/assets/1.65.0D4yvM7L.js" integrity="sha384-BKVQS1sB9o6lKGmP/i+71RXqtbVohf0P33xXzBym/QCpmjHeBx8gZ1r9bglVhSUv">
    <link rel="modulepreload" crossorigin href="/themes/howiehz-higan/assets/1.65.0BbV69jM.js" integrity="sha384-mhseGOVSTlahmPy3dNXz3VlLzY2uhhzQEwm9z2JWvCV/dsLBvRVIDV0olOspj/ma">
    <link rel="stylesheet" crossorigin href="/themes/howiehz-higan/assets/1.65.0DsXQ7aE.css" integrity="sha384-+5IkXfnqZaDvw/+FCMyDKlye/vfc7pixdiR7g8Y0xMHV7DECWn1bjf94NE7Jpy6u">
    <link rel="stylesheet" crossorigin href="/themes/howiehz-higan/assets/1.65.0V1Vfzax.css" integrity="sha384-+PNVzMjj9tRKGQF6Db//cVCq5sX2D9olLnqidyZzgPgVTZy4Kj0oBqihwwO/xEiP">
    <link rel="stylesheet" crossorigin href="/themes/howiehz-higan/assets/1.65.0Nu1u8yY.css" integrity="sha384-h6WHiBEsz55L9LeaTSvyYRiiYVLTekMvNJhG+VjwyKti556zI6k8M+nZTayAbuwQ">
    <link rel="stylesheet" crossorigin href="/themes/howiehz-higan/assets/1.65.02SfoGZ_.css" integrity="sha384-tyb3qqYZLgmmy6z7Qx7afxEpQtzjcIlqGfAGfnaUlw8ZrbytT8PAqh/zI2V5rVjy">
    <link rel="stylesheet" crossorigin href="/themes/howiehz-higan/assets/1.65.0qIHECcD.css" integrity="sha384-FkgQFQ5Abs3/gUmXRzfvzOF5DE/NEXonujAFYqWsU4p62l6jBsG8j1hSD8u4cMqo">
    <link rel="stylesheet" crossorigin href="/themes/howiehz-higan/assets/1.65.0Bicc1e3.css" integrity="sha384-JZPOQ+7mdAeT6L3rX1fi/Xvhtbr+lZd0Wy165luHFqtcM5hQXidOHfpB5R/zc686">
  </head>
  <body th:remove="tag">
    <th:block
      th:if="${theme.config?.post_styles?.is_custom_toc_max_width}"
      th:insert="~{components/toc-max-width-style/template :: body}"
    ></th:block>
    <style th:if="${theme.config?.post_styles?.is_optimize_content_paragraph_spacing}">.content>p{min-height:1.1em}</style>
    <th:block
      th:if="${theme.config?.post_styles?.is_enable_paragraph_first_line_indent}"
      th:insert="~{components/paragraph-first-line-indent-style/template :: body(
        indentValue=${theme.config?.post_styles?.paragraph_first_line_indent_value}
      )}"
    ></th:block>
    <th:block th:insert="~{components/heading-anchor-symbol-style/template :: body}"></th:block>
    <th:block th:insert="~{components/heading-anchor-svg/template :: body}"></th:block>
    <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
      <header>
        <h1
          class="tw-pd tw-ma tw-x"
          th:classappend="${theme.config?.post_styles?.post_title_uppper} ? 'uppercase'"
          itemprop="name headline"
        >
          <th:block th:text="${post.spec?.title}">标题替换位</th:block
          ><th:block th:replace="~{components/common/template :: theme-toggle-button}"></th:block>
        </h1>
        <div class="meta">
          <span
            class="tw-ob tw-u uppercase"
            itemprop="author"
            itemscope
            th:each="contributor : ${post?.contributors}"
          >
            <a
              th:unless="${#strings.equals(contributor.permalink, '/authors/ghost')}"
              th:href="${contributor.permalink}"
              itemprop="name"
              th:text="${contributor?.displayName}"
              style="background-image: none"
            >
            </a>
          </span>
          <div class="post-publish-time inline" th:if="${theme.config?.post_styles?.is_show_post_publish_time}">
            <span
              th:text="#{page.post.published-on}"
              th:if="${theme.config?.post_styles?.is_show_post_publish_time_left_text}"
            ></span>
            <time
              th:datetime="${post.spec?.publishTime}"
              itemprop="datePublished"
              th:text="${#temporals.format(post.spec?.publishTime, 'yyyy-MM-dd')}"
              >文章发布时间替换位</time
            >
          </div>
          <div class="post-update-time block tw-vb" th:if="${theme.config?.post_styles?.is_show_post_updated_time}">
            <span
              th:text="#{page.post.updated-on}"
              th:if="${theme.config?.post_styles?.is_show_post_updated_time_left_text}"
            ></span>
            <time
              th:datetime="${post.status?.lastModifyTime}"
              itemprop="dateModified"
              th:text="${#temporals.format(post.status?.lastModifyTime, 'yyyy-MM-dd')}"
              >文章更新时间替换位</time
            >
          </div>
          <span class="meta-separator hidden tw-a tw-ua tw-vb"></span>
          <div class="article-category block tw-vb" th:unless="${#lists.isEmpty(post.categories)}">
            <th:block th:each="categoryLeafNode, categoryLeafNodeIterStat : ${post.categories}">
              <span class="categoryBreadcrumbs tw-fa">
                <span th:if="${categoryLeafNodeIterStat.first}" class="iconify fa-solid--archive"></span>
                <th:block
                  th:each="category, iterStat : ${categoryFinder.getBreadcrumbs(categoryLeafNode.metadata?.name)}"
                >
                  <a
                    class="category-link"
                    th:href="@{${category.status?.permalink}}"
                    th:text="${category.spec?.displayName}"
                  >
                    文章分类名替换位 </a
                  ><span th:unless="${iterStat.last}"> ></span
                  ><span
                    th:if="${iterStat.last
                             and !categoryLeafNodeIterStat.last}"
                    >,</span
                  >
                </th:block>
              </span>
            </th:block>
          </div>
          <div class="article-tag block tw-vb" th:unless="${#lists.isEmpty(post.tags)}">
            <th:block th:each="tag, iterStat : ${post.tags}">
              <span class="tw-fa">
                <span th:if="${iterStat.first}" class="iconify fa-solid--tag"></span>
                <a
                  class="tag-link"
                  th:with="tagColor = ${tag.spec?.color}"
                  th:href="@{${tag.status?.permalink}}"
                  th:text="${tag.spec?.displayName}"
                  th:style="${tagColor != null
                            and !#strings.equalsIgnoreCase(tagColor, '#ffffff')}
                          ? |--tag-hash-color:${tagColor};|
                          : null"
                >
                  文章标签名替换位 </a
                ><span th:unless="${iterStat.last}">,</span>
              </span>
            </th:block>
          </div>
          <span
            class="tw-fa"
            th:if="${theme.config?.post_styles?.is_show_post_views}"
            th:title="|#{page.post.visit-stats} ${post.stats?.visit}|"
          >
            <span class="iconify mdi--eye-outline"></span>
            <span th:text="${post.stats?.visit}">文章阅读量替换位</span>
          </span>
          <span
            class="tw-fa"
            th:if="${theme.config?.post_styles?.is_show_post_estimated_reading_time}"
            th:with="wordCount = ${pluginFinder.available('extra-api', '3.*')
                                   ? extraApiStatsFinder.getPostWordCount({name: post.metadata.name})
                                   : #strings.length(post.content?.content) / 2 }"
            th:title="#{page.post.estimated-reading-time(#{common.words(${wordCount})})}"
          >
            <span class="iconify mdi--clock-outline"></span>
            <span
              class="readtime"
              th:text="#{common.min(${#numbers.formatDecimal(wordCount * 1.0 / 450, 1, 1) + '~' + #numbers.formatDecimal(wordCount * 1.0 / 350, 1, 1)})}"
            >
              文章预计阅读时间替换位
            </span>
          </span>
          <span
            class="tw-fa"
            th:if="${theme.config?.post_styles?.is_show_post_word_count}"
            th:with="wordCount = ${pluginFinder.available('extra-api', '3.*')
                                   ? extraApiStatsFinder.getPostWordCount({name: post.metadata.name})
                                   : #strings.length(post.content?.content) / 2 }"
            th:title="|#{page.post.word-count} #{common.words(${wordCount})}|"
          >
            <span class="iconify fluent--text-edit-style-character-a-32-regular"></span>
            <span class="word-count" th:text="${wordCount}">文章字数替换位</span>
          </span>
        </div>
      </header>
      <div class="content tw-mb" itemprop="articleBody" th:utext="${post.content?.content}">文章内容填充处</div>
      <th:block th:if="${theme.config?.post_styles?.is_dividing_line_at_the_end_of_post_show}">
        <hr class="divide tw-uc tw-bd" />
      </th:block>
      <th:block th:if="${theme.config?.post_styles?.is_post_upvote_button_show}">
        <a
          class="upvote-button tw-ld tw-bd"
          href="#"
          th:data-post-name="${post.metadata.name}"
          th:style="'display: flex;
            background-image: none;
            justify-content:' + ${theme.config?.post_styles?.post_upvote_button_position} + ';'"
        >
          <span
            class="iconify"
            th:width="${theme.config?.post_styles?.post_upvote_button_width}"
            th:height="${theme.config?.post_styles?.post_upvote_button_height}"
            style="--svg:url(&quot;data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m12.1%2018.55l-.1.1l-.11-.1C7.14%2014.24%204%2011.39%204%208.5C4%206.5%205.5%205%207.5%205c1.54%200%203.04%201%203.57%202.36h1.86C13.46%206%2014.96%205%2016.5%205c2%200%203.5%201.5%203.5%203.5c0%202.89-3.14%205.74-7.9%2010.05M16.5%203c-1.74%200-3.41.81-4.5%202.08C10.91%203.81%209.24%203%207.5%203C4.42%203%202%205.41%202%208.5c0%203.77%203.4%206.86%208.55%2011.53L12%2021.35l1.45-1.32C18.6%2015.36%2022%2012.27%2022%208.5C22%205.41%2019.58%203%2016.5%203Z%22%20%2F%3E%3C%2Fsvg%3E&quot;)"
          >
          </span>
          <span
            th:if="${theme.config?.post_styles?.is_show_post_upvote_count}"
            th:data-post-name="${post.metadata.name}"
            th:text="${post.stats.upvote}"
          ></span>
        </a>
        <th:block
          th:insert="~{components/upvote-runtime/template :: body(
            storageKey='higan.likes.post.ids',
            group='content.halo.run',
            plural='posts',
            nameAttribute='data-post-name',
            triggerSelector='a.upvote-button[data-post-name]',
            countSelector='span[data-post-name]',
            networkRequestFailedMsg=#{common.error.networkRequestFailed}
          )}"
        ></th:block>
      </th:block>
      <th:block
        th:if="${theme.config?.post_styles?.is_post_recommended_articles_show
                 and !#lists.isEmpty(post.categories)}"
        th:with="firstCategoryName = ${post.categories[0].metadata.name},
                 n = ${#conversions.convert(theme.config?.post_styles?.post_recommended_articles_count, 'java.lang.Integer')},
                 postFinderResult = ${postFinder.list({
                                      size: n,
                                      categoryName: firstCategoryName,
                                      sort: {'spec.publishTime,desc', 'metadata.creationTimestamp,asc'}
                                    })},
                 firstPagePostList = ${postFinderResult.items}"
      >
        <th:block
          th:if="${#lists.size(firstPagePostList) > 1}"
          th:with="randomPageNumber = ${T(java.lang.Math).floor(T(java.lang.Math).random() * (postFinderResult.totalPages) + 1)},
                   targetPagePostFinderResult = ${postFinder.list({
                                                  page: randomPageNumber,
                                                  size: n,
                                                  categoryName: firstCategoryName,
                                                  sort: {'spec.publishTime,desc', 'metadata.creationTimestamp,asc'}
                                                })},
                   targetPagePostList = ${targetPagePostFinderResult.items}"
        >
          <div class="recommendations tw-uc">
            <h4 class="tw-cd" th:text="#{fragment.post-nav.recommended}">推荐文章 标题填充位</h4>
            <th:block th:each="iterPost: ${targetPagePostList}">
              <div th:if="${post.metadata.name != iterPost.metadata.name}">
                <span class="meta">
                  <time
                    class="color-time"
                    th:datetime="${iterPost.spec?.publishTime}"
                    itemprop="datePublished"
                    th:text="${#temporals.format(iterPost.spec?.publishTime, 'yyyy-MM-dd')}"
                    >文章发布时间替换位</time
                  >
                </span>
                <a class="post-title" th:href="@{${iterPost.status?.permalink}}" th:text="${iterPost.spec?.title}"></a>
              </div>
            </th:block>
            <th:block
              th:if="${targetPagePostFinderResult.last and not targetPagePostFinderResult.first}"
              th:with="itemsNeeded = ${n - #lists.size(targetPagePostList)}"
            >
              <th:block th:if="${itemsNeeded > 0}">
                <th:block th:each="index : ${#numbers.sequence(0,itemsNeeded-1)}">
                  <th:block th:with="iterPost = ${firstPagePostList[index]}">
                    <div th:if="${post.metadata.name != iterPost.metadata.name}">
                      <span class="meta">
                        <time
                          class="color-time"
                          th:datetime="${iterPost.spec?.publishTime}"
                          itemprop="datePublished"
                          th:text="${#temporals.format(iterPost.spec?.publishTime, 'yyyy-MM-dd')}"
                          >文章发布时间替换位</time
                        >
                      </span>
                      <a
                        class="post-title"
                        th:href="@{${iterPost.status?.permalink}}"
                        th:text="${iterPost.spec?.title}"
                      ></a>
                    </div>
                  </th:block>
                </th:block>
              </th:block>
            </th:block>
          </div>
        </th:block>
      </th:block>
      <th:block
        th:with="postCursor = ${postFinder.cursor(post.metadata?.name)}"
        th:if="${theme.config?.post_styles?.is_post_prev_next_navigation_show}"
      >
        <span
          class="post-navigation tw-uc tw-bd"
          th:if="${postCursor.hasPrevious()
                  or postCursor.hasNext()}"
        >
          <div th:if="${postCursor.hasPrevious()}">
            <span th:text="#{fragment.post-nav.prev}">上一篇 填充位</span>
            <a
              class="post-title"
              th:href="@{${postCursor.previous?.status?.permalink}}"
              th:text="${postCursor.previous?.spec?.title}"
            ></a>
          </div>
          <div th:if="${postCursor.hasNext()}">
            <span th:text="#{fragment.post-nav.next}">下一篇 填充位</span>
            <a
              class="post-title"
              th:href="@{${postCursor.next?.status?.permalink}}"
              th:text="${postCursor.next?.spec?.title}"
            ></a>
          </div>
        </span>
      </th:block>
      <hr th:if="${theme.config?.post_styles?.is_dividing_line_at_the_end_of_post_show}" class="divide tw-uc tw-bd" />
      <div th:if="${theme.config?.post_styles?.is_post_comment_section_show and haloCommentEnabled}" class="tw-nd">
        <halo:comment group="content.halo.run" kind="Post" th:name="${post.metadata?.name}"></halo:comment>
      </div>
    </article>
    <th:block th:if="${theme.config?.post_styles?.is_show_footer_nav}">
      <div th:replace="~{components/footer-nav-post/template :: footerNav}"></div>
    </th:block>
    <th:block
      th:if="${theme.config?.post_styles?.is_post_upvote_button_show}"
      th:insert="~{components/upvote-runtime/template :: inlineInit}"
    ></th:block>
  </body>
</th:block>
