hexo/node_modules/hexo-douban/lib/templates/index.ejs

<blockquote>
    <p><%- quote; %></p>
</blockquote>

<style>
    <%- include('index.css') -%>
</style>

<div class="hexo-douban-tabs">
    <a class="hexo-douban-tab hexo-douban-tab-do" href="javascript:;"
       rel="external">
        <%= __(`${type}Do`) %>
        (<%= dO.length %>)</a>
    <a class="hexo-douban-tab hexo-douban-tab-wish" href="javascript:;"
       rel="external">
        <%= __(`${type}Wish`) %>
        (<%= wish.length %>)</a>
    <a class="hexo-douban-tab hexo-douban-tab-collect" href="javascript:;"
       rel="external">
        <%= __(`${type}Collect`) %>
        (<%= collect.length %>)</a>
</div>
<div class="hexo-douban-items">
</div>

<div class="hexo-douban-pagination">
    <a class="hexo-douban-button hexo-douban-firstpage" href="javascript:;"> <%= __('top') %></a>
    <a class="hexo-douban-button hexo-douban-previouspage" href="javascript:;"><%= __('prev') %></a>
    <span class="hexo-douban-pagenum">1 / 1</span>
    <a class="hexo-douban-button hexo-douban-nextpage" href="javascript:;"><%= __('next') %></a>
    <a class="hexo-douban-button hexo-douban-lastpage" href="javascript:;"><%= __('end') %></a>
</div>

<script>
    (function () {
        let data = {
            wish: <%- JSON.stringify(wish) %>,
            do: <%- JSON.stringify(dO) %>,
            collect: <%- JSON.stringify(collect) %>
        }

        let nav = {
            page: 0,
            pageMax: 1,
            action: 'collect'
        }

        let meta_max_line = <%= meta_max_line %>;
        let item_per_page = <%= item_per_page %>;

        // ======== index ========

        function tabClick(node, action) {
            for (let childNode of node.parentNode.children) {
                if (childNode.classList.contains('hexo-douban-tab-' + action)) {
                    childNode.classList.add('hexo-douban-tab-active');
                } else {
                    childNode.classList.remove('hexo-douban-tab-active');
                }
            }

            renderList(action, 1)
        }


        // ======== pagination ========
        (function initPagination() {
            let firstpage = document.querySelector(".hexo-douban-firstpage");
            let previouspage = document.querySelector(".hexo-douban-previouspage");
            let nextpage = document.querySelector(".hexo-douban-nextpage");
            let lastpage = document.querySelector(".hexo-douban-lastpage");

            //add listener
            firstpage.onclick = () => renderList(nav.action, 1);
            previouspage.onclick = () => renderList(nav.action, Math.max(1, nav.page - 1));
            nextpage.onclick = () => renderList(nav.action, Math.min(nav.page + 1, nav.pageMax));
            lastpage.onclick = () => renderList(nav.action, nav.pageMax);
        })();


        // ======== init index ========

        (function initIndex() {
            let tabDo = document.querySelector(".hexo-douban-tab-do");
            tabDo.onclick = () => tabClick(tabDo, 'do');

            let tabWish = document.querySelector(".hexo-douban-tab-wish");
            tabWish.onclick = () => tabClick(tabWish, 'wish');

            let tabCollect = document.querySelector(".hexo-douban-tab-collect");
            tabCollect.onclick = () => tabClick(tabCollect, 'collect');

            tabCollect.click();
        })();

        // ======== render ========
        function renderList(action, page) {
            if (action === nav.action && page === nav.page) {
                return
            }
            nav.page = page
            nav.pageMax = Math.max(1, Math.floor((data[action].length - 1) / item_per_page) + 1)
            nav.action = action

            document.querySelector('.hexo-douban-pagenum').textContent = `${nav.page} / ${nav.pageMax}`

            let container = document.querySelector('.hexo-douban-items')
            container.innerHTML = ''
            for (let i = (page - 1) * item_per_page; i < Math.min(page * item_per_page, data[action].length); i++) {
                container.append(renderItem(action, data[action][i]))
            }
        }

        function renderItem(action, data) {
            let item = document.createElement('div')
            item.className = 'hexo-douban-item'

            let picture = document.createElement('div')
            picture.className = 'hexo-douban-picture'

            let img = document.createElement('img')
            img.src = data.image
            img.loading = 'lazy'
            img.referrerPolicy = 'no-referrer'
            picture.append(img)

            let info = document.createElement('div')
            info.className = 'hexo-douban-info'

            let title = document.createElement('div')
            title.className = 'hexo-douban-title'

            let link = document.createElement('a')
            link.href = data.alt
            link.target = '_blank'
            link.textContent = data.title
            title.append(link)

            let meta = document.createElement('div')
            meta.className = 'hexo-douban-meta'
            meta.textContent = data.meta
            meta.setAttribute('style', `-webkit-line-clamp: ${meta_max_line}`);

            let rating = document.createElement('div')
            rating.className = 'hexo-douban-rating'
            rating.textContent = data.rating

            let comment = document.createElement('div')
            comment.className = 'hexo-douban-comment'
            comment.textContent = data.comment

            info.append(title, meta, rating, comment)

            item.append(picture, info)
            return item
        }

    })();

</script>