简单描述下本文的功能:
部分用户在使用的时候不想显示原有的metabase字样,想动态配置成想要的内容,该功能实际为metabase所限制的,只有企业版才能授权使用,所以本文仅限于技术交流。如有侵权,立马删帖。
如果你用过metabase的企业版,会发现图一的whitelable配置菜单几乎跟企业版一样,这里基本是仿照企业版功能做的,本文主要介绍application-name配置的功能实现。
application-name配置成metabase123555后,对应的显示metabase的地方都会被metabase123555替换,如果有没被替换的地方,基本就是页面写死的,需要国际化处理或者hardcode。
图一
whitelable的开发有点复杂,偷懒的做法是手动往数据库里增加一个配置(如图二红框),然后修改对应图三图四内容的代码就可完成主要功能了。
数据库setting表中增加下面的数据
图二
图三
上图对应的文件
/metabase/frontend/src/metabase/lib/i18n-debug.js
import React from "react";
import { HAS_LOCAL_STORAGE } from "metabase/lib/dom";
import MetabaseSettings from "metabase/lib/settings";
// If enabled this monkeypatches `t` and `jt` to return blacked out
// strings/elements to assist in finding untranslated strings.
//
// Enable:
// localStorage["metabase-i18n-debug"] = true; window.location.reload()
//
// Disable:
// delete localStorage["metabase-i18n-debug"]; window.location.reload()
//
// Should be loaded before almost everything else.
// special strings that need to be handled specially
const SPECIAL_STRINGS = new Set([
// Expression editor aggregation names need to be unique for the parser
"Count",
"CumulativeCount",
"Sum",
"CumulativeSum",
"Distinct",
"StandardDeviation",
"Average",
"Min",
"Max",
]);
const obfuscateString = (original, string) => {
if (SPECIAL_STRINGS.has(original)) {
return string.toUpperCase();
} else {
// divide by 2 because Unicode `FULL BLOCK` is quite wide
if (window.localStorage["metabase-i18n-debug"]) {
return new Array(Math.ceil(string.length / 2) + 1).join("█");
} else {
return string.replace(/Metabase/g, MetabaseSettings.get("application-name") || MetabaseSettings.get("application_name"));
}
}
};
export function enableTranslatedStringReplacement() {
const c3po = require("ttag");
const _t = c3po.t;
const _jt = c3po.jt;
const _ngettext = c3po.ngettext;
c3po.t = (...args) => {
return obfuscateString(args[0][0], _t(...args));
};
c3po.ngettext = (...args) => {
return obfuscateString(args[0][0], _ngettext(...args));
};
// eslint-disable-next-line react/display-name
c3po.jt = (...args) => {
const elements = _jt(...args).map(function (item,index) {
if (item && typeof item === "string") {
return item.replace(/Metabase/g, MetabaseSettings.get("application-name") || MetabaseSettings.get("application_name"));
}
return item;
});
return <span>{elements}</span>;
// return <span style={{ backgroundColor: "currentcolor" }}>{elements}</span>;
};
}
if (HAS_LOCAL_STORAGE ) {
enableTranslatedStringReplacement();
}
图四
注意
该文实现的功能只能针对前台展示的国际化中的metabase字样进行替换,以下情况无法替换
前台写死的metabase字样
后台涉及到的metabase字样无法替换