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

<th:block  th:if="${#strings.equals(theme.config.comments.use, 'Twikoo') &&
not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
    <div class="js-pjax">
        <script th:src="${assets_link + '/js/comment/twikoo.js'}"></script>
    </div>
    <!-- 最近评论 -->
    <script>
        window.addEventListener('load', () => {
            const getComment = () => {
                const runTwikoo = () => {
                    twikoo.getRecentComments({
                        envId: "[(${theme.config.comments.twikoos.envId})]",
                        region: '',
                        pageSize: 20,
                        includeReply: true
                    }).then(function (res) {
                        const twikooArray = res.map(e => {
                            return {
                                'content': btf.changeContent(e.comment,150),
                                'avatar': e.avatar,
                                'nick': e.nick,
                                'url': e.url + '#' + e.id,
                                'date': new Date(e.created).toISOString()
                            }
                        })

                        saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), 10 / (60 * 24))
                        generateHtml(twikooArray)
                        document.querySelector('#newcomm') && necommHtml(twikooArray)
                    }).catch(function (err) {
                        const $dom = document.querySelector('#card-newest-comments .aside-list')
                        const $newcomm = document.querySelector('#newcomm')
                        $dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
                        if($newcomm){
                            $newcomm.innerHTML = "无法获取评论，请确认相关配置是否正确"
                        }

                    })
                }

                if (typeof twikoo === 'object') {
                    runTwikoo()
                } else {
                    getScript(GLOBAL_CONFIG.source.twikoo.js).then(runTwikoo)
                }
            }

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

            const newestCommentInit = () => {
                if (document.querySelector('#card-newest-comments .aside-list')) {
                    const data = saveToLocal.get('twikoo-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>