优化最新评论图片懒加载
This commit is contained in:
1152958806@qq.com
parent
1df12d4912
commit
740150a220
|
|
@ -13,7 +13,10 @@
|
|||
</th:block>
|
||||
|
||||
<img th:if="${not #strings.isEmpty(theme.config.footer.social_media.centerImg)}" class="footer_mini_logo"
|
||||
th:src="@{${theme.config.footer.social_media.centerImg}}" title="返回顶部" onclick="btf.scrollToDest(0, 500)">
|
||||
th:with="img = @{${theme.config.footer.social_media.centerImg}}"
|
||||
th:src="${isLazyload ? '' : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
title="返回顶部" onclick="btf.scrollToDest(0, 500)">
|
||||
<th:block th:with="socialMedias = ${theme.config.footer.social_media.socialMediaRight}">
|
||||
<a class="deal_link" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
|
||||
th:href="${socialMedia.url}" th:title="${socialMedia.name}">
|
||||
|
|
@ -109,7 +112,9 @@
|
|||
<a class="github-badge" th:each="data : ${bdageitem}" target="_blank"
|
||||
th:href="@{${data.link}}" style="margin-inline:5px"
|
||||
th:title="${data.message}">
|
||||
<img th:src="@{${data.shields}}"
|
||||
<img th:with=" img = @{${data.shields}}"
|
||||
th:src="${isLazyload ? '' : img}"
|
||||
th:data-lazy-src="${ isLazyload ? img : ''}"
|
||||
th:alt="${data.message}" />
|
||||
</a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -6,15 +6,20 @@
|
|||
<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,iterStat : ${commentFinder.list(null, 1, 20)}"
|
||||
th:with="page = ${comment.spec.subjectRef.kind == 'Post' ? postFinder.getByName(comment.spec.subjectRef.name) : null}"
|
||||
th:with="page = ${comment.spec.subjectRef.kind == 'Post' ? postFinder.getByName(comment.spec.subjectRef.name) :
|
||||
comment.spec.subjectRef.kind == 'SinglePage' ? singlePageFinder.getByName(comment.spec.subjectRef.name) : null},
|
||||
url = ${page == null? '/' : page.status.permalink + '#comment-' + comment.metadata.name}"
|
||||
th:if="${iterStat.index < theme.config.sidebar.newcommentnumber}">
|
||||
<span th:text="${commentIndex}"></span>
|
||||
<a class="thumbnail" th:href="${page == null? '/' : page.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 class="thumbnail" th:href="${url}" data-pjax-state="">
|
||||
<img alt="头像"
|
||||
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 : ''}">
|
||||
</a>
|
||||
<div class="content" >
|
||||
<a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;"
|
||||
th:href="${page == null? '/' : page.status.permalink + '#comment-' + comment.metadata.name}" th:title="${comment.spec.content}" th:text="${comment.spec.content}" data-pjax-state="">
|
||||
th:href="${url}" th:title="${comment.spec.content}" th:text="${comment.spec.content}" data-pjax-state="">
|
||||
|
||||
</a>
|
||||
<div class="name">
|
||||
|
|
@ -38,10 +43,14 @@
|
|||
includeReply: false // 是否包括最新回复，默认：false
|
||||
}).then(function (res) {
|
||||
let commenthtml = '';
|
||||
let name = 'src'
|
||||
if([[${isLazyload}]]){
|
||||
name = 'data-lazy-src'
|
||||
}
|
||||
res.forEach((items)=>{
|
||||
commenthtml += `<div class="aside-list-item">
|
||||
<a class="thumbnail" href="${items.url + '#' + items.id}">
|
||||
<img loading="lazy" alt="dasda" src="${items.avatar}">
|
||||
<img alt="dasda" ${name}="${items.avatar}">
|
||||
</a>
|
||||
<div class="content">
|
||||
<a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;" href="${items.url + '#' + items.id}" title="test">
|
||||
|
|
|
|||
|
|
@ -63,7 +63,10 @@
|
|||
result += '<div class=\'aside-list-item\'>'
|
||||
|
||||
if (true) {
|
||||
const name = 'src'
|
||||
let name = 'src'
|
||||
if([[${isLazyload}]]){
|
||||
name = 'data-lazy-src'
|
||||
}
|
||||
result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,15 +18,19 @@
|
|||
<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) : null}"
|
||||
th:with="page = ${comment.spec.subjectRef.kind == 'Post' ? postFinder.getByName(comment.spec.subjectRef.name) :
|
||||
comment.spec.subjectRef.kind == 'SinglePage' ? 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="${page == null? '/' : page.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">
|
||||
<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="${page == null? '/' : page.status.permalink + '#comment-' + comment.metadata.name}" th:title="${comment.spec.content}" data-pjax-state="" th:text="${comment.spec.content}"></a>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue