论坛中有不少帖子是关于MetroUI风格导航页面的，看来是有一些人喜欢用它。我前两天也给我的WD西部数据MyBookLive系统中安装了一个。那么下面来讲讲我的一些经验，和这个MetroUI中的一些问题与大家一起来推敲一下。并且把我的改写的更新版本分享给大家，更新版本和安装方法在本文后面免费提供给大家。来回报论坛为我们提供的交换信息空间。

我是通过MBL的SSH功能, 使用putty安装的。步骤如下：

1.打开MBL的SSH功能，浏览器进入http://你的MBL IP /UI/ssh，访问SSH开关页面，选择启用，用户名root，密码welc0me，其中密码中0是数字0，不是字母O

2.PuTTY登录MBL

需要使用putty软件，这个是很小的远程登录软件，类似于cmd命令行一样，可以远程进入MBL进行命令操作，把MBL的内网IP地址填入Host Name里，其他默认，点击open登录

输入用户名密码，用户名root，密码welc0me，其中密码中0是数字0，不是字母O

登录成功

我安装的MetroUI来自执行以下命令:

wget -O -http://jiaoting.baotuba.com/MetroMBL/withPercent.sh |sh

安装完成登录后的界面是这个样子的。账户名和密码都是：admin

之后还要安装aria2和yaaw整个MetroUI的功能才能工作正常。

我的安装包来自如下地址:

wget -O - http://jiaoting.baotuba.com/aria2/aria2online.sh |sh

wget -O - http://jiaoting.baotuba.com/aria2/webui.sh |sh

wget -O - http://jiaoting.baotuba.com/aria2/yaaw.sh |sh

这些都是开源的软件包。但有一些写得比较粗糙。具体怎样使用MetroUI可以在论坛中查查新手教程。如果要让这些开源的软件包用起来更加顺手，流畅。恐怕还是要对下载程序做点改造。这就是为什么我今天要推敲MyBookLive人性化MetroUI的若干问题, 这次我主要想探讨一下如何把MetroUI导航页面与绑定的芒果云KodExplorer 系统有机地将两者结合在一起的问题，同时也要修正一些MetroUI代码中的不足之处。

第一个问题：安装以后，我看了一下MetroUI的代码，发现它的结构并不规范，不知道是谁开发的? 也或许是我拿到的版本不规范。这样的代码对于安装和管理都很不便。它是直接安装在/var/www/中的，其中部分文件在www根目录中，另外还有两个目录（assets， include）中有一些相关文件。但不管怎么样我还是成功安装了MetroUI界面，为了让这个软件包变得更好用，解决的办法只能是规范一下代码了。作为一个老码农，这也不难，没有什么技术含量。都是一些鸡零狗碎的活。但总得有人为此贡献啊！我就做一回志愿者吧。规范后，我把所有的相关代码全部归类到了assets目录中。为方便以后的系统整合好了准备。这样做的好处是，可以把MetroUI的代码安装在/dev/sda4的ext4分区中。这是MyBookLive系统中用来存数据的分区。它有非常大的空间，它的挂节点是/DataVolume。看下图：

现在我们可以将assets目录中放到任意一个地方，只要创建一个私有目录把它拷贝进去，再在系统的/var/www/目录中做一个符号连接即可。具体的命令是:

ln -s /DataVolum/shares/Public/你创建的私有目录名/assets  /var/www/assets

这样将大大改进了MetroUI的代码结构。也方便今后的系统整合。

第二个问题：芒果云KodExplorer系统的安装点也是直接安装在/var/www/中，这可就有点问题了。正如前面图中所示，/var/www/是属于/dev/sda1或/dev/sda1根节点系统分区。这个分区中根本没有多少地方用来存放用户数据。芒果云中/kodexplorer/data/User目录是用户上下载数据的地方。很快就会耗尽系统分区。我好像有印象在论坛中有人报告说，芒果云安装后造成系统工作不正常的问题。其实，这不是芒果云系统的问题，芒果云系统的代码结构很好。原因是shell script安装程序有问题，不知道是写这个script的人疏忽了？还是对MyBookLive系统不甚了了？ 把芒果云系统安装到了不合适的地方。我建议应当像上面第一个问题那样，把芒果云也安装到/dev/sda4的ext4分区中。我们也可以将kodexplorer目录拷贝到任意一个私有目录，再在系统的/var/www/目录中做一个符号连接。具体的命令是:

