halo-theme-hao/templates/post.html
2024-04-12 14:35:37 +08:00

248 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'post',title = ${post.spec.title + ' | ' + site.title}, head = ~{::head})}">
<th:block th:fragment="head">
<th:block th:replace="~{modules/common/open-graph :: open-graph(_title = ${post.spec.title},
_permalink = ${post.status.permalink},
_cover = ${post.spec.cover},
_excerpt = ${post.status.excerpt},
_type = 'article')}"></th:block>
</th:block>
<th:block th:fragment="content">
<div class="post" id="body-wrap">
<header class="post-bg" id="page-header">
<nav th:replace="~{modules/nav :: nav(title = ${post.spec.title})}"></nav>
<div class="coverdiv loaded" id="coverdiv">
<img alt="cover" class="nolazyload" id="post-cover"
th:src="${#strings.isEmpty(post.spec.cover) ? theme.config.layout.postRandomImg : post.spec.cover}">
</div>
<div id="post-info">
<div id="post-firstinfo">
<div class="meta-firstline">
<!-- 这里要跳转到版权页 -->
<th:block th:with="copyrightUrl =${#annotations.get(post, 'copyrightUrl')}"
th:if="${not #strings.isEmpty(#annotations.get(post, 'copyrightEnable')) ?
#annotations.get(post, 'copyrightEnable') == 'true' : theme.config.post.copyrights.enable}">
<a class="post-meta-original"
title="该文章为原创文章,注意版权协议"
th:if="${#strings.equals(#annotations.getOrDefault(post, 'copyrightType','original'),'original')}"
th:href="@{${not #strings.isEmpty(copyrightUrl) ? copyrightUrl :
not #strings.isEmpty(theme.config.post.copyrights.originalUrl) ? theme.config.post.copyrights.originalUrl : '#'}}"
>原创</a>
<a class="post-meta-original"
title="该文章为转载文章,版权归原作者所有"
th:if="${#strings.equals(#annotations.getOrDefault(post, 'copyrightType','original'),'reprint')}"
th:href="@{${not #strings.isEmpty(copyrightUrl) ? copyrightUrl :
not #strings.isEmpty(theme.config.post.copyrights.originalUrl) ? theme.config.post.copyrights.reprintUrl : '#'}}"
>转载</a>
</th:block>
<span class="post-meta-categories" th:each="category : ${post.categories}"
th:if="${not #lists.isEmpty(post.categories)}">
<a class="post-meta-categories" th:href="@{${category.status.permalink}}"
th:text="${category.spec.displayName}" th:title="${category.spec.displayName}">
</a>
</span>
<div class="tag_share" th:if="${not #lists.isEmpty(post.tags)}">
<div class="post-meta__tag-list">
<a class="post-meta__tags" th:each="tag : ${post.tags}"
th:href="@{${tag.status.permalink}}"
th:title="${tag.spec.displayName}">
<span class="tags-name tags-punctuation">[[${tag.spec.displayName}]]</span>
</a>
</div>
</div>
</div>
</div>
<h1 class="post-title" th:text="${post.spec.title}"></h1>
<div id="post-meta">
<div class="meta-secondline">
<span class="post-meta-author" data-flag-title="文章作者" title="文章作者">
<i class="haofont hao-icon-zuozhe post-meta-icon"></i>[[${post.owner.displayName}]]
</span>
<span class="post-meta-wordcount"
th:with="wordCount = ${#strings.length(post.content.content)}">
<i class="haofont hao-icon-file-word post-meta-icon" title="字数"></i>
<span class="post-meta-label">字数:</span>
<span class="word-count" th:text="${{wordCount}}"></span>
<span class="post-meta-separator"></span>
<i class="haofont hao-icon-clock post-meta-icon" title="阅读耗时"></i>
<span class="post-meta-label">阅读耗时:</span>
<span>[[${wordCount / 400}]] 分钟</span>
</span>
<span class="post-meta-date">
<i class="haofont hao-icon-calendar-days post-meta-icon"></i>
<time th:attr="datetime=${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
th:text="${#dates.format(post.spec.publishTime,'yyyy/MM/dd')}"
th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd HH:mm:ss')}">
</time>
</span>
<span class="post-meta-date" th:if="${theme.config.post.update_time}">
<i class="haofont hao-icon-pencil post-meta-icon" title="最后更新时间"></i>
<time th:attr="datetime=${#dates.format(post.status.lastModifyTime, 'yyyy-MM-dd')}"
th:text="${#dates.format(post.status.lastModifyTime,'yyyy/MM/dd')}"
th:title="${#dates.format(post.status.lastModifyTime,'yyyy-MM-dd HH:mm:ss')}">
</time>
</span>
<span th:with="syncStatus=${#strings.isEmpty(#annotations.get(post, 'sync_status')) ? '未同步': #annotations.get(post, 'sync_status')}"
class="post-meta-wechat" th:title=" ${pluginFinder.available('plugin-platforms-sync') && (syncStatus == '同步更新文章成功' || syncStatus == '同步上传文章成功') ? '该文章已在公众号中更新' : '该文章在博客首发'}">
<th:block th:unless="${pluginFinder.available('plugin-platforms-sync') && (syncStatus == '同步更新文章成功' || syncStatus == '同步上传文章成功')}">
<i class="haofont hao-icon-rss post-meta-icon"></i>博客独享
</th:block>
<th:block th:if="${pluginFinder.available('plugin-platforms-sync') && (syncStatus == '同步更新文章成功' || syncStatus == '同步上传文章成功')}">
<i class="haofont hao-icon-weixin1 post-meta-icon"></i>公众号同步
</th:block>
</span>
<a class="post-meta-pv" data-flag-title="热度"
title="热度" >
<i class="haofont hao-icon-fire post-meta-icon"></i>
<span class="post-meta-label">热度:</span>
<span id="visit" th:text="${post.stats.visit}"></span>
</a>
<a th:if="${post.spec.allowComment && #strings.contains('Twikoo,Artalk,commentWidget',theme.config.comments.use)}"
class="post-meta-commentcount" data-flag-title="评论数"
title="评论数"
href="#post-comment">
<i class="haofont hao-icon-chat--fill post-meta-icon" style="font-size: 17px;"></i>
<span class="post-meta-label">评论:</span>
<span th:if="${#strings.equals(theme.config.comments.use, 'commentWidget')}"
id="comment-count" th:text="${post.stats.comment}">
<i class="haofont hao-icon-spinner fa-spin"></i>
</span>
<span th:if="${#strings.equals(theme.config.comments.use, 'Twikoo')}"
id="twikoo-count">
<i class="haofont hao-icon-spinner fa-spin"></i>
</span>
<span th:if="${#strings.equals(theme.config.comments.use, 'Artalk')}"
id="ArtalkCount">
<i class="haofont hao-icon-spinner fa-spin"></i>
</span>
</a>
<a class="post-meta-editor" sec:authorize="isAuthenticated()" data-flag-title="编辑文章"
title="编辑文章"
th:attr="onclick='javascript:window.open(\''+ '/console/posts/editor?name='+${post.metadata.name}+'&returnToView=true\''+ ',' +'\'_self'+'\')'">
<i style="margin-top: 2px;" class="haofont hao-icon-bianji post-meta-icon"></i>
<span>编辑</span>
</a>
</div>
</div>
</div>
<section class="main-hero-waves-area waves-area">
<svg class="waves-svg" preserveAspectRatio="none" shape-rendering="auto" viewBox="0 24 150 28"
xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<path
d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"
id="gentle-wave"></path>
</defs>
<g class="parallax">
<use href="#gentle-wave" x="48" y="0"></use>
<use href="#gentle-wave" x="48" y="3"></use>
<use href="#gentle-wave" x="48" y="5"></use>
<use href="#gentle-wave" x="48" y="7"></use>
</g>
</svg>
</section>
</header>
<main class="layout" id="content-inner" th:classappend="${theme.config.sidebar.location}">
<div id="post">
<!-- 文章ai摘要 -->
<div class="post-ai" th:if="${not #strings.isEmpty(#annotations.get(post, 'ai')) ?
#annotations.get(post, 'ai') == 'true' : theme.config.post.aiDescription.aiDescriptionEnable}">
<div class="ai-title"><i class="haofont hao-icon-bilibili"></i>
<div class="ai-title-text">AI-摘要</div>
<div th:if="${theme.config.post.aiDescription.switchBtn}" id="ai-Toggle">切换</div>
<i class="haofont hao-icon-arrow-rotate-right"></i>
<div th:if="${#strings.equals(theme.config.post.aiDescription.mode, 'local')}" class="ai-tag" id="ai-tag">[[${theme.config.post.aiDescription.gptName}]] GPT</div>
<div th:if="${#strings.equals(theme.config.post.aiDescription.mode, 'tianli')}" class="ai-tag" id="ai-tag">Tianli GPT</div>
</div>
<div class="ai-explanation" style="display: block;">AI初始化中...</div>
<div class="ai-btn-box">
<div class="ai-btn-item">介绍自己</div>
<div class="ai-btn-item">生成本文简介</div>
<div class="ai-btn-item">推荐相关文章</div>
<div class="ai-btn-item">前往主页</div>
<div class="ai-btn-item" id="go-tianli-blog">前往tianli博客</div>
</div>
</div>
<!-- 文章内容 -->
<article th:class="'post-content '+${ theme.config.code.enable_line || pluginFinder.available('PluginPrismJS') ? 'line-numbers' : ''}" id="article-container">
<th:block th:if="${theme.config.post.passage_tips.enable}"
th:with="days=${(new java.util.Date().getTime()-post.status.lastModifyTime.toEpochMilli())/86400000}">
<div class="note simple warning" th:if="${days > #conversions.convert(theme.config.post.passage_tips.day, 'java.lang.Integer')}">
<p>
<th:block th:text="|本文最后更新于 ${#dates.format(post.status.lastModifyTime,'yyyy-MM-dd')}|"/><th:block th:utext="${theme.config.post.passage_tips.content}"/>
</p>
</div>
</th:block>
<th:block th:utext="${post.content.content}"/>
</article>
<!-- 文章ai摘要 -->
<script data-pjax th:if="${not #strings.isEmpty(#annotations.get(post, 'ai')) ?
#annotations.get(post, 'ai') == 'true' : theme.config.post.aiDescription.aiDescriptionEnable}"
th:src="${assets_link + '/libs/gpt/post-ai.js'}"></script>
<!-- 版权声明 -->
<th:block th:replace="~{modules/post/copyright}"></th:block>
<nav class="pagination-post needEndHide" id="pagination"
th:with="postCursor = ${postFinder.cursor(post.metadata.name)},
postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,'?') ? theme.config.layout.postRandomImg+'&' : theme.config.layout.postRandomImg+'?'}">
<div th:if="${postCursor.hasPrevious()}" th:class="${postCursor.hasNext()==false} ? 'prev-post pull-full ' : 'prev-post pull-left'">
<a th:if="${postCursor.hasPrevious()}" th:href="@{${postCursor.previous.status.permalink}}">
<img alt="cover" id="preimg" class="nolazyload"
th:with="img = ${#strings.isEmpty(postCursor.previous.spec.cover) ? postRandomImg+postCursor.previous.spec.title : postCursor.previous.spec.cover}"
th:src="${isLazyload ? loadingImg : img}"
th:data-lazy-src="${ isLazyload ? img : ''}">
<div class="pagination-info">
<div class="label">上一篇</div>
<div class="prev_info" th:text="${postCursor.previous.spec.title}"></div>
</div>
</a>
</div>
<div th:if="${postCursor.hasNext()}" th:class="${postCursor.hasPrevious()==false} ? 'next-post pull-full ':'next-post pull-right'">
<a th:if="${postCursor.hasNext()}" th:href="@{${postCursor.next.status.permalink}}">
<img alt="cover" id="preimg" class="nolazyload"
th:with="img = ${#strings.isEmpty(postCursor.next.spec.cover) ? postRandomImg+postCursor.next.spec.title : postCursor.next.spec.cover}"
th:src="${isLazyload ? loadingImg : img}"
th:data-lazy-src="${ isLazyload ? img : ''}">
<div class="pagination-info">
<div class="label">下一篇</div>
<div class="next_info" th:text="${postCursor.next.spec.title}"></div>
</div>
</a>
</div>
</nav>
<!-- 阅读建议 -->
<th:block th:replace="~{modules/post/relatedPosts}"/>
<hr>
<!--/* 评论组件 */-->
<th:block
th:replace="~{modules/comment :: comment(group = 'content.halo.run',
kind = 'Post',
name = ${post.metadata.name},
allowComment = ${post.spec.allowComment})}"/>
</div>
<!-- 侧栏 -->
<div th:replace="~{modules/aside :: aside(${theme.config.sidebar.widgetss.postWidgets})}"></div>
</main>
<!-- 底部 -->
<footer th:replace="~{modules/footer}"/>
</div>
</th:block>
</html>