nnbb 0.0.1

package/components/ThemeSwitch.js

@@ -0,0 +1,67 @@
+import { useGlobal } from '@/lib/global';
+import React, { useState } from 'react';
+import { Draggable } from './Draggable';
+import { THEMES } from '@/theme';
+import { useRouter } from 'next/router';
+/**
+ *
+ * @returns 主题切换
+ */
+const ThemeSwitch = () => {
+  const { theme } = useGlobal();
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  // 修改当前路径url中的 theme 参数
+  // 例如 http://localhost?theme=hexo 跳转到 http://localhost?theme=newTheme
+  const onSelectChange = (e) => {
+    setIsLoading(true);
+    const newTheme = e.target.value;
+    const query = router.query;
+    query.theme = newTheme;
+    router.push({ pathname: router.pathname, query }).then(() => {
+      setIsLoading(false);
+    });
+  };
+
+  return (
+    <>
+      <Draggable>
+        <div
+          id="draggableBox"
+          style={{ left: '10px', top: '80vh' }}
+          className="fixed z-50 rounded-2xl bg-gray-50 drop-shadow-lg dark:bg-black dark:text-white"
+        >
+          <div className="group flex w-full items-center p-3 text-sm transition-all duration-200">
+            <div className="w-0 overflow-hidden transition-all duration-200 group-hover:w-20">
+              <select
+                value={theme}
+                onChange={onSelectChange}
+                name="themes"
+                className="cursor-pointer appearance-none bg-gray-50 uppercase outline-none dark:bg-black dark:text-white"
+              >
+                {THEMES?.map((t) => {
+                  return (
+                    <option key={t} value={t}>
+                      {t}
+                    </option>
+                  );
+                })}
+              </select>
+            </div>
+            <i className="fa-solid fa-palette pl-2"></i>
+          </div>
+        </div>
+        {/* 切换主题加载时的全屏遮罩 */}
+        <div
+          className={`${isLoading ? 'opacity-50 ' : 'opacity-0'} shadow-text pointer-events-none fixed left-0 top-0 z-50 flex h-screen
+                              w-screen items-center justify-center bg-black text-white shadow-inner transition-all duration-1000`}
+        >
+          <i className="fas fa-spinner mr-5 animate-spin text-3xl" />
+        </div>
+      </Draggable>
+    </>
+  );
+};
+
+export default ThemeSwitch;

package/components/Twikoo.js

@@ -0,0 +1,27 @@
+import BLOG from '@/blog.config'
+// import { loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+
+/**
+ * Giscus评论 @see https://giscus.app/zh-CN
+ * Contribute by @txs https://github.com/txs/NotionNext/commit/1bf7179d0af21fb433e4c7773504f244998678cb
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const Twikoo = ({ isDarkMode }) => {
+  useEffect(() => {
+    window?.twikoo?.init({
+      envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
+      el: '#twikoo', // 容器元素
+      lang: BLOG.LANG // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
+      // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
+      // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
+    })
+  }, [isDarkMode])
+  return (
+        <div id="twikoo"></div>
+  )
+}
+
+export default Twikoo

package/components/TwikooCommentCount.js

@@ -0,0 +1,22 @@
+import BLOG from '@/blog.config'
+// import twikoo from 'twikoo'
+
+/**
+ * 获取博客的评论数，用与在列表中展示
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const TwikooCommentCount = ({ post, className }) => {
+  if (!JSON.parse(BLOG.COMMENT_TWIKOO_COUNT_ENABLE)) {
+    return null
+  }
+  return <a href={`${post.slug}?target=comment`} className={`mx-1 hidden comment-count-wrapper-${post.id} ${className || ''}`}>
+        <i className="far fa-comment mr-1"></i>
+        <span className={`comment-count-text-${post.id}`}>
+            {/* <i className='fa-solid fa-spinner animate-spin' /> */}
+        </span>
+    </a>
+}
+
+export default TwikooCommentCount

