<!doctype html>
<html th:lang="${#locale.toLanguageTag}">
  <head>
    <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />
<link th:unless="${#strings.isEmpty(site.logo)}" rel="preload" th:href="${site.logo}" as="image" />
<script th:inline="javascript">
  window.i18nResources = {
    "jsModule.colorSchemeSwitcher.dark": `[(#{jsModule.colorSchemeSwitcher.dark})]`,
    "jsModule.colorSchemeSwitcher.light": `[(#{jsModule.colorSchemeSwitcher.light})]`,
    "jsModule.colorSchemeSwitcher.auto": `[(#{jsModule.colorSchemeSwitcher.auto})]`,
    "jsModule.share.qzone": `[(#{jsModule.share.qzone})]`,
    "jsModule.share.weibo": `[(#{jsModule.share.weibo})]`,
    "jsModule.share.douban": `[(#{jsModule.share.douban})]`,
    "jsModule.share.wechat": `[(#{jsModule.share.wechat})]`,
    "jsModule.share.native": `[(#{jsModule.share.native})]`,
    "jsModule.share.windowTitle": `[(#{jsModule.share.windowTitle})]`,
    "jsModule.upvote.networkError": `[(#{jsModule.upvote.networkError})]`,
  };
  var colorScheme = /*[[${theme.config.style.color_scheme}]]*/ "system";
  var enableChangeColorScheme = /*[[${theme.config.style.enable_change_color_scheme}]]*/ false;
</script>
<noscript>
  <style>
    body {
      display: block !important;
    }
  </style>
</noscript>


    
    <title th:text="|${singlePage.spec.title} - ${site.title}|"></title>
  
    <script type="module" crossorigin src="/themes/theme-earth/assets/page--uvAqMxB.js"></script>
    <link rel="modulepreload" crossorigin href="/themes/theme-earth/assets/vendor~archives~author~categories~category~doc-catalog~doc~docs~index~links~moment~moments~~ky3hjxy1-O291mca5.js">
    <link rel="modulepreload" crossorigin href="/themes/theme-earth/assets/main-CLmdnUTa.js">
    <link rel="stylesheet" crossorigin href="/themes/theme-earth/assets/vendor~archives~author~categories~category~doc-catalog~doc~docs~index~links~moment~moments~~ky3hjxy1-Wb1VPa9d.css">
    <link rel="stylesheet" crossorigin href="/themes/theme-earth/assets/main-BaWd_1hx.css">
    <link rel="stylesheet" crossorigin href="/themes/theme-earth/assets/markdown-body-BoBcq-aF.css">
  </head>
  <body class="hidden bg-slate-50 dark:bg-slate-900">
    <header
  id="header-menu"
  class="sticky top-0 z-10 flex h-16 bg-white py-3 shadow-sm transition-all dark:bg-gray-800"
  x-data="{ open : false }"
  th:with="menu = ${menuFinder.getPrimary()}"
