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

138 lines
7.8 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.

<!-- TODO 控制台功能 -->
<div id="console" >
<div class="close-btn" onclick="heo.hideConsole()" href="javascript:void(0);">
<i class="haofont hao-icon-circle-xmark"></i>
</div>
<div class="console-card-group">
<!-- 评论,需要使用评论插件,获取最近评论 -->
<div class="console-card-group-left">
<div class="console-card" id="card-newest-comments" onclick="heo.hideConsole()">
<div class="card-content">
<div class="author-content-item-tips">互动</div>
<span class="author-content-item-title">最近评论</span>
</div>
<div class="aside-list">
<th:block th:if="${#strings.equals(theme.config.comments.use, 'commentWidget') }">
<!-- BUG由于当前的列出所有评论API无过滤功能非文章页的评论无法查询到页面信息所以非文章评论跳转至首页-->
<div class="aside-list-item" th:each="comment,iterStat : ${commentFinder.list(null, 1, 20)}"
th:with="page = ${comment.spec.subjectRef.kind == 'Post' ? postFinder.getByName(comment.spec.subjectRef.name) :
comment.spec.subjectRef.kind == 'SinglePage' && not #strings.contains('photos,links,moments', comment.spec.subjectRef.name) ? singlePageFinder.getByName(comment.spec.subjectRef.name) : null},
url = ${page == null? '/' : page.status.permalink + '#comment-' + comment.metadata.name}"
th:if="${iterStat.index < 6}" >
<a th:href="${url}" class="thumbnail" data-pjax-state="">
<img th:with="img = ${#strings.isEmpty(comment.owner.avatar)?'https://cravatar.cn/avatar/?d=mp':comment.owner.avatar}"
th:src="${isLazyload ? loadingImg : img}"
th:data-lazy-src="${ isLazyload ? img : ''}"
th:alt="${comment.owner.displayName}">
<div class="name"><span>stonewu</span></div>
</a>
<div class="content">
<a class="comment" th:href="${url}" th:title="${comment.spec.content}" data-pjax-state="" th:text="${comment.spec.content}"></a>
<time th:datetime="${#dates.format(comment.metadata.creationTimestamp, 'yyyy-MM-dd HH:mm:ss')}"></time>
</div>
</div>
<script data-pjax>
window.addEventListener('load', () => {
$(".aside-list time").each(function () {
var timeVal = $(this).attr("datetime");
$(this).text(btf.diffDateExact(timeVal,true));
})
});
</script>
</th:block>
<span th:if="${#strings.equals(theme.config.comments.use, 'Twikoo') }">正在加载中...</span></div>
</div>
</div>
<!-- 右侧展示 tag -->
<div class="console-card-group-right">
<div class="console-card tags" onclick="heo.hideConsole()">
<div class="card-content">
<div class="author-content-item-tips">标签</div>
<span class="author-content-item-title">寻找感兴趣的领域</span>
</div>
<div class="card-tag-cloud" th:with="tags = ${tagFinder.listAll()}, tagQuantity = ${#conversions.convert(theme.config.sidebar.tagQuantity, 'java.lang.Integer')}">
<a style="font-size:1em;color:#d3d3d3"
th:each="tag,iterStat : ${tags}"
th:href="@{${tag.status.permalink}}"
th:if="${tagQuantity >= 0 && iterStat.index < tagQuantity || tagQuantity < 0}">
[[${tag.spec.displayName}]]<sup th:text="${tag.status.visiblePostCount}"></sup>
</a>
</div>
</div>
<!-- 底部展示时间归档 -->
<div class="console-card history" onclick="heo.hideConsole()">
<div class="item-headline"><i class="fas fa-archive"></i><span>文章</span></div>
<ul class="card-archive-list" th:with="archives = ${postFinder.archives(1,1000)}">
<th:block th:each="archive : ${archives.items}">
<li class="card-archive-list-item" th:each="month,monthStat : ${archive.months}">
<a class="card-archive-list-link" th:href="@{'/archives/'+${archive.year}+'/'+${month.month}}"
data-pjax-state="load"><span
class="card-archive-list-date">
[[${(month.month=='01') ? '一月' :
(month.month == '02') ? "二月" :
(month.month == '03') ? "三月" :
(month.month == '04') ? "四月" :
(month.month == '05') ? "五月" :
(month.month == '06') ? "六月" :
(month.month == '07') ? "七月" :
(month.month == '08') ? "八月" :
(month.month == '09') ? "九月" :
(month.month == '10') ? "十月" :
(month.month == '11') ? "十一月" :
"十二月"}]] [[${archive.year}]]
</span>
<div class="card-archive-list-count-group"><span
class="card-archive-list-count">[[${month.posts.size()}]]</span>
<span class="card-archive-list-count-unit"></span>
</div>
</a>
</li>
</th:block>
</ul>
</div>
</div>
</div>
<div class="console-card-group-reward" th:if="${theme.config.aboutReward.reward.enable_reward}">
<ul class="reward-all console-card">
<li class="reward-item"><a th:href="@{${theme.config.aboutReward.reward.wxPay}}"
rel="external nofollow noreferrer" target="_blank" draggable="false"><img
class=" entered loaded" alt="微信"
th:src="${theme.config.aboutReward.reward.wxPay}"></a>
<div class="post-qr-code-desc">微信</div>
</li>
<li class="reward-item"><a th:href="@{${theme.config.aboutReward.reward.alipay}}"
rel="external nofollow noreferrer" target="_blank" draggable="false"><img
class=" entered loaded" alt="支付宝"
th:src="${theme.config.aboutReward.reward.alipay}"></a>
<div class="post-qr-code-desc">支付宝</div>
</li>
</ul>
</div>
<div class="button-group">
<div class="console-btn-item">
<a class="darkmode_switchbutton" href="javascript:void(0);" onclick="navFn.switchDarkMode();" rel="external nofollow"
title="显示模式切换"><i class="haofont hao-icon-moon-clear-fill" style="font-size:1rem"></i>
</a>
</div>
<div class="console-btn-item" id="consoleHideAside" onclick="heo.hideAsideBtn()" title="边栏显示控制"><a
class="asideSwitch" data-pjax-state=""><i class="haofont hao-icon-arrows-left-right"></i></a></div>
<div class="console-btn-item on" id="consoleCommentBarrage" onclick="heo.switchCommentBarrage()" title="热评开关"><a
class="commentBarrage" data-pjax-state=""><i class="haofont hao-icon-chat--fill"></i></a></div>
<!--<div class="console-btn-item" id="consoleKeyboard" onclick="heo.keyboardToggle()" title="快捷键开关"><a-->
<!-- class="keyboard-switch"><i class="fa-duotone fa-keyboard"></i></a>-->
<!--</div>-->
<!--<div class="console-btn-item" id="assist-open" onclick="heo.hideConsole()" title="无障碍工具栏"><a-->
<!-- class="assist-btn"><i class="fa-duotone fa-wheelchair"></i></a>-->
<!--</div>-->
<div th:if="${theme.config.tool.nav_music.nav_musicEnable}" class="console-btn-item" id="consoleMusic" onclick="heo.musicToggle()" title="音乐开关">
<a class="music-switch" data-pjax-state="">
<i class="haofont hao-icon-disc-fill"></i>
</a>
</div>
</div>
<div class="console-mask" href="javascript:void(0);" onclick="heo.hideConsole()" rel="external nofollow">
</div>
</div>