package/components/TwikooCommentCounter.js

@@ -0,0 +1,78 @@
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import { loadExternalResource } from '@/lib/utils'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+/**
+ * 获取博客的评论数，用与在列表中展示
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const TwikooCommentCounter = (props) => {
+  let commentsData = []
+  const { theme } = useGlobal()
+
+  const fetchTwikooData = async (posts) => {
+    posts.forEach(post => {
+      post.slug = post.slug.startsWith('/') ? post.slug : `/${post.slug}`
+    })
+    try {
+      await loadExternalResource(BLOG.COMMENT_TWIKOO_CDN_URL, 'js')
+      const twikoo = window.twikoo
+      twikoo.getCommentsCount({
+        envId: BLOG.COMMENT_TWIKOO_ENV_ID, // 环境 ID
+        // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
+        urls: posts?.map(post => post.slug), // 不包含协议、域名、参数的文章路径列表，必传参数
+        includeReply: true // 评论数是否包括回复，默认：false
+      }).then(function (res) {
+        commentsData = res
+        updateCommentCount()
+      }).catch(function (err) {
+        // 发生错误
+        console.error(err)
+      })
+    } catch (error) {
+      console.error('twikoo 加载失败', error)
+    }
+  }
+
+  const updateCommentCount = () => {
+    if (commentsData.length === 0) {
+      return
+    }
+    props.posts.forEach(post => {
+      const matchingRes = commentsData.find(r => r.url === post.slug)
+      if (matchingRes) {
+        // 修改评论数量div
+        const textElements = document.querySelectorAll(`.comment-count-text-${post.id}`)
+        textElements.forEach(element => {
+          element.innerHTML = matchingRes.count
+        })
+        // 取消隐藏
+        const wrapperElements = document.querySelectorAll(`.comment-count-wrapper-${post.id}`)
+        wrapperElements.forEach(element => {
+          element.classList.remove('hidden')
+        })
+      }
+    })
+  }
+  const router = useRouter()
+
+  useEffect(() => {
+    // console.log('路由触发评论计数')
+    if (props?.posts && props?.posts?.length > 0) {
+      fetchTwikooData(props.posts)
+    }
+  }, [router.events])
+
+  // 监控主题变化时的的评论数
+  useEffect(() => {
+    // console.log('主题触发评论计数', commentsData)
+    updateCommentCount()
+  }, [theme])
+  return null
+}
+
+export default TwikooCommentCounter

package/components/TwikooRecentComments.js

@@ -0,0 +1,11 @@
+/**
+ * 显示最近评论 TODO
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
+const TwikooRecentComments = () => {
+  return null;
+};
+
+export default TwikooRecentComments;

package/components/Utterances.js

@@ -0,0 +1,35 @@
+import BLOG from '@/blog.config';
+import { useEffect } from 'react';
+
+/**
+ * 评论插件
+ * @param issueTerm
+ * @param layout
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Utterances = () => {
+  useEffect(() => {
+    const theme =
+      BLOG.APPEARANCE === 'auto'
+        ? 'preferred-color-scheme'
+        : BLOG.APPEARANCE === 'light'
+          ? 'github-light'
+          : 'github-dark';
+    const script = document.createElement('script');
+    const anchor = document.getElementById('comments');
+    script.setAttribute('src', 'https://utteranc.es/client.js');
+    script.setAttribute('crossorigin', 'anonymous');
+    script.setAttribute('async', true);
+    script.setAttribute('repo', BLOG.COMMENT_UTTERRANCES_REPO);
+    script.setAttribute('issue-term', 'title');
+    script.setAttribute('theme', theme);
+    anchor.appendChild(script);
+    return () => {
+      anchor.innerHTML = '';
+    };
+  });
+  return <div id="comments" className="utterances"></div>;
+};
+
+export default Utterances;

package/components/VConsole.js

@@ -0,0 +1,76 @@
+import { loadExternalResource } from '@/lib/utils';
+import { useEffect, useRef } from 'react';
+
+const VConsole = () => {
+  const clickCountRef = useRef(0); // 点击次数
+  const lastClickTimeRef = useRef(); // 最近一次点击时间戳
+  const timerRef = useRef(); // 定时器引用
+
+  const loadVConsole = async () => {
+    try {
+      const url = await loadExternalResource(
+        'https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js',
+        'js',
+      );
+      if (!url) {
+        return;
+      }
+      const VConsole = window.VConsole;
+      const vConsole = new VConsole();
+      return vConsole;
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    const clickListener = () => {
+      const now = Date.now();
+      // 只监听窗口中心的100x100像素范围内的单击事件
+      const centerX = window.innerWidth / 2;
+      const centerY = window.innerHeight / 2;
+      const range = 50;
+      const inRange =
+        event.clientX >= centerX - range &&
+        event.clientX <= centerX + range &&
+        event.clientY >= centerY - range &&
+        event.clientY <= centerY + range;
+
+      if (!inRange) {
+        return;
+      }
+
+      // 如果在1秒内连续点击了8次
+      if (
+        now - lastClickTimeRef.current < 1000 &&
+        clickCountRef.current + 1 === 8
+      ) {
+        loadVConsole();
+        clickCountRef.current = 0; // 重置计数器
+        clearTimeout(timerRef.current); // 清除定时器
+        window.removeEventListener('click', clickListener);
+      } else {
+        // 如果不满足条件，则重新设置时间戳和计数器
+        lastClickTimeRef.current = now;
+        clickCountRef.current += 1;
+        // 如果计数器不为0，则设置定时器
+        if (clickCountRef.current > 0) {
+          clearTimeout(timerRef.current);
+          timerRef.current = setTimeout(() => {
+            clickCountRef.current = 0;
+          }, 1000);
+        }
+      }
+    };
+    // 监听窗口点击事件
+    window.addEventListener('click', clickListener);
+    return () => {
+      window.removeEventListener('click', clickListener);
+      clearTimeout(timerRef.current);
+    };
+  }, []);
+
+  return null;
+};
+
+export default VConsole;

package/components/ValineComponent.js

@@ -0,0 +1,59 @@
+import BLOG from '@/blog.config';
+import { loadExternalResource } from '@/lib/utils';
+import { useEffect } from 'react';
+
+const ValineComponent = ({ path }) => {
+  const loadValine = async () => {
+    try {
+      await loadExternalResource(BLOG.COMMENT_VALINE_CDN, 'js');
+      const Valine = window.Valine;
+      // eslint-disable-next-line no-unused-vars
+      new Valine({
+        el: '#valine', // 容器元素
+        lang: BLOG.LANG, // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/main/src/client/utils/i18n/index.js
+        appId: BLOG.COMMENT_VALINE_APP_ID,
+        appKey: BLOG.COMMENT_VALINE_APP_KEY,
+        avatar: '',
+        path,
+        recordIP: true,
+        placeholder: BLOG.COMMENT_VALINE_PLACEHOLDER,
+        serverURLs: BLOG.COMMENT_VALINE_SERVER_URLS,
+        visitor: true,
+      });
+    } catch (error) {
+      console.error('twikoo 加载失败', error);
+    }
+  };
+
+  useEffect(() => {
+    loadValine();
+  }, []);
+
+  return <div id="valine"></div>;
+
+  //   const updateValine = url => {
+  //     // 移除旧的评论区，否则会重复渲染。
+  //     const wrapper = document.getElementById('v-wrapper')
+  //     const comments = document.getElementById('v-comments')
+  //     wrapper.removeChild(comments)
+  //     const newComments = document.createElement('div')
+  //     newComments.id = 'v-comments'
+  //     newComments.name = new Date()
+  //     wrapper.appendChild(newComments)
+  //     initValine(url)
+  //   }
+
+  //   useEffect(() => {
+  //     initValine()
+  //     router.events.on('routeChangeComplete', updateValine)
+  //     return () => {
+  //       router.events.off('routeChangeComplete', updateValine)
+  //     }
+  //   }, [])
+
+  //   return <div id='v-wrapper'>
+  //       <div id='v-comments'></div>
+  //   </div>
+};
+
+export default ValineComponent;

package/components/ValineCount.js

@@ -0,0 +1,6 @@
+import { ValineCount } from 'react-valine'
+
+/**
+ * 显示评论数
+ */
+export default ValineCount

