<th:block th:if="${#strings.equals(theme.config.comments.use, 'Artalk') && not #strings.isEmpty(theme.config.comments.artalks.server)}"> <div class="js-pjax"> <script th:src="${assets_link + '/js/comment/artalk.js'}"></script> <input type="hidden" name="page-type" id="page-type" value="album"> </div> <!-- 最近评论 --> <script> window.addEventListener('load', () => { const generateHtml = array => { let result = '' if (array.length) { for (let i = 0; i < array.length; i++) { if (i == 6) { break; } result += '<div class=\'aside-list-item\'>' if (true) { 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>` } result += `<div class='content'> <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a> <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div> </div>` } } else { result += '没有评论' } let $dom = document.querySelector('#card-newest-comments .aside-list') $dom.innerHTML = result window.lazyLoadInstance && window.lazyLoadInstance.update() window.pjax && window.pjax.refresh($dom) } const necommHtml = array => { let result = '' const pagesize = [[${ theme.config.sidebar.newcomment.newcommentnumber }]]; const defaultpagesize = 5; const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize; if (array.length) { for (let i = 0; i < array.length; i++) { if (i == finalpagesize) { break; } result += '<div class="aside-list-item">' if (true) { let name = 'src' if ([[${ isLazyload }]]) { name = 'data-lazy-src' } result += ` <a class="thumbnail" href="${array[i].url}"> <img alt="dasda" ${name}="${array[i].avatar}"> </a> ` } result += ` <div class="content"> <a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;" href="${array[i].url}" title="${array[i].content}"> ${array[i].content} </a> <div class="name"> <span>${array[i].nick} / </span> <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time> </div> </div> </div> ` } } else { result += '没有评论' } let $dom = document.querySelector('#newcomm') $dom.innerHTML = result window.lazyLoadInstance && window.lazyLoadInstance.update() window.pjax && window.pjax.refresh($dom) } // let artalkUrl = ''; // const getArtalkUrl = () => { // fetch("[(${theme.config.comments.artalks.server})]" + 'api/v2/conf') // .then(response => response.json()) // .then(d => { // artalkUrl = 'api/v2/stats/latest_comments' // }) // .catch(e => { // console.log(e); // artalkUrl = 'api/stat' // }) // } const getComment = () => { const statheaderList = { method: 'GET', headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Origin': window.location.origin } // , // body: new URLSearchParams({ // 'site_name': GLOBAL_CONFIG.source.artalk.siteName, // 'limit': '20', // 'type': 'latest_comments' // }) } var params ={'site_name': GLOBAL_CONFIG.source.artalk.siteName,'limit': '20',}; //getArtalkUrl(); //兼容2.8以后版本的artalk接口 fetch("[(${theme.config.comments.artalks.server})]" + 'api/v2/stats/latest_comments?'+ new URLSearchParams(params).toString(), statheaderList) .then(response => response.json()) .then(d => { const artalk = d.data.map(function (e) { return { 'avatar': 'https://cravatar.cn/avatar/' + e.email_encrypted + '?d=mp&s=240', 'content': btf.changeContent(e.content_marked, 150), 'nick': e.nick, 'url': e.page_url + '#atk-comment-' + e.id, 'date': e.date, } }) saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), 10 / (60 * 24)) generateHtml(artalk) document.querySelector('#newcomm') && necommHtml(artalk) }).catch(e => { const $dom = document.querySelector('#card-newest-comments .aside-list') $dom.innerHTML = "无法获取评论,请确认相关配置是否正确" }) } const newestCommentInit = () => { if (document.querySelector('#card-newest-comments .aside-list')) { const data = saveToLocal.get('artalk-newest-comments') if (data) { generateHtml(JSON.parse(data)) document.querySelector('#newcomm') && necommHtml(JSON.parse(data)) } else { getComment(); } } } newestCommentInit() document.addEventListener('pjax:complete', newestCommentInit) }) </script> <style> .atk-sidebar-layer { top: 10%; left: 20%; width: 60%; height: 80%; transform: translateY(120%); border-radius: 12px; padding: 10px 0; background: #FFF; } @media only screen and (max-width: 600px) { .atk-sidebar-layer { width: 100%; height: 100%; left: 0; top: 0; border-radius: 0 } } .atk-layer-wrap .atk-layer-mask { backdrop-filter: blur(10px); } .atk-main-editor > .atk-bottom .atk-plug-btn:not(:last-child) { border-right: 1px solid var(--at-color-border); } .atk-main-editor > .atk-bottom .atk-plug-btn { display: inline-flex; align-content: center; justify-content: center; } .atk-comment > .atk-avatar { width: 48px; height: 48px } .atk-comment > .atk-avatar img { width: 48px; height: 48px; border-radius: 50%; transition: all .3s ease; } .atk-comment > .atk-avatar img:hover { transform: scale(1.2); border-radius: 4px } .atk-comment > .atk-avatar img.error:before { width: 48px !important; height: 48px !important; border-radius: 3px } .atk-comment > .atk-avatar img.error:after { display: none } #owo-big p { color: var(--at-color-meta); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: center; font-size: 12px; margin: 0; margin-top: -14px !important; } </style> </th:block>