使用带插件的Mirador 3构建包，如何在Hugo站点不同页面配置参数？

核心问题在于你自己构建Mirador包时，可能提前硬编码了初始化配置并直接调用了Mirador.viewer()，导致页面模板里的后续初始化代码无法生效。解决思路是把Mirador的初始化控制权交还给页面模板，仅在构建包中完成插件注册和基础全局配置的封装。

下面是两种可行的方案：

方案1：封装带插件的初始化函数 #

在你的Mirador构建入口文件中，不要直接初始化Mirador，而是导出一个可以接收自定义配置的初始化函数，合并固定的插件配置和页面传入的动态配置。

步骤1：编写构建入口文件 #

// src/index.js
import Mirador from 'mirador';
import dlPlugin from 'mirador-dl-plugin';

// 固定的全局配置（插件、主题、默认行为等）
const baseConfig = {
  plugins: [dlPlugin],
  // 可添加其他全局固定配置，比如：
  // theme: 'dark',
  // language: 'zh-CN'
};

// 导出初始化函数，允许传入页面级自定义配置
export function initMirador(customConfig) {
  // 如需深层合并嵌套配置（如windows数组、工具参数），推荐用lodash.merge
  // import merge from 'lodash.merge';
  // const finalConfig = merge({}, baseConfig, customConfig);
  
  // 浅合并适用于简单配置场景
  const finalConfig = Object.assign({}, baseConfig, customConfig);
  return Mirador.viewer(finalConfig);
}

步骤2：配置打包工具（以Webpack为例） #

确保打包后将初始化函数挂载到全局window对象，方便页面模板调用：

// webpack.config.js 关键配置
module.exports = {
  output: {
    filename: 'main.js',
    // 全局变量名，用于页面调用
    library: 'MiradorWithPlugins',
    libraryTarget: 'window',
  },
  // ...其他打包配置（如babel、资源处理等）
};

步骤3：在Hugo模板中调用 #

现在可以像之前用unpkg时一样，用Hugo模板语法动态传入配置：

<div id="mirador"></div>
<script src="/dist/main.js"></script>

<script>
  MiradorWithPlugins.initMirador({
    id: "mirador",
    windows: [
      {
        manifestId: '/manifests/{{ .Params.internalCatalogueID }}.json'
      }
    ],
    // 可添加当前页面特有的配置
    // workspace: { type: "mosaic" }
  });
</script>

方案2：保留全局Mirador变量，仅注册插件 #

如果不想封装初始化函数，可以调整构建逻辑，只在构建包中注册插件，把Mirador实例挂载到全局，页面模板直接调用原生的Mirador.viewer()。

步骤1：编写构建入口文件 #

// src/index.js
import Mirador from 'mirador';
import dlPlugin from 'mirador-dl-plugin';

// 注册插件到Mirador
Mirador.use(dlPlugin);

// 将Mirador挂载到全局window对象
window.Mirador = Mirador;

步骤2：在Hugo模板中使用 #

这种方式和你之前用unpkg的写法几乎完全一致，只是加载的是自己打包的文件：

<div id="mirador"></div>
<script src="/dist/main.js"></script>

<script>
  const mirador = Mirador.viewer({
    id: "mirador",
    windows: [
      {
        manifestId: '/manifests/{{ .Params.internalCatalogueID }}.json'
      }
    ],
    // 这里可以自由添加任何页面级配置
  });
</script>

关键注意事项 #

• 不要在构建包中提前调用Mirador.viewer()，否则会提前初始化实例，页面模板的代码无法覆盖。
• 如果需要合并深层嵌套的配置，建议使用lodash.merge代替Object.assign，避免浅合并导致的配置丢失。

内容的提问来源于stack exchange，提问作者Ulrik Lyngs