当前位置:   article > 正文

openbmc-web4:更换logo_openbmc 的webui logo

openbmc 的webui logo

openbmc的web登录界面以及head等logo都是openbmc官网的logo,在实际使用时肯定是显示成公司的logo或者自己喜欢的logo,本文将介绍如何更换logo。

1 准备logo

1.1 主要图标

32x32的favicon.ico网页标签显示图标。
240x240的login-company-logo.svg用于登录界面的logo
600x600的build-logo.svg用于主页面上
160x32的logo-head.svg用于主页面的head上显示logo

logo尺寸可以自行改动,改动太大会导致显示变形或显示不清晰等,图片格式可以是svg、png等。

1.2 其他图标

openbmc详细信息页面显示的信息是从图标的modules中获取的,这个图标数量较多,具体自行查看页面然后选择替换,这里不再一一列举。

2 替换logo

logo主要图标分布在源码的public文件下favicon.ico,以及src/assets/images文件夹下的built-on-openbmc-logo.svg(登录界面)、login-company-logo.svg、logo-header.svg这四个logo。替换方式有两种,一种是替换这四个logo文件,不改变名称,logo图是自己的。第二种是保留这四个logo,在对应的文件下放这四个logo,然后修改web页面代码将名称换成自己logo的名称。

2.1替换logo

用自己对应尺寸的logo命名成favicon.ico、openbmc-logo.svg、login-company-logo.svg、logo-header.svg,替换public/favicon.ico的文件,以及src/assets/images下对应的文件,然后执行“npm run serve”命令,等待完成后访问web登录界面。

login
概览

这里尺寸可以大一些,显示会清楚些,如果太小显示将会模糊。
我这里的svg都是自己使用在线网站生成的,实际可以让美工妹子制作漂亮的logo。
修改测试完成后可以使用git diff > changelogo.patch,然后在自己的layer中创建webui-vue_%.bbappend文件,并将patch添加到“SRC_URI”变量中。也可以使用git add .&&git commit -m "change webui logo" && git format-patch HEAD^命令生成格式化的patch(推荐)。
“favicon.ico” 使用git diff

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/438726
推荐阅读
相关标签
  

闽ICP备14008679号