>
  <div class="mx-auto flex h-full w-full max-w-7xl justify-between px-4 lg:px-6">
    <div class="flex h-full items-center gap-6">
      <div class="mr-2 h-full">
        <a href="/" class="inline-flex h-full items-center">
          <img
            th:if="${theme.config.global.logo_type == 'image'} and ${not #strings.isEmpty(site.logo)}"
            th:src="${site.logo}"
            th:alt="Logo"
            class="h-full w-auto"
          />
          <span
            th:if="${theme.config.global.logo_type == 'text'} or ${#strings.isEmpty(site.logo)}"
            id="site-title"
            class="text-lg font-medium text-gray-900 dark:text-slate-100"
            th:text="${site.title}"
          ></span>
        </a>
      </div>
      <ul th:if="${menu != null} and ${not #lists.isEmpty(menu.menuItems)}" class="hidden items-center gap-8 sm:flex">
        <li
          th:each="menuItem : ${menu.menuItems}"
          class="relative cursor-pointer text-sm font-medium transition-all"
          x-data="dropdown"
          @mouseenter="open()"
          @mouseleave="close()"
        >
          <a
            class="text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
            th:href="@{${menuItem.status.href}}"
            th:text="${menuItem.status.displayName}"
            th:target="${menuItem.spec.target?.value}"
          ></a>
          <ul
            th:if="${not #lists.isEmpty(menuItem.children)}"
            @mouseenter="open()"
            @mouseleave="close()"
            x-show="show"
            x-cloak
            x-transition:enter="transition ease-out duration-100"
            x-transition:enter-start="transform opacity-0 scale-95"
            x-transition:enter-end="transform opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-75"
            x-transition:leave-start="transform opacity-100 scale-100"
            x-transition:leave-end="transform opacity-0 scale-95"
            class="menu-dropdown absolute left-0 z-10 mt-2 w-40 divide-y divide-gray-50 overflow-hidden rounded bg-white shadow dark:divide-slate-600 dark:bg-slate-700"
          >
            <li
              th:each="childMenuItem : ${menuItem.children}"
              class="flex w-full items-center text-left text-sm hover:bg-gray-50 dark:hover:bg-slate-600"
            >
              <a
                class="size-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
                th:href="@{${childMenuItem.status.href}}"
                th:text="${childMenuItem.status.displayName}"
                th:target="${childMenuItem.spec.target?.value}"
              ></a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="flex items-center">
      <ul x-data="colorSchemeSwitcher" class="flex items-center gap-4">
        <li class="sm:hidden" x-on:click="open = true">
          <div class="i-tabler-menu-2 text-lg text-gray-600 hover:text-blue-600 dark:text-slate-100"></div>
        </li>
        <li
          th:if="${theme.config.style.enable_change_color_scheme}"
          x-data="dropdown"
          class="relative cursor-pointer transition-all"
          @mouseenter="open()"
          @mouseleave="close()"
        >
          <div
            class="cursor-pointer text-lg text-gray-600 transition-all hover:text-blue-600 dark:text-slate-100"
            :class="colorScheme.icon"
          ></div>
          <ul
            @mouseenter="open()"
            @mouseleave="close()"
            x-show="show"
            x-cloak
            x-transition:enter="transition ease-out duration-100"
            x-transition:enter-start="transform opacity-0 scale-95"
            x-transition:enter-end="transform opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-75"
            x-transition:leave-start="transform opacity-100 scale-100"
            x-transition:leave-end="transform opacity-0 scale-95"
            class="absolute right-0 z-10 mt-2 w-40 divide-y divide-gray-50 overflow-hidden rounded bg-white shadow dark:divide-slate-600 dark:bg-slate-700"
          >
            <template x-for="colorScheme in colorSchemes">
              <li
                class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-blue-600 dark:text-slate-50 dark:hover:bg-slate-600 dark:hover:text-gray-300"
                @click="setColorScheme(colorScheme.value,true)"
              >
                <span :class="colorScheme.icon"></span>
                <span x-text="colorScheme.label"></span>
              </li>
            </template>
          </ul>
        </li>
        <!-- https://github.com/halo-sigs/plugin-search-widget -->
        <li th:if="${pluginFinder.available('PluginSearchWidget')}">
          <a
            href="javascript:SearchWidget.open()"
            th:title="#{fragment.header.search}"
            class="text-gray-600 hover:text-blue-600 dark:text-slate-100"
          >
            <div class="i-tabler-search text-lg"></div>
          </a>
        </li>
        <li
          x-data="dropdown"
          class="relative cursor-pointer transition-all"
          th:with="currentUser = ${contributorFinder.getContributor(#authentication.name)}"
          @mouseenter="open()"
          @mouseleave="close()"
        >
          <div>
            <div class="size-5 text-gray-600 hover:text-blue-600 dark:text-slate-100">
              <img
                class="size-5 rounded-full"
                th:src="${currentUser.avatar ?: #theme.assets('/images/default-avatar.svg')}"
                th:alt="${currentUser.displayName}"
              />
            </div>
            <ul
              @mouseenter="open()"
              @mouseleave="close()"
              x-show="show"
              x-cloak
              x-transition:enter="transition ease-out duration-100"
              x-transition:enter-start="transform opacity-0 scale-95"
              x-transition:enter-end="transform opacity-100 scale-100"
              x-transition:leave="transition ease-in duration-75"
              x-transition:leave-start="transform opacity-100 scale-100"
              x-transition:leave-end="transform opacity-0 scale-95"
              class="absolute right-0 z-10 mt-2 w-40 divide-y divide-gray-50 overflow-hidden rounded bg-white shadow dark:divide-slate-600 dark:bg-slate-700"
            >
              <li
                sec:authorize="isAuthenticated()"
                class="flex w-full items-center text-left text-sm hover:bg-gray-50 dark:hover:bg-slate-600"
              >
                <a
                  class="size-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
                  href="/console"
                  target="_blank"
                  th:text="#{fragment.header.console}"
                >
                </a>
              </li>
              <li
                sec:authorize="isAuthenticated()"
                class="flex w-full items-center text-left text-sm hover:bg-gray-50 dark:hover:bg-slate-600"
              >
                <a
                  class="size-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
                  href="/logout"
                  th:text="#{fragment.header.logout}"
                >
                </a>
              </li>
              <li
                sec:authorize="isAnonymous()"
                class="flex w-full items-center text-left text-sm hover:bg-gray-50 dark:hover:bg-slate-600"
              >
                <a
                  class="size-full truncate px-4 py-2 text-gray-600 hover:text-blue-600 dark:text-slate-50 dark:hover:text-gray-300"
                  href="/login"
                  onclick="this.href = '/login?redirect_uri=' + encodeURIComponent(window.location.href)"
                  th:text="#{fragment.header.login}"
                >
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div th:if="${menu != null} and ${not #lists.isEmpty(menu.menuItems)}">
    <div
      class="fixed inset-0 z-50 bg-gray-800/40 opacity-100 backdrop-blur-sm dark:bg-black/80"
      aria-hidden="true"
      x-show="open"
      x-cloak
      x-transition:enter="ease-in-out duration-300"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="ease-in-out duration-300"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
    ></div>
    <div
      class="fixed inset-x-4 top-8 z-50 origin-top scale-100 rounded-lg bg-white p-4 dark:bg-slate-900"
      tabindex="-1"
      x-show="open"
      x-cloak
      x-transition:enter="ease-out duration-200"
      x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
      x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
      x-transition:leave="ease-in duration-100"
      x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
      x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
      @click.outside="open = false"
    >
      <div class="flex flex-row-reverse items-center justify-between">
        <button
          class="i-tabler-x p-1 text-xl text-gray-600 dark:text-slate-300"
          type="button"
          tabindex="0"
          @click="open = false"
        ></button>
        <h2 class="text-sm font-medium text-gray-600 dark:text-slate-300" th:text="#{fragment.header.menu}"></h2>
      </div>
      <nav class="mt-6">
        <ul class="-my-2 divide-y divide-gray-100 text-sm text-gray-800 dark:divide-slate-800 dark:text-slate-100">
          <li th:each="menuItem : ${menu.menuItems}">
            <a
              class="flex items-center justify-between gap-1 py-2"
              th:href="@{${menuItem.status.href}}"
              th:target="${menuItem.spec.target?.value}"
            >
              <span th:text="${menuItem.status.displayName}"></span>
            </a>
            <ul class="divide-y divide-gray-100 dark:divide-slate-800" th:if="${not #lists.isEmpty(menuItem.children)}">
              <li th:each="childMenuItem : ${menuItem.children}" class="flex w-full items-center text-left text-sm">
                <a
                  class="size-full truncate px-4 py-2 text-gray-600 dark:text-slate-200"
                  th:href="@{${childMenuItem.status.href}}"
                  th:text="${childMenuItem.status.displayName}"
                  th:target="${childMenuItem.spec.target?.value}"
                ></a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>


    
    <section th:unless="${#strings.isEmpty(singlePage.spec.cover)}">
      <div class="relative flex items-center" th:styleappend="|height:${theme.config.post.cover_height ?: '24rem'}|">
        <div
          class="before:z-1 relative size-full bg-cover bg-center bg-no-repeat before:absolute before:inset-0 before:bg-black/40"
          th:style="|background-image: url('${singlePage.spec.cover}')|"
        ></div>
        <header
          class="pattern-header-text absolute top-1/3 mx-auto flex w-full flex-col items-center justify-center gap-3"
          th:if="${theme.config.post.title_position == 'cover'}"
        >
          <h1 class="text-center text-2xl text-white sm:text-5xl" th:text="${singlePage.spec.title}"></h1>
        </header>
      </div>
    </section>
  

    
  
  
  <section
    class="mx-auto mt-6 grid max-w-7xl grid-cols-1 gap-6 px-4 md:grid-cols-[1fr_18rem] lg:px-6"
    th:classappend="${theme.config.layout.content_header} and ${not #strings.isEmpty(singlePage.spec.cover)} ? '!-mt-20' : ''"
  >
    <div class="z-0 min-w-0">
      <div class="rounded-xl bg-white p-4 dark:bg-slate-800">
        <div class="flex items-center justify-between">
          <div class="inline-flex items-center justify-start gap-2">
            <a
              th:unless="${#strings.isEmpty(singlePage.owner.avatar)}"
              th:href="@{${singlePage.owner.permalink}}"
              th:title="${singlePage.owner.displayName}"
            >
              <img
                th:src="${singlePage.owner.avatar}"
                th:alt="${singlePage.owner.displayName}"
                class="size-10 rounded-full"
              />
            </a>
            <div class="flex flex-col gap-0.5">
              <a
                th:href="@{${singlePage.owner.permalink}}"
                class="text-sm font-semibold text-gray-900 hover:text-gray-600 dark:text-slate-100 dark:hover:text-slate-200"
                th:text="${singlePage.owner.displayName}"
                th:title="${singlePage.owner.displayName}"
              ></a>
              <div class="flex items-center gap-2 text-xs font-light text-gray-600 dark:text-slate-100">
                <span
                  th:text="#{common.publishedOn(${#dates.format(singlePage.spec.publishTime,'yyyy-MM-dd')})}"
                ></span>
                <span class="text-gray-300 dark:text-slate-200">/</span>
                <span th:text="#{common.visitCount(${singlePage.stats?.visit ?:0})}"></span>
              </div>
            </div>
          </div>
          <div class="inline-flex flex-row gap-1">
            <div
              sec:authorize="isAuthenticated()"
              th:attr="x-data=|uiPermission('${#authentication.name}','system:singlepages:manage')|"
              class="flex items-center justify-between"
              id="edit-button"
            >
              <template x-if="shouldDisplay">
                <a
                  th:href="|/console/single-pages/editor?name=${singlePage.metadata.name}&returnToView=true|"
                  class="inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
                >
                  <span class="i-tabler-edit text-lg transition-all group-hover:-translate-x-1"></span>
                  <span th:text="#{common.edit}"></span>
                </a>
              </template>
            </div>
            <a
              th:if="${haloCommentEnabled}"
              href="#comment"
              class="group inline-flex cursor-pointer items-center gap-0.5 rounded-lg"
            >
              <div
                class="inline-flex items-center justify-center rounded-full p-2 transition-all group-hover:bg-gray-100 dark:group-hover:bg-slate-700"
              >
                <div
                  class="i-tabler-message-circle text-lg text-gray-600 group-hover:text-indigo-500 dark:text-slate-500"
                ></div>
              </div>
              <span
                class="text-sm text-gray-600 group-hover:text-indigo-500 dark:text-slate-500"
                th:text="${singlePage.stats?.comment ?:0}"
              ></span>
            </a>
            <div th:if="${false}" class="cursor-pointer rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-slate-600">
              <div
                class="i-tabler-share text-lg text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-50"
              ></div>
            </div>
          </div>
        </div>
        <h1
          th:if="${#strings.isEmpty(singlePage.spec.cover)} or ${theme.config.post.title_position == 'content'}"
          class="my-3 text-3xl font-medium dark:text-slate-50"
          th:text="${singlePage.spec.title}"
        ></h1>

        <article
          class="!max-w-none break-words"
          th:classappend="${theme.config.post.content_style == 'github' ? 'markdown-body' : 'tailwind-typography'}"
          th:utext="${singlePage.content.content}"
        ></article>
        <hr th:if="${haloCommentEnabled}" class="my-10 dark:border-slate-700" />
        <div id="comment" th:if="${haloCommentEnabled}">
          <h2 class="mb-2 text-base font-medium text-gray-900 dark:text-slate-50" th:text="#{common.comment}"></h2>
          <halo:comment group="content.halo.run" kind="SinglePage" th:attr="name=${singlePage.metadata.name}" />
        </div>
      </div>
    </div>
    <th:block th:replace="~{modules/sidebar :: sidebar(prepend = null)}" />
  </section>


    <footer th:if="${theme.config.footer.style == 'style_1'}" class="mt-10 bg-white py-8 dark:bg-slate-800">
  <div class="mx-auto max-w-7xl px-4 sm:flex sm:items-center sm:justify-between lg:px-6">
    <a href="/" class="mb-4 flex items-center justify-center sm:mb-0 sm:justify-start">
      <img
        th:if="${not #strings.isEmpty(theme.config.footer.logo)} or ${not #strings.isEmpty(site.logo)}"
        th:src="${theme.config.footer.logo ?: site.logo}"
        class="mr-3 size-8"
        th:alt="${site.title}"
      />
      <span
        class="self-center whitespace-nowrap text-2xl font-semibold dark:text-slate-50"
        th:text="${theme.config.footer.title ?: site.title}"
      >
      </span>
    </a>
    <th:block th:unless="${#strings.isEmpty(theme.config.footer.right_menu)}">
      <ul
        th:with="menu = ${menuFinder.getByName(theme.config.footer.right_menu)}"
        class="mb-6 flex flex-wrap items-center justify-center space-x-4 text-sm text-gray-500 dark:text-slate-200 sm:mb-0 sm:justify-start md:space-x-6"
      >
        <li th:each="menuItem : ${menu.menuItems}">
          <a
            th:href="@{${menuItem.status.href}}"
            class="transition-all hover:text-gray-900 hover:underline dark:hover:text-white"
            th:text="${menuItem.status.displayName}"
            th:target="${menuItem.spec.target?.value}"
          ></a>
        </li>
      </ul>
    </th:block>

    <th:block th:replace="~{modules/footer-social}" />
  </div>
  <hr class="my-6 border-gray-100 dark:border-slate-700 sm:mx-auto lg:my-8" />
  <div class="space-y-1">
    <span
      class="mx-auto block max-w-7xl px-4 text-center text-sm text-gray-500 dark:text-slate-300 lg:px-6"
      th:if="${not #strings.isEmpty(theme.config.beian.icp_text)}"
    >
      <a
        href="https://beian.miit.gov.cn/"
        class="hover:underline"
        target="_blank"
        th:href="${theme.config.beian.icp_link}"
        th:text="${theme.config.beian.icp_text}"
      ></a>
    </span>
    <div
      th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}"
      class="mx-auto block max-w-7xl px-4 text-center text-sm text-gray-500 dark:text-slate-300 lg:px-6"
    >
      <p class="flex items-center justify-center gap-1">
        <img th:src="@{/assets/images/gongan_beian.png}" class="size-4" alt="gongan_beian" />
        <a
          href="https://beian.mps.gov.cn/#/query/webSearch"
          class="hover:underline"
          target="_blank"
          th:href="${theme.config.beian.gongan_link}"
          th:text="${theme.config.beian.gongan_text}"
        ></a>
      </p>
    </div>
    <span class="mx-auto block max-w-7xl px-4 text-center text-sm text-gray-500 dark:text-slate-300 lg:px-6">
      ©
      <th:block th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}" />
      <a href="/" class="hover:underline" th:text="${site.title}"></a>. All Rights Reserved. Powered by
      <a href="https://halo.run" class="hover:underline" target="_blank">Halo</a>.
    </span>
    <span class="mx-auto block max-w-7xl px-4 text-center text-sm text-gray-500 dark:text-slate-300 lg:px-6">
      <halo:footer />
    </span>
  </div>
