为默认评论组件,增加最近评论模块

This commit is contained in:
stonewu 2023-08-10 16:57:55 +08:00
parent b014c6a0c6
commit e4f75a00db
3 changed files with 49 additions and 6 deletions

View File

@ -4,6 +4,33 @@
<div class="card-widget card-recent-post" th:fragment="comments">
<div class="item-headline"><i class="iconfont icon-comment-dots"></i><span>最新评论</span></div>
<div class="aside-list" id="newcomm">
<th:block th:if="${#strings.equals(theme.config.comments.use, 'commentWidget') }">
<div class="aside-list-item" th:each="comment : ${commentFinder.list(null, 1, 10)}" th:with="post = ${postFinder.getByName(comment.spec.subjectRef.name)}" >
<a class="thumbnail" th:href="${post.status.permalink + '#comment-' + comment.metadata.name}" data-pjax-state="">
<img loading="lazy" alt="头像" th:src="${#strings.isEmpty(comment.owner.avatar)?'https://cravatar.cn/avatar/?d=mp':comment.owner.avatar}" data-ll-status="loading" class="entered loading">
</a>
<div class="content" >
<a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;"
th:href="${post.status.permalink + '#comment-' + comment.metadata.name}" th:title="${comment.spec.content}" th:text="${comment.spec.content}" data-pjax-state="">
</a>
<div class="name">
<span th:text="${comment.owner.displayName + ' / '}">stonewu / </span>
<time th:datetime="${#dates.format(comment.metadata.creationTimestamp, 'yyyy-MM-dd HH:mm:ss')}"></time>
</div>
</div>
</div>
<script data-pjax>
window.addEventListener('load', () => {
$(".aside-list time").each(function () {
var timeVal = $(this).attr("datetime");
$(this).text(btf.diffDate(timeVal,true));
console.log(1);
})
});
</script>
</th:block>
<script th:if="${theme.config.comments.twikooEnable && #strings.equals(theme.config.comments.use, 'Twikoo') && not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
(()=>{
const runTwikoo = () => {

View File

@ -1,11 +1,12 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="cardNewestComments">
<!-- 最近评论 -->
<script
th:fragment="cardNewestComments"
th:if="${theme.config.comments.twikooEnable && #strings.equals(theme.config.comments.use, 'Twikoo') && not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
th:if="${theme.config.comments.twikooEnable
&& #strings.equals(theme.config.comments.use, 'Twikoo')
&& not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
window.addEventListener('load', () => {
const changeContent = (content) => {
if (content === '') return content
@ -96,4 +97,5 @@
document.addEventListener('pjax:complete', newestCommentInit)
})</script>
</th:block>
</html>

View File

@ -14,7 +14,21 @@
<div class="author-content-item-tips">互动</div>
<span class="author-content-item-title">最近评论</span>
</div>
<div class="aside-list"><span>正在加载中...</span></div>
<div class="aside-list">
<th:block th:if="${#strings.equals(theme.config.comments.use, 'commentWidget') }">
<div class="aside-list-item" th:each="comment : ${commentFinder.list(null, 1, 10)}" th:with="post = ${postFinder.getByName(comment.spec.subjectRef.name)}">
<a th:href="${post.status.permalink + '#comment-' + comment.metadata.name}" class="thumbnail" data-pjax-state="">
<img th:src="${#strings.isEmpty(comment.owner.avatar)?'https://cravatar.cn/avatar/?d=mp':comment.owner.avatar}"
th:alt="${comment.owner.displayName}" data-ll-status="loaded" class="entered loaded">
<div class="name"><span>stonewu</span></div>
</a>
<div class="content">
<a class="comment" th:href="${post.status.permalink + '#comment-' + comment.metadata.name}" 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>
</th:block>
<span th:if="${#strings.equals(theme.config.comments.use, 'Twikoo') }">正在加载中...</span></div>
</div>
</div>
<!-- 右侧展示 tag -->
@ -116,7 +130,7 @@
</div>
<!-- 最近评论 -->
<script th:replace="~{modules/widgets/cardNewestComments :: cardNewestComments}"></script>
<th:block th:replace="~{modules/widgets/cardNewestComments :: cardNewestComments}"></th:block>
</div>
</html>