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

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><!--[if lt IE 9]><html class="no-js oldie" lang="en"><![endif]--><!--[if gt IE 8]><!--><html lang="en" class="no-js"><!--<![endif]--><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)),
点赞
  1. 企业咨询说道:
    Firefox Windows 7

    厉害,大佬

  2. jackju说道:
    Google Chrome Windows 7

    正在找这方面的资料,地址已经实效了。能发一份给我吗?先谢过了
    juzhimin21@163.com

  3. 笨猫说道:
    Google Chrome Windows 10

    目录列表程序有很多,这款其实好看但是设置费劲。

发表评论

电子邮件地址不会被公开。必填项已用 * 标注