<th:block  th:if="${#strings.equals(theme.config.comments.use, 'Waline')
  && not #strings.isEmpty(theme.config.comments.walines.serverURL)}">
    <div class="js-pjax">
        <script th:src="${assets_link + '/js/comment/waline.js'}"></script>
    </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 getComment = () => {
                const loadWaline = () => {
                    Waline.RecentComments({
                        serverURL: GLOBAL_CONFIG.source.waline.serverURL,
                        count: 20
                    }).then(({ comments }) => {
                        const walineArray = comments.map(e => {
                            return {
                                'content': btf.changeContent(e.comment,150),
                                'avatar': e.avatar,
                                'nick': e.nick,
                                'url': e.url + '#' + e.objectId,
                                'date': e.insertedAt,
                            }
                        })
                        saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), 10 / (60 * 24))
                        generateHtml(walineArray)
                        document.querySelector('#newcomm') && necommHtml(walineArray)
                    }).catch(e => {
                        const $dom = document.querySelector('#card-newest-comments .aside-list')
                        $dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
                    })
                }

                if (typeof Waline === 'object') loadWaline()
                else getScript(GLOBAL_CONFIG.source.waline.js).then(loadWaline)
            }

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

            const newestCommentInit = () => {
                if (document.querySelector('#card-newest-comments .aside-list')) {
                    const data = saveToLocal.get('waline-newest-comments')
                    if (data) {
                        generateHtml(JSON.parse(data))
                        document.querySelector('#newcomm') && necommHtml(JSON.parse(data))
                    } else {
                        getComment()
                    }
                }
            }

            newestCommentInit()
            document.addEventListener('pjax:complete', newestCommentInit)
        })


    </script>
</th:block>