halo-theme-hao/templates/modules/comment/Artalk.html

<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>