本教程不支持7.0
1. 效果图(ESXI6.7)
2. 下载首页index文件
2.1. ESXI开启SSH
2.2. WinSCP连接ESXI
连接后进入目录: /usr/lib/vmware/hostd/docroot/ui
把index.html下载到本地编辑：
3. 编辑index.html
推荐用Visual Studio Code编辑
模板：
注意里面的注释关键字: 2022/4/4
英语不好请自行Google翻译
<!doctype html>
<html class="no-js vui-layout-html" ng-app="esxUiApp">
<!-- Mouse careful effect 2022/4/4-->
<script src="https://cdn.jsdelivr.net/gh/Sanarous/[email protected]/js/clicklove.js"></script>
<!-- Mouse careful effect END 2022/4/4-->
<head>
<title ng-bind="$root.title"></title>
<!-- cherry blossome effect 2022/4/4 -->
<script src="https://cdn.jsdelivr.net/gh/wallleap/[email protected]/js/sakura.js"></script>
<!-- cherry blossome effect END 2022/4/4-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="description" content="">
<!-- The initial, max and min scale settings -->
<meta name="viewport" content="
width=device-width,
initial-scale=0.5001,
minimum-scale=1.0001,
maximum-scale=5.0001,
user-scalable=yes" />
<!-- The following will hide the chrome on mobile Safari and Chrome on Android
if the user has added a shortcut to their home screen. -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="bower_components/vui-bootstrap/css/vui-bootstrap.min.css" />
<link rel="stylesheet" href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" />
<link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css" />
<link rel="stylesheet" href="bower_components/codemirror/theme/mdn-like.css" />
<link rel="stylesheet" href="bower_components/nvd3/build/nv.d3.min.css" />
<link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="stylesheet" href="./thirdparty/vfeed-custom/vfeed.css" />
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- we use vendor.css to allow partner customizations, normally it is empty -->
<link rel="stylesheet" href="styles/vendor.css">
<!-- Homepage text color default:Red 2022/4/4-->
<style>
#productName {
color: red !important;
}
.loginWelcome {
font-weight: 700 !important;
font-size: 18px;
/* font-family: "楷体"; */
}
</style>
<!-- Homepage text color END 2022/4/4-->
</head>
<!-- theme wallpaper 2022/4/4-->
<!-- path：/usr/lib/vmware/hostd/docroot/ui/bg.png (2022/4/4)-->
<body ng-app="esxUiApp" class="base-app-style" style="background-image:url(https://127.0.0.1/ui/bg.png);background-size:cover;">
<!-- theme wallpaper END 2022/4/4-->
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser.
Please <a href="http://browsehappy.com/">upgrade your browser</a> to
improve your experience.
</p>
<![endif]-->
<!-- Add your site or application content here -->
<div>
<div ui-view></div>
</div>
<!-- Fixes required for electron -->
<script>
var _loc = String(window.location);
if (_loc && _loc.indexOf('file:///') >= 0) {
// requireJS has a bit of a crippled exporting mechanism for node, so we need to pull
// these objects up into global scope.
require('./bower_components/es6-promise/es6-promise.min.js');
window.$ = window.jQuery = require('./bower_components/jquery/dist/jquery.min');
require('./bower_components/jquery-ui/jquery-ui.min');
window.I18n = require('./bower_components/i18n-js/app/assets/javascripts/i18n.js')
window.vsphere = require('./thirdparty/vspherejs/index.js')
window.ipaddr = require('./bower_components/ipaddr/ipaddr.min.js');
}
</script>
<!-- end electron -->
<!-- build:js(.) scripts/oldieshim.js -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<![endif]-->
<!-- endbuild -->
<script src="bower_components/jxon/jxon.min.js"></script>
<script>
JXON.config({
valueKey: 'keyValue',
attrKey: 'keyAttributes',
attrPrefix: '',
lowerCaseTags: true,
trueIsempty: true
});
</script>
<script src="bower_components/i18n-js/app/assets/javascripts/i18n.js"></script>
<script src="bower_components/es6-shim/es6-shim.min.js"></script>
<!-- The main entry point for Angular -->
<script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
<!-- Particle effect 2022/4/4-->
<script type="text/javascript" color="0,205,205" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
<!-- Particle effect END 2022/4/4-->
</body>
</html>
以上代码包括了：自定义壁纸路径，粒子特效，鼠标点击特效，花瓣飘落特效，首页颜色修改如果理解了直接跳过下面详解
3.1 修改ESXI主页壁纸
定位index.html下列代码
根据自己情况修改“()”里面的数据
<body ng-app="esxUiApp" class="base-app-style">
修改为：
内网写法(公网打开没有壁纸显示,如地址127.0.0.1不显示壁纸尝试修改为你esxi内网连接地址)：
<body ng-app="esxUiApp" class="base-app-style" style="background-image:url(https://127.0.0.1/ui/bg.png);background-size:cover;">
公网写法:
<body ng-app="esxUiApp" class="base-app-style" style="background-image:url(https://example.com/ui/bg.png);background-size:cover;">
公网写法支持网络储存库绝对地址
3.2. 上传壁纸和修改后的index文件(注意备份)
把你想要的壁纸重命名为"bg.png"
连同修改后的index.html替换至
/usr/lib/vmware/hostd/docroot/ui目录下
3.3. 刷新页面(略)
出现壁纸文件即为成功
3.4 去除界面瑕疵
如图：
下载文件：地址提取码0000
把下载的文件覆盖替换至
/usr/lib/vmware/hostd/docroot/ui/images
替换后：
4. 配置开机自动替换脚本(必须)
由于ESXI重启后会恢复之前的修改所以需要配置开机自动替换脚本
4.1 收集上文的所有文件
上传文件至ESXI主目录
例如/vmfs/volumes/609f0e0e-8e44629c-48ff-4cedfbca2e23/
4.2 编辑ESXI启动脚本文件
WinSCP定位路径至：/etc/rc.local.d
编辑文件：local.sh
文件无法保存改权限为：0775(rwxrwxr- x)
#!/bin/sh
# local configuration options
# Note: modify at your own risk! If you do/use anything in this
# script that is not part of a stable API (relying on files to be in
# specific places, specific tools, specific output, etc) there is a
# possibility you will end up with a broken system after patching or
# upgrading. Changes are not supported unless under direction of
# VMware support.
# Note: This script will not be run when UEFI secure boot is enabled.
# 加入下面代码"609f0e0e-8e44629c-48ff-4cedfbca2e23"修改为你刚刚ESXI主目录储存文件的路径
cp -f /vmfs/volumes/609f0e0e-8e44629c-48ff-4cedfbca2e23/bg.png /usr/lib/vmware/hostd/docroot/ui/
cp -f /vmfs/volumes/609f0e0e-8e44629c-48ff-4cedfbca2e23/index.html /usr/lib/vmware/hostd/docroot/ui/
cp -f /vmfs/volumes/609f0e0e-8e44629c-48ff-4cedfbca2e23/AppBgPattern.png /usr/lib/vmware/hostd/docroot/ui/images/
# END
exit 0
4.3 测试执行启动脚本
无法启动请修改脚本权限：0775(rwxrwxr- x)
界面没变化就说明启动脚本配置成功
5. 重启ESXI测试脚本是否生效
重启如果还是ESXI的默认壁纸请重启看本文章。
第一配置成功，重启壁纸被还原了，请移步：
4. 配置开机自动替换脚本(必须)
6. 添加其他特效
FQ:
js引入位置可以自定义，或者和模板一样
6.1 小心鼠标特效
<script src="https://cdn.jsdelivr.net/gh/Sanarous/[email protected]/js/clicklove.js"></script>
6.2 花瓣飘落
<script src="https://cdn.jsdelivr.net/gh/wallleap/[email protected]/js/sakura.js"></script>
6.3 粒子聚集
<script type="text/javascript" color="0,205,205" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
6.4 首页提示信息颜色
head标签引入：
<!-- 红色 -->
<style>
#productName {
color: red !important;
}
.loginWelcome {
font-weight: 700 !important;
font-size: 18px;
/* font-family: "楷体"; */
}
</style>
7. 关于
由于文章篇幅过长期间可能会出现一些小错误还请谅解