Docusaurus集成DropInBlog渲染问题求助

核心思路 #

Docusaurus是单页应用（SPA），路由切换时不会刷新整个页面，所以必须适配SPA的生命周期来处理脚本加载和DOM渲染的时机：要么确保脚本只加载一次，要么在组件挂载时手动触发博客渲染逻辑。

方案一：全局脚本+组件挂载时手动初始化 #

1. 保留全局脚本配置：继续在docusaurus.config.js中配置全局脚本，确保脚本只加载一次：

   // docusaurus.config.js
   module.exports = {
     // ...其他配置项
     scripts: [
       {
         src: "https://io.dropinblog.com/embedjs/xyz.js",
         async: true,
         defer: true
       }
     ]
   };
   

2. 在博客页面组件添加挂载逻辑：利用React的useEffect钩子，每次组件挂载（包括路由切换返回）时，调用DropInBlog的初始化方法。DropInBlog脚本加载后会暴露全局对象，可通过它触发渲染：

   // src/pages/blog.js
   import React, { useEffect } from 'react';
   
   const BlogPage = () => {
     useEffect(() => {
       // 检查全局对象是否存在，避免报错
       if (window.DropInBlog) {
         // 手动触发博客渲染
         window.DropInBlog.loadPosts();
         // 如果loadPosts不生效，可尝试重新初始化容器
         const dibContainer = document.getElementById('dib-posts');
         if (dibContainer) {
           dibContainer.innerHTML = '';
           window.DropInBlog.init({ container: '#dib-posts' });
         }
       }
     }, []); // 空依赖确保组件挂载时执行一次
   
     return (
       <div>
         <h1>我的博客</h1>
         <div id="dib-posts"></div>
       </div>
     );
   };
   
   export default BlogPage;
   

方案二：组件内动态加载脚本（避免重复加载） #

如果不想全局加载脚本，可以在组件内动态注入脚本，同时判断脚本是否已加载：

// src/pages/blog.js
import React, { useEffect } from 'react';

const BlogPage = () => {
  useEffect(() => {
    // 检查脚本是否已存在于DOM中
    const existingScript = document.querySelector('script[src="https://io.dropinblog.com/embedjs/xyz.js"]');
    
    if (!existingScript) {
      const script = document.createElement('script');
      script.src = 'https://io.dropinblog.com/embedjs/xyz.js';
      script.async = true;
      script.onload = () => {
        // 脚本加载完成后初始化博客
        if (window.DropInBlog) {
          window.DropInBlog.loadPosts();
        }
      };
      document.body.appendChild(script);
    } else {
      // 脚本已加载，直接触发渲染
      if (window.DropInBlog) {
        window.DropInBlog.loadPosts();
      }
    }
  }, []);

  return (
    <div>
      <h1>我的博客</h1>
      <div id="dib-posts"></div>
    </div>
  );
};

export default BlogPage;

关键注意点 #

• 确认DropInBlog的全局方法：不同版本的嵌入脚本暴露的方法可能不同，可通过浏览器控制台打印window.DropInBlog查看可用方法。
• 确保DOM元素存在：useEffect的空依赖会在组件挂载后执行，此时#dib-posts元素已渲染，可安全调用初始化方法。
• 避免重复加载：通过检查脚本DOM节点或全局对象，防止重复加载脚本导致的标识符冲突错误。

内容的提问来源于stack exchange，提问作者Mark Comerford