butterfly-halo-theme

<!DOCTYPE html> <html xmlns:th="https://www.thymeleaf.org" th:replace="~{modules/layout :: layout ( page = 'post', title = ${post.spec.title}, head = ~{::head}, above = ~{::above}, content = ~{::content}, js = ~{::js} )}"> > <th:block th:fragment="head"> <style th:inline="css" th:with="above_background= ${is_body_bg_http ? '' : 'url(' + (#strings.isEmpty(post.spec.cover) ? random_img + '?date=' + #dates.createNow().getTime() : post.spec.cover) + ')'} "> .above { --above-background: /*[(${above_background})]*/ transparent; } </style> <th:block th:if="${theme.config.code.enable}"> <link rel="preload" as="style" onload="this.rel='stylesheet'" th:href="${assets_link+'/plugins/prism/prism.min.css'}"> <link rel="preload" as="style" onload="this.rel='stylesheet'" data-code-theme="light" th:href="${assets_link+ '/plugins/prism/themes/prism-'+theme.config.code.theme_light+'.css'}"> <link rel="preload" as="style" onload="this.rel='stylesheet'" data-code-theme="dark" th:href="${assets_link+'/plugins/prism/themes/prism-'+theme.config.code.theme_dark+'.css'}"> <script type="text/javascript" th:src="${assets_link+'/plugins/prism/prism.min.js'}"></script> </th:block> <link rel="stylesheet" as="style" th:href="${assets_link+'/plugins/fancybox/fancybox.min.css'}"> <link rel="stylesheet" as="style" th:href="${assets_link+'/css/post.min.css'}"> </th:block> <section th:fragment="above" class="above relative w-100"> <div class="post-info absolute w-100 text-center"> <h1 class="post-title font-weight-400 text-clamp text-cmp3" th:text="${post.spec.title}"></h1> <div class="post-meta"> <div class="line"> <span class="wp publishTime"> <i class="fa-solid fa-calendar-days"></i> <time th:text="'发布于 '+${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"></time> </span>  <span class="wp publishTime"> <span class="fk">|</span> <i class="fas fa-history fa-fw"></i> <time th:text="'更新于 '+${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"></time> </span>  <span class="wp category"> <span class="fk">|</span> <i class="fas fa-inbox"></i> <span class="cys"> <th:block th:each="cy : ${post.categories}"> <a class="lk" th:href="${cy.status.permalink}" th:text="${cy.spec.displayName}"></a> <span class="point">•</span> </th:block> </span> </span> </div> <div class="line" th:with="leg = ${#strings.length(#strings.trim(post.content.content))}"> <span class="wordCount"> <i class="fa-solid fa-list-ol"></i> <span th:text="'字数总计 '+${leg}"></span> </span> <span class="fk">|</span> <span class="clock"> <i class="fa-regular fa-clock"></i> <span th:text="'阅读时长 '+${leg/400}+'分钟'"></span> </span> <span class="fk">|</span> <span class="visit"> <i class="far fa-eye fa-fw"></i> <span th:text="'阅读量 '+${post.stats.visit}"></span> </span> </div> </div> </div> </section> <th:block th:fragment="content"> <section class="container card ">  <div class="post-outDate relative none animated fadeIn" th:data-outDate="${theme.config.post.out_date}" th:data-publishTime="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"> </div> <article th:utext="${post.content.content}" th:class="'render-html animated fadeIn single_code_select' + ${ theme.config.code.enable_line ? ' line-numbers' : ''} + ${ !theme.config.post.enable_h_title ? ' enable_h_title' : ''} "></article> <div class="post-copyRight relative"> <i class="fa-solid fa-copyright absolute"></i> <div class="author"> <span class="name">文章作者：</span> <span class="text" th:text="${post.owner.displayName}"></span> </div> <div class="url"> <span class="name">本文链接：</span> <span class="text"> <a class="permalink" href="/" th:href="${post.status.permalink}" target="_blank" th:text="${post.status.permalink}"></a> </span> </div> <div class="declaration"> <span class="name">版权声明：</span> <span class="text">本站所有文章除特别声明外，均采用 <a class="link" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a class="link" href="/" target="_blank" th:text="${site.title}"></a>！</span> </div> </div> <div class="post-abstract"> <span class="categories"> <a th:each=" cts : ${post.categories}" class="link inline-block text-center" th:href="${cts.status.permalink}" > <i class="fa-regular fa-folders"></i> <span th:text="${cts.spec.displayName}" class="name"></span> </a> </span> <span class="tags"> <a th:each=" tag : ${post.tags}" class="link inline-block text-center" th:href="${tag.status.permalink}" th:style="'--spec-color: ' + ${tag.spec.color}" > <i class="fa-regular fa-tags"></i> <span th:text="${tag.spec.displayName}" class="name"></span> </a> </span> </div> <div class="post-support"> <div class="title text-center">喜欢就支持一下吧</div> <div class="content flex flex-justify-content-center">  <a class="praise item cursor-pointer inline-flex flex-direction-column flex-justify-content-center flex-align-items-center" href=""> <i class="fa-light fa-thumbs-up"></i> <span th:text="'点赞 '+${post.stats.upvote}"></span> </a>  <div class="share relative item cursor-pointer inline-flex flex-direction-column flex-justify-content-center flex-align-items-center"> <i class="fa-light fa-arrow-up-right-from-square"></i> <span>分享</span> <ul class="share-dropdown absolute z-50"> <li class="dropdown-item"> <a th:href="'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+${post.status.permalink}+'&title='+${post.spec.title}+'&pics='+${post.spec.cover}+'&summary='+${post.spec.excerpt.raw}"> <span class="icon inline-flex flex-justify-content-center flex-align-items-center"> <i class="fa-regular fa-atom-simple"></i> </span> <span class="name">QQ空间</span> </a> </li> <li class="dropdown-item"> <a th:href="'https://connect.qq.com/widget/shareqq/index.html?url='+${post.status.permalink}+'&title='+${post.spec.title}+'&pics='+${post.spec.cover}+'&desc='+${post.spec.excerpt.raw}"> <span class="icon inline-flex flex-justify-content-center flex-align-items-center"> <i class="fa-brands fa-qq"></i> </span> <span class="name">QQ好友</span> </a> </li>  <li class="dropdown-item"> <span class="icon inline-flex flex-justify-content-center flex-align-items-center"> <i class="fa-regular fa-image"></i> </span> <span class="name">海报分享</span> </li>  <li class="dropdown-item copy-permalink"> <span class="icon inline-flex flex-justify-content-center flex-align-items-center"> <i class="fa-regular fa-link"></i> </span> <span class="name">复制链接</span> </li> </ul> </div> <div th:if="${theme.config.post.enable_reward && (not #strings.isEmpty(theme.config.post.wxPay) || not #strings.isEmpty(theme.config.post.alipay))}" class="reward relative item cursor-pointer inline-flex flex-direction-column flex-justify-content-center flex-align-items-center"> <i class="fa-light fa-sack-dollar"></i> <span>打赏</span> <div class="reward-dropdown absolute z-50 flex"> <section class="text-center" th:if="${not #strings.isEmpty(theme.config.post.wxPay)}"> <img th:src="${theme.config.loading.preload}" th:attr="onerror='this.src='+${'`'+theme.config.loading.err+'`'}" th:data-lazy-src="${theme.config.post.wxPay}" alt="微信" src=""> <span class="inline-block">微信</span> </section> <section class="text-center" th:if="${not #strings.isEmpty(theme.config.post.alipay)}"> <img th:src="${theme.config.loading.preload}" th:attr="onerror='this.src='+${'`'+theme.config.loading.err+'`'}" th:data-lazy-src="${theme.config.post.alipay}" alt="支付宝" src=""> <span class="inline-block">支付宝</span> </section> </div> </div> </div> </div> <div class="post-comment" th:if="${pluginFinder.available('PluginCommentWidget')}"> <halo:comment colorScheme="window.dataTheme" group="content.halo.run" kind="Post" th:attr="name=${post.metadata.name}"/> </div> </section> <aside class="aside w-25"> <div class="sticky post-sticky"> <section class="aside-item card post-tocbot"> <h1 class="aside-title"> <i class="fas fa-stream"></i> <span class="name">目录</span> </h1> <div class="toc"></div> </section> <th:block th:insert="~{modules/public:: newsPost}"></th:block> </div> </aside> </th:block> <th:block th:fragment="js"> <script type="text/javascript" th:src="${assets_link+'/plugins/fancybox/fancybox.min.js'}"></script> <script type="text/javascript" th:src="${assets_link+'/plugins/clipboard/clipboard.min.js'}"></script> <script type="text/javascript" th:src="${assets_link+'/plugins/tocbot/tocbot.min.js'}"></script> <script type="text/javascript" th:src="${assets_link+'/js/post.min.js'}"></script> </th:block> </html>