ln -s /DataVolum/shares/Public/你创建的私有目录名/kodexplorer  /var/www/kodexplorer

第三个问题：MetroUI代码中的账户名称和密码是hardcode方式的。只有一个，也不能更改，这不是一个好的设计。还有，如果输入错误的密码，屏幕就空了。我认为这也是一个bug，输错误密码应该提示错误，返回输入界面才对啊。为此我对代码做了小小修正，在login.php中增加了输入账户名称和密码不正确时的处理程序。

第四个问题：硬盘温度监控插件那段php程序显然是从论坛中某个地方生搬硬套地塞进index.php中的。其实那只是一个原型概念介绍。问题是塞的地方不对，只能在每次登陆或启动界面时调用一次，起不到实时监控的作用啊。那段程序的主体应当放在service.php中

才对，MetroUI代码中有定时刷新功能，会通过ajax调用service.php做实时数据更新。为了保持MetroUI界面现有的风格，实现这个改动需要用到一点javascript和jquery来写点代码。也不难写。三下五除二就完成了。我的代码中，每分钟刷新一次当前硬盘温度，你可以根据自己的需要进行调整。特别是使用aria2做下载迅雷离线、QQ旋风离线、百度云里的东西时，实时硬盘温度监控很有必要。

第五个问题：MetroUI界面中绑定了芒果云KodExplorer系统这个概念很好。但这两个系统是生硬地绑在了MetroUI界面中。就是一个生硬地链接式绑定，要进入芒果云还得再次登陆。芒果云是一个很好的系统，也非常适合作为MyBookLive系统的增值服务。如果能将MetroUI界面和芒果云系统有机地结合在一起，将为MetroUI界面增添不少光彩。芒果云系统有自己的用户登陆，管理功能，可以创建新用户，更改密码（密码是md5哈希单向加密方式，安全性蛮好的），等等。既然两个系统绑定在一个界面中，为何MetroUI不利用芒果云系统中的用户管理功能呢？当然，要想这么做，就要对两个系统的代码都有一定的了解。MetroUI代码非常简单，5分钟就能彻底了解。但芒果云系统就复杂多了，毕竟芒果云是个开源产品包，它的开发团队为此付出了辛勤的劳动。吃水不忘挖井人，让我们在这里向芒果云的开发团队致谢。我仔细读了一下芒果云的代码，认为MetroUI界面完全可以与芒果云有机地结合在一起。我的想法是，修正MetroUI代码，增加一些代码，检查芒果云系统是否与MetroUI系统同时存在？如果是，则优先利用芒果云用户和密码库做登录验证。否则按没有安装芒果云，用旧办法处理。这其实是留下一个小小的后门，用旧方法登录的后门。其实也没有必要留这个后门，这段后门代码可以删去。我在代码中标示了提醒，请大家来自行抉择。

改造后MetroUI的登陆界面不变，但我们可以用任何芒果云的账户和密码登陆MetroUI系统，从MetroUI系统转入芒果云系统当然也不需要再次登陆，直接按一下键就去了。在芒果云系统中也做一个“MY BOOK® LIVE™”键，按一下就回到MetroUI系统。两者有机地结合在一起。

看看改造后的版本截图是这个样子的：

  

其它鸡毛蒜皮的问题：MetroUI代码太粗糙，很多地方都没有好好做出错处理，我都一一补上了。MetroUI的换背景图片太难看，不喜欢。如果你也这样想，不妨利用利用芒果云系统中的漂亮图片呦。更换图片很简单，修改assets/js/supersized-init.js文件，这个文件很小，只有30多行。一看就明白如何修改。芒果云系统的图片在/kodexplorer/static/images/wall_page中。作为一个产品，无论是开源代码还是商业代码，都应当有一个好的结构设计。这是一个良好的习惯，也反映出开发团队的素质。MetroUI代码与芒果云代码的结构对比，其差距是显而易见的。当将两个系统集成在一起时，代码太粗糙的部分会令人感到不舒服。这也是我决定贡献一点力量为大家写一个更新版本的推动力。

下面谈谈如何安装我的更新版本：

百度附件：

游客，如果您要查看本帖隐藏内容请回复

1. 解压本文的zip文件，里面有两个目录（assets， kodexplorer）和一个文件index.html。

2. 在MBL的/DataVolum挂接点中任意一个地方创建一个私有目录，可以是任何你喜欢的名字(例如：www)。或者利用MBL系统的原厂UI创建一个私有目录。