</footer>

<footer th:if="${theme.config.footer.style == 'style_2'}" class="mt-10 bg-white py-8 dark:bg-slate-800">
  <div class="mx-auto max-w-7xl px-4 md:flex md:justify-between md:gap-10 lg:px-6">
    <div class="mb-6 max-w-full md:mb-0 md:max-w-md">
      <a href="/" class="mb-6 flex items-center">
        <img
          th:if="${not #strings.isEmpty(theme.config.footer.logo)} or ${not #strings.isEmpty(site.logo)}"
          th:src="${theme.config.footer.logo ?: site.logo}"
          class="mr-3 h-8"
          th:alt="${site.title}"
        />
        <span
          class="self-center whitespace-nowrap text-2xl font-semibold dark:text-slate-50"
          th:text="${theme.config.footer.title ?: site.title}"
        ></span>
      </a>
      <span
        th:if="${not #strings.isEmpty(theme.config.footer.slogan)}"
        class="text-sm font-light text-gray-600 dark:text-slate-200"
        th:text="${theme.config.footer.slogan}"
      >
      </span>
    </div>
    <div
      th:unless="${#lists.isEmpty(theme.config.footer.menu_names)}"
      class="grid grid-cols-2 gap-8 sm:grid-cols-4 sm:gap-12"
    >
      <th:block th:each="name : ${theme.config.footer.menu_names}">
        <div th:with="menu = ${menuFinder.getByName(name)}">
          <h2
            class="mb-6 text-sm font-semibold text-gray-900 dark:text-slate-50"
            th:text="${menu.spec.displayName}"
          ></h2>
          <ul th:with="menuItems = ${menu.menuItems}" class="text-sm text-gray-500 dark:text-slate-200">
            <li th:each="menuItem : ${menuItems}" class="mb-4">
              <a
                th:href="@{${menuItem.status.href}}"
                class="transition-all hover:text-gray-900 hover:underline dark:hover:text-white"
                th:text="${menuItem.status.displayName}"
                th:target="${menuItem.spec.target?.value}"
              ></a>
            </li>
          </ul>
        </div>
      </th:block>
    </div>
  </div>
  <hr class="my-6 border-gray-200 dark:border-slate-700 sm:mx-auto lg:my-8" />
  <div class="mx-auto flex max-w-7xl flex-col px-4 sm:flex-row sm:items-center sm:justify-between lg:px-6">
    <div class="flex flex-col space-y-1 text-center sm:text-left">
      <span class="text-sm text-gray-500 dark:text-slate-300 sm:text-center">
        ©
        <th:block th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}" />
        <a href="/" class="hover:underline" th:text="${site.title}"></a>. All Rights Reserved. Powered by
        <a href="https://halo.run" class="hover:underline" target="_blank">Halo</a>.
      </span>

      <div class="flex flex-col gap-1 sm:flex-row">
        <span
          class="block text-center text-sm text-gray-500 sm:text-left"
          th:if="${not #strings.isEmpty(theme.config.beian.icp_text)}"
        >
          <a
            href="https://beian.miit.gov.cn/"
            class="hover:underline"
            target="_blank"
            th:href="${theme.config.beian.icp_link}"
            th:text="${theme.config.beian.icp_text}"
          ></a>
        </span>
        <div
          th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}"
          class="inline-flex items-center justify-center gap-1 text-sm text-gray-500 sm:justify-start"
        >
          <img th:src="@{/assets/images/gongan_beian.png}" class="size-4" alt="gongan_beian" />
          <a
            href="https://beian.mps.gov.cn/#/query/webSearch"
            class="hover:underline"
            target="_blank"
            th:href="${theme.config.beian.gongan_link}"
            th:text="${theme.config.beian.gongan_text}"
          ></a>
        </div>
      </div>

      <p class="text-sm text-gray-500 dark:text-slate-300">
        <halo:footer />
      </p>
    </div>

    <th:block th:replace="~{modules/footer-social}" />
  </div>
</footer>


    <button
      th:if="${theme.config.global.show_scroll_button}"
      type="button"
      id="btn-scroll-to-top"
      th:aria-label="#{fragment.layout.toTop}"
      class="fixed bottom-5 right-5 flex items-center justify-center rounded-full bg-white p-3 opacity-0 shadow transition-all duration-300 hover:opacity-70 hover:shadow-lg dark:bg-slate-600 lg:bottom-10 lg:right-10"
    >
      <span class="i-tabler-chevron-up text-2xl text-gray-600 dark:text-slate-200"></span>
    </button>
  </body>
</html>

