Mirador 3:在使用内置插件时设置不同的配置选项
Mirador 3:在使用内置插件时设置不同的配置选项
提问于 2022-10-15 04:44:40
我在使用Mirador 3的背景下，与雨果建立的静态网站。
当我从unpkg URL嵌入Mirador时，我可以很容易地在不同的页面上设置不同的选项(这里使用Hugo模板语法来设置清单)：
<script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>
<div id="mirador"></div>
<script>
const mirador = Mirador.viewer({
id: "mirador",
windows: [
{
manifestId: '/manifests/{{ .Params.internalCatalogueID }}.json'
}
]
});
</script>但是，我需要使用一些插件，包括下载插件。
当我创建一个带有插件的Mirador构建时，我没有明显的方法在不同的页面上设置不同的配置选项。无论在创建生成时设置了什么，配置选项都会被困住。
也就是说，像这样的事情行不通：
<div id="demo"></div>
<script src="dist/main.js"></script>
<script>
const mirador = Mirador.viewer({
id: "demo",
windows: [
{
manifestId: '/manifests/{{ .Params.internalCatalogueID }}.json'
}
]
});
</script>-> 在使用内置插件时，在不同页面上设置Mirador配置的最佳实践是什么？
回答 2
Stack Overflow用户
发布于 2022-10-15 13:06:31
与其在构建时硬编码参数，不如将函数从包导出到设置Mirador的全局命名空间，然后您可以将自定义选项从包外部传递给它：
window.renderMirador = function (options) {
return Mirador.viewer({
// ... your default options
plugins: [ /* ... */ ],
...options
})
}然后在HTML中：
<div id="demo"></div>
<script src="dist/main.js"></script>
<script>
const mirador = renderMirador({
id: "demo",
windows: [
{
manifestId: '/manifests/{{ .Params.internalCatalogueID }}.json'
}
]
});
</script>Stack Overflow用户
发布于 2022-10-17 09:21:04
下面是一个完整的示例，使用jbaiter的解决方案使用映像工具和下载插件创建一个构建：
index.js
import Mirador from 'mirador/dist/es/src/index';
import { miradorImageToolsPlugin } from 'mirador-image-tools';
import miradorDownloadPlugins from 'mirador-dl-plugin';
window.renderMirador = function (options) {
return Mirador.viewer({
// ... your default options
...options
},
[
...miradorImageToolsPlugin,
...miradorDownloadPlugins,
])
}这是用npm run webpack构建的，它在名为dist的目录中创建了一组.js文件。我们在HTML文件中指向main.js，并将我们想要的选项传递给它：
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Mirador 3 with plug-ins, yay!</title>
</head>
<body>
<div id="mirador"></div>
<script src="dist/main.js"></script>
<script>
const mirador = renderMirador({
id: 'mirador',
windows: [{
imageToolsEnabled: true,
imageToolsOpen: true,
manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
}]
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74076747
复制相关文章
相似问题
腾讯云开发者
