IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> PHP知识库 -> 修改Zabbix界面标志性logo,并以iframe内嵌入自己的前端项目 -> 正文阅读

[PHP知识库]修改Zabbix界面标志性logo,并以iframe内嵌入自己的前端项目

项目场景:

开发一个运维系统,需要内嵌zabbix,但是zabbix的logo太过于显眼,难于交付

问题描述:

起初想到要修改zabbix界面,那就得修改zabbix的源码咯,所以起初就往以源码的方式安装zabbix,但是本人没有php基础,并且在内网安装相应的环境,非常的麻烦,后来就想着在自己的互联网笔记本使用docker先安装好,直接搬镜像到内网就可了,最后折腾折腾着,原来直接改docker容器也可以实现的,不过修改后记得保存为新的镜像再重启,要不然容器被删除之后,里面的修改内容也就没有了。下面记录修改方法。

解决方案:

修改内容以及文件总览

修改内容文件所在路径
修改对应登录页面和登录后页面左上角的Logoicon-sprite.svg/usr/share/zabbix/assets/img/
浏览器页面title小图标favicon.ico/usr/share/zabbix/
修改登录后页面右上角显示的文字zabbix.conf.php/etc/zabbix/web/
修改页脚信息CBrandHelper.php/usr/share/zabbix/include/classes/helpers/
调整登录后页面右上角的链接地址layout.htmlpage.menu.php/usr/share/zabbix/app/views/

改后效果图
请添加图片描述

一.页面Logo修改

1.找到文件

涉及的文件:/usr/share/zabbix/assets/img/icon-sprite.svg

可以使用 find / -name icon-sprite.svg  查找到icon-sprite.svg所在的位置

2.使用Xtfp等工具把 icon-sprite.svg文件下载到本地

3.编辑Logo文件

可以使用在线SVG工具:https://c.runoob.com/more/svgeditor/进行编辑。
操作如下:
step1:浏览器访问在线SVG工具的地地址,打开icon-sprite.svg文件。

请添加图片描述

logo说明请添加图片描述

step2:导入图片。
可以是图片格式,也可以是SVG格式的文件。建议先量一个两个图标的像素大小,导入的图片也提前转换成一样的像素大小。如果尺寸不对的话,还可以自由拖拽的。
请添加图片描述
step3:删除原有的图标,移动新图标到原来的位置

上面的图片的位置x:0,y:864
下面的图片的位置x:0,y:903
在移动新图标的时候可以在右侧直接输入位置

注意:保存svg文件前,需要把墨绿色的背景图片删除,要不然更新上去之后,原来的图标会出现墨绿色背景,如下图:
请添加图片描述
step4:保存图片。
保存图片,在线工具会自动将修改后的图片下载到本地。

4、使用Xtfp等工具将Logo文件替换Zabbix`

放到/usr/share/zabbix/assets/img/路径下。
因为我是在docker上运行的所以还要重启zabbix-web服务;
如果图标不能成功更新,还可以尝试删除浏览器缓存
快捷键ctrl+shift+del

二.更换小图标

1.找到 favicon.ico文件

 /usr/share/zabbix/favicon.ico

2、确认图标文件像素大小请添加图片描述

3、生成新图标文件

在线生成图标工具:https://www.bitbug.net/。

4、上传替换原来的文件即可

三、修改登录后的页面右侧显示文字

涉及的文件:/etc/zabbix/web/zabbix.conf.php

编辑文件

[root@zabbix ~]# vi  /etc/zabbix/web/zabbix.conf.php
#找到下面内容(大约在17行):
$ZBX_SERVER_NAME = 'zabbix server';
#替换成自定义内容:
$ZBX_SERVER_NAME = '运维系统';

四、修改页脚信息

/usr/share/zabbix/include/classes/helpers/CBrandHelper.php

编辑文件

#vi /usr/share/zabbix/include/classes/helpers/CBrandHelper.php
# 找到如下内容(大约110行): 
[
    $with_version ? 'Zabbix '.ZABBIX_VERSION.'. ' : null,
    '© '.ZABBIX_COPYRIGHT_FROM.'–'.ZABBIX_COPYRIGHT_TO.', ',
    (new CLink('Zabbix SIA', 'https://www.zabbix.com/'))
            ->addClass(ZBX_STYLE_GREY)
            ->addClass(ZBX_STYLE_LINK_ALT)
            ->setAttribute('target', '_blank')
]
# 替换成如下内容:
    [
         (new CLink('xxxx公司', '#'))
                 ->addClass(ZBX_STYLE_GREY)
                 ->addClass(ZBX_STYLE_LINK_ALT)
                 ->setAttribute('target', '_blank')
    ] 

五.删除页面右上角的链接

/usr/share/zabbix/app/views/layout.htmlpage.menu.php

编辑文件

[root@zabbix ~]# vi /usr/share/zabbix/app/views/layout.htmlpage.menu.php
# 找到大约42-64行内容,将其注释:
/*                      ->addItem(CBrandHelper::isRebranded()
                                ? null
                                : (new CListItem(
                                        (new CLink(_('Support'), $data['support_url']))
 …此处省略一部分代码…
                                ->addClass(ZBX_STYLE_TOP_NAV_HELP)
                                ->setAttribute('target', '_blank')
                                ->setTitle(_('Help'))
                        )*/

由于直接是在docker上面修改的,也没有php基础,找这个文件着实困难

六.以iframe内嵌入自己的前端项目

我的是vue项目,iframe的使用不难,百度一下即可,内嵌zabbix会存在一个安全校验的问题;

找到 Zabbix 下面的 /usr/share/zabbix/include/defines.inc.php 文件,末尾有一行
define('X_FRAME_OPTIONS', 'SAMEORIGIN');
改为
define('X_FRAME_OPTIONS', null);

感觉自己也弄了挺久的了,总结记录一下,以便以后再次查看

  PHP知识库 最新文章
Laravel 下实现 Google 2fa 验证
UUCTF WP
DASCTF10月 web
XAMPP任意命令执行提升权限漏洞(CVE-2020-
[GYCTF2020]Easyphp
iwebsec靶场 代码执行关卡通关笔记
多个线程同步执行,多个线程依次执行,多个
php 没事记录下常用方法 (TP5.1)
php之jwt
2021-09-18
上一篇文章      下一篇文章      查看所有文章
加:2022-02-22 20:20:15  更:2022-02-22 20:22:00 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 11:11:30-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码