h5ai 中文目录及文件均为乱码的更正方法

2017-02-26 7208点热度 0人点赞 3条评论

h5ai 是老外大神专门提供的一个小程序来改进apache 默认目录索引页面，并提供包屑路径导航和树型概述功能。功能是不错，但是对中文的支持太烂了，而且网上针对这方面的资料实在太少，在国外也有文章收录了有关h5ai的BUG，就在这里有提到Accents make folders show empty or forbidden的问题。幸好，Google了h5ai charset，发现一中文博客，博主lerx提供了解决思路即相关文件（其原文），真是太感谢了，虽然经测试，中文文件名及目录已经正常显示了，但URL 仍无法解决，依然提示403错误：

“Forbidden

You don’t have permission to access XXX on this server.”

先搬运原文作为记录，感谢lerx博主的分享：

网上搜索H5ai资料，竟然没有。只有自己研究了。配置文件发现不到异常，也没有配置的选项。

在右键查看网页源码的时候，发现了一个有趣的东西。
<!DOCTYPE html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>index 路 styled with h5ai 0.22.1 (http://larsjung.de/h5ai/)</title><meta name="description" content="index styled with h5ai 0.22.1 (http://larsjung.de/h5ai/)"><meta name="viewport" content="width=device-width"><link rel="shortcut icon" href="/_h5ai/client/images/app-16x16.ico"><link rel="apple-touch-icon" type="image/png" href="/_h5ai/client/images/app-48x48.png"><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic,700italic|Ubuntu:400,700,400italic,700italic"><link rel="stylesheet" href="/_h5ai/client/css/styles.css"><script src="/_h5ai/client/js/scripts.js" data-mode="php"></script></head><body id="h5ai-main"><div id="topbar" class="clearfix"><ul id="navbar"></ul></div><div id="content"><div id="extended" class="clearfix"></div></div><div id="bottombar" class="clearfix"><span class="left"><a id="h5ai-reference" href="http://larsjung.de/h5ai/" title="h5ai 路 a modern HTTP web server index">h5ai 0.22.1</a><span class="hideOnJs noJsMsg">鈿?JavaScript is disabled! 鈿?/span><span class="oldBrowser">鈿?Some features disabled! Works best in <a href="http://browsehappy.com">modern browsers</a>. 鈿?/span></span><span class="right"></span><span class="center"></span></div><div id="data-generic-json" class="hidden">{"entries":[{"absHref":"\/","time":1355304140000,"size":11065261,"test":null,"status":200,"content":false},{"absHref":"\/files\/","time":1355309684000,"size":9937735,"test":null,"status":"=h5ai=","content":true},{"absHref":"\/files\/film\/","time":1355319999000,"size":8192,"test":null,"status":"=h5ai=","content":false},{"absHref":"\/files\/music\/","time":1355236136000,"size":4096,"test":null,"status":"=h5ai=","content":false},{"absHref":"\/files\/%B2%E2%CA%D4\/","time":1355384869000,"size":16384,"test":null,"status":"=h5ai=","content":true},{"absHref":"\/files\/%B2%E2%CA%D4\/Lerx%B2%E2%CA%D4%CA%D3%C6%B5\/","time":1355384869000,"size":4096,"test":null,"status":"=h5ai=","content":false},{"absHref":"\/files\/%B2%E2%CA%D4\/Lerx%C8%ED%BC%FE%D7%CA%C1%CF\/","time":1355384843000,"size":4096,"test":null,"status":"=h5ai=","content":false},{"absHref":"\/files\/%B2%E2%CA%D4\/Lerx%D1%A7%CF%B0%BD%CC%B3%CC\/","time":1355384853000,"size":4096,"test":null,"status":"=h5ai=","content":false},{"absHref":"\/files\/%B3%CC%D0%F2\/","time":1355236099000,"size":4096,"test":null,"status":"=h5ai=","content":false},{"absHref":"\/files\/%D5%D5%C6%AC\/","time":1355236306000,"size":9896766,"test":null,"status":"=h5ai=","content":false},{"absHref":"\/files\/%D7%CA%C1%CF\/","time":1355236114000,"size":4096,"test":null,"status":"=h5ai=","content":false}]}
</div><div id="data-php-no-js-fallback" class="hideOnJs"><table><tr><th></th><th><span>Name</span></th><th><span>Last modified</span></th><th><span>Size</span></th></tr><tr><td><img src="/_h5ai/client/icons/16x16/folder-parent.png"/></td><td><a href="..">Parent Directory</a></td><td></td><td></td></tr><tr><td><img src="/_h5ai/client/icons/16x16/folder.png"/></td><td><a href="/files/%B2%E2%CA%D4/Lerx%B2%E2%CA%D4%CA%D3%C6%B5/">Lerx测试视频</a></td><td>2012-12-13 07:47</td><td>4 KB</td></tr><tr><td><img src="/_h5ai/client/icons/16x16/folder.png"/></td><td><a href="/files/%B2%E2%CA%D4/Lerx%C8%ED%BC%FE%D7%CA%C1%CF/">Lerx软件资料</a></td><td>2012-12-13 07:47</td><td>4 KB</td></tr><tr><td><img src="/_h5ai/client/icons/16x16/folder.png"/></td><td><a href="/files/%B2%E2%CA%D4/Lerx%D1%A7%CF%B0%BD%CC%B3%CC/">Lerx学习教程</a></td><td>2012-12-13 07:47</td><td>4 KB</td></tr></table></div></body></html>
源码中竟然没有文件名这样一个独立的属性。经过分析，原来老外是取的文件的地址和路径放入json，然后利用Javascript将文件的地址中的路径清除就变成了文件名。如：

/pic/lerx/test1.doc，老外取了两个属性，absHref=/pic/lerx/，即文件路径，还有文件地址即/pic/lerx/test1.doc，javascript处理将/pic/lerx/清除，文件名就出来了。晕，这搞法啊。这老外，水平高是很高，99%的高，1%的菜。英文及数字当然没问题，就是没想到咱中国人嘛！就是想不到咱中国人，还有其它什么韩国日本等等的家伙呢。

其实取文件并不复杂，Apache的目录浏览，中文不都出来了吗？路径是百分号编码。

现在只有改H2ai的源码了，经过分析，证实了我对老外的做法猜想的正确性。网上js解压（有些解压不成功，显示不正常），一大堆代码，懒得用心去改，想了个最简单的做法，就是让它生成文件名的时候再把它转回去不就OK了嘛？

再找个GBKURLDecode转回去就行了。修改js代码，上传，大告成功。效果图如下：

最后附上修改过的H5ai让大家共享，也许本资料是国内第一个H5ai的资料，请多多支持Lerx项目的开发。说明：关键在压缩包中的h5ai-0.22.1\_h5ai\client\js文件夹中的scripts.js，原版压缩版本附上。unic-gbk.js是网上找的，代码已复制进scripts.js，出于对原开发者的尊重，一并附上，实际使用可以删除。

lerx 提供的附件：

点此下载修改过的H5ai

将unic-gbk.js 加入ha5i

更新一下让unic-gbk.js 在_h5ai\client\js\scripts.js 中起作用的具体步骤。

将unic-gbk.js 中的所有内容复制到scripts.js 文件末尾后供调用。参照lerx 提供的样本，针对最新的h5ai 0.25.2 版本可作以下修改来修正中文文件名的显示问题（中文问题已经完美解决，已在《h5ai 中文文件名/目录“乱码”，中文URL 404错误的解决方案更新》。

面包屑部分：

找到

a.find("span").text(e.label).end(),

修改为：

a.find("span").text($URL.decode(e.label)).end(),

状态栏部分：

var i = t("<span/>").append(n.label);

修改为：

var i = t("<span/>").append($URL.decode(n.label));

树结构部分：

d.text(n.label), n.isFolder())

修改为：

d.text($URL.decode(n.label)), n.isFolder())

忘记是哪里的：

f.text(e.label),

修改为：

f.text($URL.decode(e.label)),

h5ai 中文目录及文件均为乱码的更正方法

文章评论