3. 将解压的两个目录（assets， kodexplorer）和index.html文件上载到你刚刚创建的目录中。

4. 确认打开MBL的SSH功能，浏览器进入http://你的MBL_IP/UI/ssh，访问SSH开关页面，选择启用，用户名root，密码welc0me，其中密码中0是数字零，不是字母O

5. 使用putty软件或类似的ssh telnet登录MBL，可以远程进入MBL进行命令操作。

6. 执行该命令cd /var/www进入到/var/www目录中。用ln命令来为目录创件两个符号连接。

7. 执行该命令 ln -s/DataVolum/shares/Public/你创建的私有目录名/assets  assets

8. 执行该命令 ln -s/DataVolum/shares/Public/你创建的私有目录名/kodexplorer  kodexplorer

9. 最后再把index.html文件拷贝到/var/www目录中，替换掉原来的index.html。替换前你可以把原来的文件改名做个备份。

10. 如果不能访问，请确认访问权限。一般来说可以简单设定为: root:www-data和755

11. 执行该命令

1. chown -R root:www-data assets

复制代码

12. 执行该命令

1. chmod -R 755 assets

复制代码

13. 执行该命令

1. chown -R root:www-data kodexplorer

复制代码

14. 执行该命令

1. chmod -R 755 kodexplorer

复制代码

大功告成，祝你好运。立刻试试吧。

版权说明：

MY BOOK® LIVE™ 是西部数据公司的注册商标

PuTTY 属于 Simon Tatham AllRights Reserved

芒果云® 属于kalcaddle.comAll Rights Reserved

aria2代码属于它的开发团队。

Yaaw代码属于它的开发团队。

MetroUI代码属于它的开发团队。

我的MetroUI更新版本是GNU General PublicLicense

作者简介：本人几个星期前才注册了论坛，是处于新生上路阶段。但凭着35年的计算机软硬件开发经验和技术专利，自认我也不是一个菜鸟。本人写过商业软件，也写过商业软件开源软件。是一个尊重知识产权，热心奉献社区论坛志愿者。都这把年纪了，30多年的老码农还能写代码？信不信由你吧。所以本人现在的笔名是：【老骥伏枥】啊。此文绝对是本人【原创】，如果你对本文的观点有不同意见，可以回帖喷我，本人不是一个固持己见老朽。

【原创】推敲MyBookLive人性化MetroUI的若干问题(3)

根据论坛的管理员要求，我对前一个MetroUI更新版本进行了修正。感谢管理员给的彩色logo，我已经将它放入了修正版。在这个版版本中我还做了如下修正：
1. 修正了与芒果云最新测试版 v20-3.33登陆管理的对接代码。现在的MetroUI更新版既可以与芒果云v20-3.23当前版对接，也可以与最新测试版 v20-3.33对接。
2. 以前任何芒果云账户都可以登陆MetroUI系统，现在只容许具有管理员权限的账户才能登陆MetroUI系统。
3. 修正了SWAP使用率信息显示的串位问题。

看看改造后的版本截图是这个样子的：




安装方法没有改变，请参见【原创】推敲MyBookLive人性化MetroUI的若干问题(2)

游客，如果您要查看本帖隐藏内容请回复

  

谢谢老前辈指导。虽然已是个过气产品。

这个产品过气吗？我还以为很多人用呢。看来我是落伍了。

老骥伏枥 这么网名好眼熟……膜拜一个 感谢优化！

f541883216 发表于 2016-12-9 03:52
这个产品过气吗？我还以为很多人用呢。看来我是落伍了。

撸主大神也~MetroUI以往确实有小小的不完善，不过都是以前的大神抽空写的，非常感谢你抽空进行优化！
看看两篇帖子是否需要合并？可以给你进行合并操作，这样便于浏览和交流

11条和13条的命令是否有误？
www-data后是否都缺失一个空格位？

11. 执行该命令chown -R root:www-data assets

13. 执行该命令chown -R root:www-data kodexplorer

受系统限制: 10000 字节 我自己合并不了。如果能和并当然好了。谢谢。

对，是都缺失一个空格位。不知为什么，我想修正，但修正不了。感谢指正。

f541883216 发表于 2016-12-10 14:15
对，是都缺失一个空格位。不知为什么，我想修正，但修正不了。感谢指正。

已经帮你修正了