package/components/ValinePanel.js

@@ -0,0 +1,3 @@
+import { ValinePanel } from 'react-valine'
+
+export default ValinePanel

package/components/Vercel.tsx

@@ -0,0 +1,54 @@
+import { useGlobal } from '@/lib/global';
+
+const Vercel = () => {
+  const { isDarkMode } = useGlobal();
+
+  const fontColor = isDarkMode ? 'black' : 'white';
+  const bgColor = isDarkMode ? 'white' : 'black';
+  const dividerColor = isDarkMode ? '#050505' : '#e5e5e5';
+
+  return (
+    <a
+      href="https://vercel.com?utm_source=Craigary&utm_campaign=oss"
+      target="_blank"
+      rel="noreferrer"
+      aria-label="Vercel"
+    >
+      <svg
+        width="135"
+        height="28"
+        viewBox="0 0 135 28"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="inline-block"
+      >
+        <g clipPath="url(#clip0)">
+          <path
+            d="M129.818 0H5.09091C2.27928 0 0 2.27928 0 5.09091V22.9091C0 25.7207 2.27928 28 5.09091 28H129.818C132.63 28 134.909 25.7207 134.909 22.9091V5.09091C134.909 2.27928 132.63 0 129.818 0Z"
+            fill={bgColor}
+          />
+          <path
+            d="M38.4601 9.68997V16.8639H39.355V14.3036H41.1597C42.507 14.3036 43.4665 13.354 43.4665 12.0117C43.4665 10.6445 42.5268 9.68997 41.1696 9.68997H38.4601ZM39.355 10.4854H40.9359C41.975 10.4854 42.5467 11.0273 42.5467 12.0117C42.5467 12.9613 41.9551 13.5081 40.9359 13.5081H39.355V10.4854ZM46.6734 16.9584C48.1996 16.9584 49.1442 15.9044 49.1442 14.1843C49.1442 12.4591 48.1996 11.4101 46.6734 11.4101C45.1471 11.4101 44.2025 12.4591 44.2025 14.1843C44.2025 15.9044 45.1471 16.9584 46.6734 16.9584ZM46.6734 16.1878C45.6591 16.1878 45.0874 15.452 45.0874 14.1843C45.0874 12.9116 45.6591 12.1807 46.6734 12.1807C47.6875 12.1807 48.2593 12.9116 48.2593 14.1843C48.2593 15.452 47.6875 16.1878 46.6734 16.1878ZM56.8255 11.5046H55.9654L54.9115 15.7901H54.8319L53.6338 11.5046H52.8135L51.6153 15.7901H51.5358L50.4818 11.5046H49.6167L51.1182 16.8639H51.9832L53.1764 12.7177H53.2559L54.4541 16.8639H55.3241L56.8255 11.5046ZM59.7043 12.1658C60.5544 12.1658 61.1212 12.7922 61.1411 13.7418H58.1879C58.2526 12.7922 58.8492 12.1658 59.7043 12.1658ZM61.1162 15.4769C60.8925 15.9492 60.4252 16.2027 59.7341 16.2027C58.8243 16.2027 58.2327 15.5315 58.1879 14.4726V14.4328H62.0409V14.1047C62.0409 12.4392 61.161 11.4101 59.7142 11.4101C58.2427 11.4101 57.298 12.5038 57.298 14.1892C57.298 15.8845 58.2277 16.9584 59.7142 16.9584C60.8875 16.9584 61.7227 16.3916 61.9714 15.4769H61.1162ZM63.1796 16.8639H64.0346V13.5429C64.0346 12.7873 64.6264 12.2404 65.4416 12.2404C65.6109 12.2404 65.9189 12.2702 65.9889 12.2901V11.435C65.8794 11.42 65.6999 11.4101 65.5612 11.4101C64.8504 11.4101 64.2338 11.778 64.0747 12.3H63.9951V11.5046H63.1796V16.8639ZM68.8423 12.1658C69.6925 12.1658 70.2595 12.7922 70.2792 13.7418H67.3259C67.3908 12.7922 67.9877 12.1658 68.8423 12.1658ZM70.2544 15.4769C70.0304 15.9492 69.5633 16.2027 68.8722 16.2027C67.9622 16.2027 67.371 15.5315 67.3259 14.4726V14.4328H71.179V14.1047C71.179 12.4392 70.2989 11.4101 68.8525 11.4101C67.3806 11.4101 66.4362 12.5038 66.4362 14.1892C66.4362 15.8845 67.3659 16.9584 68.8525 16.9584C70.0259 16.9584 70.8609 16.3916 71.1097 15.4769H70.2544ZM74.3017 16.9584C75.0424 16.9584 75.6788 16.6055 76.0167 16.0088H76.0962V16.8639H76.9114V9.37675H76.0568V12.3497H75.9817C75.6788 11.7631 75.0475 11.4101 74.3017 11.4101C72.9392 11.4101 72.0496 12.5038 72.0496 14.1843C72.0496 15.8696 72.929 16.9584 74.3017 16.9584ZM74.5002 12.1807C75.47 12.1807 76.0765 12.9563 76.0765 14.1843C76.0765 15.4222 75.4745 16.1878 74.5002 16.1878C73.5209 16.1878 72.9341 15.4371 72.9341 14.1843C72.9341 12.9364 73.5259 12.1807 74.5002 12.1807ZM83.7033 16.9584C85.0607 16.9584 85.9503 15.8597 85.9503 14.1843C85.9503 12.4989 85.0651 11.4101 83.7033 11.4101C82.9677 11.4101 82.316 11.773 82.0227 12.3497H81.9431V9.37675H81.0879V16.8639H81.9037V16.0088H81.9832C82.3211 16.6055 82.9575 16.9584 83.7033 16.9584ZM83.5041 12.1807C84.4835 12.1807 85.0651 12.9314 85.0651 14.1843C85.0651 15.4371 84.4835 16.1878 83.5041 16.1878C82.5299 16.1878 81.9234 15.4222 81.9234 14.1843C81.9234 12.9464 82.5299 12.1807 83.5041 12.1807ZM87.3478 18.8029C88.2972 18.8029 88.7249 18.435 89.1818 17.1921L91.2754 11.5046H90.3654L88.8986 15.9144H88.819L87.3478 11.5046H86.4231L88.4067 16.8689L88.3068 17.1871C88.0834 17.8334 87.8149 18.0671 87.3229 18.0671C87.2033 18.0671 87.069 18.0621 86.9647 18.0422V18.773C87.0843 18.7929 87.2332 18.8029 87.3478 18.8029ZM98.4148 16.8639L100.895 9.68997H99.5284L97.7383 15.3675H97.6543L95.8496 9.68997H94.4324L96.9384 16.8639H98.4148ZM103.516 12.295C104.257 12.295 104.744 12.8121 104.769 13.6175H102.208C102.263 12.822 102.78 12.295 103.516 12.295ZM104.778 15.3675C104.6 15.7702 104.177 15.9939 103.565 15.9939C102.755 15.9939 102.233 15.4272 102.203 14.5223V14.4577H106.001V14.06C106.001 12.3447 105.072 11.3156 103.521 11.3156C101.945 11.3156 100.965 12.4144 100.965 14.1644C100.965 15.9144 101.93 16.9733 103.53 16.9733C104.813 16.9733 105.723 16.3568 105.947 15.3675H104.778ZM107.036 16.8639H108.269V13.7219C108.269 12.9613 108.826 12.4641 109.626 12.4641C109.835 12.4641 110.163 12.4989 110.257 12.5337V11.3902C110.143 11.3555 109.924 11.3355 109.745 11.3355C109.045 11.3355 108.458 11.7333 108.308 12.2702H108.224V11.425H107.036V16.8639ZM115.627 13.2546C115.498 12.1111 114.652 11.3156 113.255 11.3156C111.62 11.3156 110.66 12.3647 110.66 14.1296C110.66 15.9193 111.625 16.9733 113.26 16.9733C114.638 16.9733 115.493 16.2077 115.627 15.0692H114.454C114.324 15.636 113.897 15.9392 113.255 15.9392C112.415 15.9392 111.908 15.273 111.908 14.1296C111.908 13.001 112.41 12.3497 113.255 12.3497C113.932 12.3497 114.339 12.7276 114.454 13.2546H115.627ZM118.883 12.295C119.624 12.295 120.112 12.8121 120.136 13.6175H117.576C117.63 12.822 118.148 12.295 118.883 12.295ZM120.147 15.3675C119.967 15.7702 119.545 15.9939 118.933 15.9939C118.123 15.9939 117.601 15.4272 117.571 14.5223V14.4577H121.369V14.06C121.369 12.3447 120.439 11.3156 118.888 11.3156C117.312 11.3156 116.333 12.4144 116.333 14.1644C116.333 15.9144 117.298 16.9733 118.899 16.9733C120.181 16.9733 121.091 16.3568 121.314 15.3675H120.147ZM122.453 16.8639H123.686V9.32202H122.453V16.8639Z"
+            fill={fontColor}
+          />
+          <path
+            d="M14.8431 8.27271L20.7772 18.4545H8.90918L14.8431 8.27271Z"
+            fill={fontColor}
+          />
+          <path
+            d="M27.6819 0V28"
+            stroke={dividerColor}
+            strokeWidth="0.636364"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0">
+            <rect width="134.909" height="28" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </a>
+  );
+};
+
+export default Vercel;

