前言
实现一个评论轮播的功能。可以做到一边浏览文章一边偷偷看评论(其实除了好看,根本没有用,哈哈哈哈~)
借鉴
预览
查看预览
教程
关闭评论的懒加载
_config.butterfly.yml => comments.lazyload: false
|
修改 twikoo.pug
打开 Twikoo 评论文件 \themes\butterfly\layout\includes\third-party\comments\twikoo.pug
,添加以下内容。
- const { envId, region, option } = theme.twikoo - const { use, lazyload, count } = theme.comments
script. (()=>{ const init = () => { twikoo.init(Object.assign({ el: '#twikoo-wrap', envId: '!{envId}', region: '!{region}', onCommentLoaded: function () { btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)')) + setTimeout(function(){ + let tk_comment = document.querySelectorAll('.tk-comments-container .tk-comment') + if (tk_comment.length > 0) { + let html = `<div class="swiper-wrapper">` + for (let i = 0; i < tk_comment.length; i++) { + let tk_id = tk_comment[i].getAttribute('id') || '' + let tk_nick = tk_comment[i].querySelector('.tk-nick')?.innerText || '' + let tk_href = tk_comment[i].querySelector('.tk-nick')?.href || '' + let tk_avatar = tk_comment[i].querySelector('.tk-avatar-img')?.src || '' + let tk_time = tk_comment[i].querySelector('.tk-time')?.innerText || '' + let tk_city = tk_comment[i].querySelector('.tk-extras .tk-extra:first-child span:last-child')?.innerText || '' + let tk_content = tk_comment[i].querySelector('.tk-content>span:last-child')?.innerHTML || '' + tk_content = tk_content.replace(/\n/g, '') // replace \n + tk_content = tk_content.replace(/<blockquote>.*?<\/blockquote>/gi, '') // replace blockquote + tk_content = tk_content.replace(/<pre.*?<\/pre>/gi, '[!{_p("aside.card_newest_comments.code")}]') // replace code + html += ` + <div class="swiper-slide"> + <div class="comment-barrage-item"> + <div class="barrage-info"> + <a class="barrage-title" title="跳转至评论区" href="#post-comment">热评</a> + <a href="${tk_href ? tk_href + '" target="_blank" rel="noopener noreferrer" title="访问 '+ tk_nick +'"' : 'javascript:void(0);"'}> + <img class="barrage-avatar" src="${tk_avatar}"> + </a> + <span class="barrage-nick">${tk_nick}</span> + <span class="barrage-city">${tk_city}</span> + <span class="barrage-time">${tk_time}</span> + <a class="barrage-close" onclick="eurkon.switchCommentBarrage()" title="隐藏热评"><i class="fa-solid fa-xmark"></i></a> + </div> + <div class="barrage-content"> + <a title="跳转至该评论" href="#${tk_id}">${tk_content}</a> + </div> + </div> + </div>` + } + html += '</div>' + let barrageContainer = document.getElementById('comment-barrage') || document.createElement('div') + barrageContainer.id = 'comment-barrage' + barrageContainer.innerHTML = html + barrageContainer.style.display = window.localStorage.getItem('commentBarrageDisplay') === 'false' ? 'none' : 'block' + document.getElementById('post-comment').appendChild(barrageContainer) + var barrageSwiper = new Swiper('#comment-barrage', { + direction: 'vertical', + loop: true, + mousewheel: true, + autoplay: { + delay: 3000, + disableOnInteraction: true, + } + }) + barrageContainer.onmouseenter = function () { + barrageSwiper.autoplay.stop() + }; + barrageContainer.onmouseleave = function () { + barrageSwiper.autoplay.start() + }; + } + }, 1000) } }, !{JSON.stringify(option)})) }
const getCount = () => { const countELement = document.getElementById('twikoo-count') if(!countELement) return twikoo.getCommentsCount({ envId: '!{envId}', region: '!{region}', urls: [window.location.pathname], includeReply: false }).then(function (res) { countELement.innerText = res[0].count }).catch(function (err) { console.error(err); }); }
const runFn = () => { init() !{count ? 'GLOBAL_CONFIG_SITE.isPost && getCount()' : ''} }
const loadTwikoo = () => { if (typeof twikoo === 'object') { setTimeout(runFn,0) return } getScript('!{url_for(theme.asset.twikoo)}').then(runFn) }
if ('!{use[0]}' === 'Twikoo' || !!{lazyload}) { if (!{lazyload}) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo) else loadTwikoo() } else { window.loadOtherComment = () => { loadTwikoo() } } })()
|
增加自定义样式
在自定义样式文件yobob.css 增加以下样式,可以根据自己的喜欢修改
:root { --card-bg: #fff; --card-border: 1px solid #f0f0f0; --border-radius: 0.5rem; --box-shadow: 3px 6px 6px -3px rgba(45, 45, 45, 0.05); --main: rgb(247, 241, 237); --main-shadow: 3px 6px 6px -3px rgba(247, 241, 237, 0.2); --card-border-dashed: ; --font-color: #4c4948; --second: #000; --theme-color: #1677b3; }
#comment-barrage { display: block; position: fixed; z-index: 1; font-size: 90%; bottom: 1rem; right: 2rem; width: 306px; height: 150px; overflow: hidden; }
@media screen and (max-width: 900px) { #comment-barrage { display: none !important; } }
#comment-barrage .comment-barrage-item { opacity: 0; width: 300px; height: fit-content; max-height: 144px; padding: 10px; position: absolute; margin: 0 3px; bottom: 5px; background: var(--card-bg); border: var(--card-border); border-radius: var(--border-radius); box-shadow: var(--box-shadow); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#comment-barrage .swiper-slide-active .comment-barrage-item { opacity: 1; }
#comment-barrage .comment-barrage-item:hover { border-color: var(--main) !important; box-shadow: var(--main-shadow) !important; }
.barrage-info { overflow: hidden; font-size: 90%; height: 35px; border-bottom: var(--card-border-dashed); }
.barrage-info span { margin: 0 0.2em; vertical-align: middle; }
.barrage-title { font-weight: bold; padding: 0.3em 0.5em; background: var(--font-color); color: var(--card-bg); margin-right: 0.5em; border-radius: 0.5em; vertical-align: middle; }
.barrage-title:hover { color: var(--second); background: var(--main); }
.barrage-avatar { height: 2em; width: 2em; border-radius: 50%; vertical-align: middle; }
.barrage-nick { font-weight: bold; }
.barrage-close { position: absolute; top: 0; right: 10px; }
.barrage-content { padding-top: 5px; max-height: 95px; height: fit-content; overflow-y: scroll; text-align: justify; word-break: break-all; }
.barrage-content a { color: var(--font-color); }
.barrage-content a:hover { color: var(--theme-color); }
.barrage-content p { margin: 0; }
.barrage-content img { width: 3em; }
|
增加自定义热评脚本
在自定义脚本文件yobob.js 增加以下脚本
function switchCommentBarrage() { let flag = window.localStorage.getItem("commentBarrageDisplay"); document.getElementById("comment-barrage").style.display = flag === "false" ? "block" : "none"; window.localStorage.setItem( "commentBarrageDisplay", flag === "false" ? "undefined" : "false", 86400000 ); }
|
引入轮播及自定义文件
修改 _config.butterfly.yml
文件,引入以下文件
inject: head: - <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.css"> - <link rel="stylesheet" href="https://dj.yobob.cn/yobob.css">
bottom: - <script data-pjax src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/Swiper/8.0.6/swiper-bundle.min.js"></script> - <script data-pjax src="https://dj.yobob.cn/yobob.js"></script>
|
Hexo 三连
hexo clean && hexo g && hexo s
|