碎碎念#

之前在用其他主题的时候 经常因为不兼容一些评论系统 所以而放弃 但是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 <div ref={containerRef} />
}
 
export default WalineComponent

⚠️ 请修改成你的Waline服务器地址！

在components/Comments.js的适当位置添加

const WalineComponent = dynamic(
  () => {
    return import('@/components/WalineComponent')
  },
  { ssr: false }
)


            <div key='Waline'>
              <WalineComponent />
            </div>

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