gitbook 增加新文章红点机制

components/Badge.js

@@ -0,0 +1,11 @@
+/**
+ * 红点
+ */
+export default function Badge() {
+  return <>
+    {/* 红点 */}
+    <span class="absolute right-1 top-1 flex h-2 w-2">
+        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+        <span class="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
+    </span></>
+}

components/ExternalPlugins.js

@@ -80,6 +80,7 @@ const ExternalPlugin = (props) => {
   const GLOBAL_JS = siteConfig('GLOBAL_JS')
   const CLARITY_ID = siteConfig('CLARITY_ID')
   const IMG_SHADOW = siteConfig('IMG_SHADOW')
+  const ANIMATE_CSS_URL = siteConfig('ANIMATE_CSS_URL')
 
   // 自定义样式css和js引入
   if (isBrowser) {
@@ -93,6 +94,10 @@ const ExternalPlugin = (props) => {
       loadExternalResource('/css/img-shadow.css', 'css')
     }
 
+    if (ANIMATE_CSS_URL) {
+      loadExternalResource(ANIMATE_CSS_URL, 'css')
+    }
+
     // 导入外部自定义脚本
     if (CUSTOM_EXTERNAL_JS && CUSTOM_EXTERNAL_JS.length > 0) {
       for (const url of CUSTOM_EXTERNAL_JS) {