elasticsearch 如何将所有Kibana徽标更改为其他徽标？

hrysbysz 于 2022-11-22 发布在 ElasticSearch

关注(0)|答案(2)|浏览(208)

如何将所有Kibana徽标更改为其他徽标？
我尝试了下面的链接方法和其他方法，但他们没有工作。
https://discuss.elastic.co/t/replace-the-kibana-logo/27547

我的目标

I circled what I was trying to change in Kibana.
第一次
@Miokael Amidi更新帖子（正在加载徽标和文本）

const logo = _react.default.createElement("svg", {…

找不到代码。

Result:
const logo = _react.default.createElement("img", {src:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqkAAAK … 5CYII=',width:'100px'});

我也不知道怎么写代码。

〉我可以按原样复制粘贴吗？

**另外，我看不到它。（导航栏徽标）**x1c4d 1x找到字符串并替换为自己的base64或SVG图像“EuiHeaderLogo”]，{“data-test-subj”：“徽标”，iconType：“logoElastic”

Result:
EuiHeaderLogo"],{"data-test-subj":"logo”, iconType:"data:image/png;base64,iVBORw0
… SUVORK5CYII="

〉请帮帮我。

elasticsearch

来源：https://stackoverflow.com/questions/67831737/how-can-i-change-all-the-kibana-logos-to-other-logos

2条答案

按热度按时间

mwkjh3gx1#

这非常简单，只需按照您需要的每个案例的步骤操作即可

网站图标

Go to the folder where the favicons are to see the sizes of each favicon that Kibana serves.
/usr/share/kibana/src/core/server/core_app/assets/favicons/

Take your personal logo and create a version that matches the size of each of the files within the Kibana favicons folder.

Replace each file with the custom logo. Keep the original names of the files to be replaced.

“浏览器”选项卡和标题

Open file
$ sudo nano /usr/share/kibana/src/core/server/rendering/views/template.js

Look for the code line that generates the title "Elastic" and change that to your custom text
/*#__PURE__*/_react.default.createElement("title", null, "Elastic"),

Result:
/*#__PURE__*/_react.default.createElement("title", null, "Custom_Text"),

正在加载徽标和文本

Open file
$ sudo nano /usr/share/kibana/src/core/server/rendering/views/template.js

Look for code string:
const logo = _react.default.createElement("svg", {…

Replace this with a base64 or SVG version of your custom logo. I used a base64 image.

Result:
const logo = _react.default.createElement("img", {src:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqkAAAK … 5CYII=',width:'100px'});

Locate code block and replace message

}, i18n('core.ui.welcomeMessage', {
defaultMessage: 'Loading Elastic'

Result:
}, i18n('core.ui.welcomeMessage', {
defaultMessage: 'Loading custom_text'

登录徽标和文本

Open file
$ sudo nano /usr/share/kibana/x-pack/plugins/security/target/public/4.plugin.js

Search for the welcome text and replace it with your own
{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"Welcome to Elastic"}

Result:
{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"Welcome to custom_text"}

Search for the Login logo image and replace it with your own
className:"loginWelcome__logo"}, … {type:"logoElastic",size:"xxl"}

导航栏徽标

Open file
$ sudo nano /usr/share/kibana/src/core/target/public/core.entry.js

Locate string and replace with own base64 or SVG image
"EuiHeaderLogo"],{"data-test-subj":"logo”,iconType:"logoElastic"

Result:
EuiHeaderLogo"],{"data-test-subj":"logo”, iconType:"data:image/png;base64,iVBORw0
… SUVORK5CYII="

Save changes to JavaScript file and generate the compressed files. Then restart Kibana.
$ npx gzip-cli /usr/share/kibana/src/core/target/public/core.entry.js -e=gz -e=br

$ sudo systemctl restart kibana

赞(0）回复(0）举报 2022-11-22

irlmq6kh2#

如果你想在不修改源代码的情况下自定义Kibana，你可以使用custom-kibana-theme plugin（免责声明，由我开发）。
它在最新的7.17版本以及8.x上进行了兼容性测试，以自定义Kibana的徽标、字体、颜色等。
例如，下面是修改后的登录页面：