package/components/WWAds.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import BLOG from '@/blog.config'
+
+/**
+ * 万维广告插件
+ * @param {string} orientation - 广告方向，可以是 'vertical' 或 'horizontal'
+ * @param {boolean} sticky - 是否粘性定位
+ * @returns {JSX.Element | null} - 返回渲染的 JSX 元素或 null
+ */
+export default function WWAds({ orientation = 'vertical', sticky = false, className }) {
+  if (!JSON.parse(BLOG.AD_WWADS_ID)) {
+    return null
+  }
+
+  return (
+    <div className={`wwads-cn ${orientation === 'vertical' ? 'wwads-vertical' : 'wwads-horizontal'} ${sticky ? 'wwads-sticky' : ''} z-30 ${className || ''}`} data-id={BLOG.AD_WWADS_ID}></div>
+  )
+}

package/components/WalineComponent.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import { init } from '@waline/client'
+import BLOG from '@/blog.config'
+import { useRouter } from 'next/router'
+import '@waline/client/dist/waline.css'
+
+const path = ''
+let waline = null
+/**
+ * @see https://waline.js.org/guide/get-started.html
+ * @param {*} props
+ * @returns
+ */
+const WalineComponent = (props) => {
+  const containerRef = React.createRef()
+  const router = useRouter()
+
+  const updateWaline = url => {
+    if (url !== path && waline) {
+      waline.update(props)
+    }
+  }
+
+  React.useEffect(() => {
+    if (!waline) {
+      waline = init({
+        ...props,
+        el: containerRef.current,
+        serverURL: BLOG.COMMENT_WALINE_SERVER_URL,
+        lang: BLOG.lang,
+        reaction: true,
+        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