在Nobelium集成Waline评论

碎碎念之前在用其他主题的时候 经常因为不兼容一些评论系统 所以而放弃 但是Nobelium很符合我的审美 所以我准备强制兼容Waline在Nobelium！在Nobelium已经有了其他评论系统的框架 魔改起来是十分轻松的！让我们开始！使用pnpm安装waline客户端 pnpm add -D @waline/client 创建文件components/WalineComponent.js 并且添加内容 import { createRef, useEffect } from 'react' import { init } from '@waline/client' import { useRouter } from 'next/router' import '../node_modules/@waline/client/dist/waline.css' const path = '' let waline = null const WalineComponent = (props) => { const containerRef = createRef() const router = useRouter() const updateWaline = url => { if (url !== path && waline) { waline.update(props) } } useEffect(() => { if (!waline) { waline = init({ ...props, el: containerRef.current, serverURL: '',//修改为你的Waline服务端 lang: "zh-cn", dark: 'html.dark', emoji: [ '//npm.elemecdn.com/@waline/emojis@1.1.0/tieba', '//npm.elemecdn.com/@waline/emojis@1.1.0/weibo', '//npm.elemecdn.com/@waline/emojis@1.1.0/bilibili' ] }) } router.events.on('routeChangeComplete', updateWaline) const anchor = window.location.hash if (anchor) { const targetNode = document.getElementsByClassName('wl-cards')[0] const mutationCallback = (mutations) => { for (const mutation of mutations) { const type = mutation.type if (type === 'childList') { const anchorElement = document.getElementById(anchor.substring(1)) if (anchorElement && anchorElement.className === 'wl-item') { anchorElement.scrollIntoView({ block: 'end', behavior: 'smooth' }) setTimeout(() => { anchorElement.classList.add('animate__animated') anchorElement.classList.add('animate__bounceInRight') observer.disconnect() }, 300) } } } } const observer = new MutationObserver(mutationCallback) observer.observe(targetNode, { childList: true }) } return () => { if (waline) { waline.destroy() waline = null } router.events.off('routeChangeComplete', updateWaline) } }, []) return

} export default WalineComponent ⚠️ 请修改成你的Waline服务器地址！在components/Comments.js的适当位置添加 const WalineComponent = dynamic( () => { return import('@/components/WalineComponent') }, { ssr: false } )

至此 部署后 你的Waline就应该生效啦！