笨猫博客

  • 🍟首页
  • 🍘目录
    • 🥝VPS教程
    • 🍾猫玩技术
    • 🍹干货分享
    • 🍏软件分享
    • 🍩一只猫
  • 🍋工具
    • 🌽IP路由追踪
    • 🍐域名Whois查询
    • 🥘域名被墙查询
    • 🍧IP正常检测
    • 🔥IP端口检测
    • 🍆短网址
    • 🐟VIP音乐播放
    • 🍯KMS激活
  • 🍓链接
  • 🍪联系
  • 🍱登录
    • 🥦登录
    • 🍒注册
关注互联网,生活,音乐,乐此不疲的一只笨猫
  1. 首页
  2. 猫玩技术
  3. 正文

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

2017-02-26 5315点热度 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><!--[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)),
标签: 暂无
最后更新:2017-02-26

笨猫

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

  • 企业咨询

    厉害,大佬

    2017-02-27
  • jackju

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

    2019-07-26
  • 笨猫

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

    2019-07-29
  • 取消回复

    最新 热点 随机
    最新 热点 随机
    ssh无需密码登陆(使用密钥对) 利用rsync进行远程同步实现异地备份 中国科幻巨制《流浪地球2》 Chrome修复被2345劫持篡改的主页 GTA6预告片内容泄露:女主在监狱里锻炼身体 《星期三》第二季将有更多亚当斯一家的内容
    ssh无需密码登陆(使用密钥对)利用rsync进行远程同步实现异地备份中国科幻巨制《流浪地球2》SuperForum:轻量的论坛程序《星期三》第二季将有更多亚当斯一家的内容GTA6预告片内容泄露:女主在监狱里锻炼身体
    “.中国”要成国际域名了,抓紧抢注! 钱包网:很好用的流水帐本 Myspace中国开放网络平台正式发布! 这周要写点什么 QQ宠物熊熊内测,限量放号领养 微软发布40余款免费Messenger官方表情
    标签聚合
    有趣 google OneDrive 域名 音乐 日记 VPS wordpress
    最近评论
    人格 发布于 2 天前(02月06日) 怎么删除不要的订阅号和节点
    人格 发布于 2 天前(02月06日) 怎么删除不要的订阅号和节点
    神秘的星空smf 发布于 2 天前(02月05日) 文章很好!赞!
    笨猫 发布于 1 周前(01月28日) q:94-0360231
    T 发布于 2 周前(01月24日) 应该是直接从原服务器下载的,这只是个接口
    好友
    • glzjin's blog glzjin's blog
    • ZAERA博客
    • 冰沫记
    • 博客导航
    • 奇它博客
    • 彩虹Smiling的Blog
    • 热闹网
    • 猫腻‘s Blog
    • 猫饭
    • 肥宅之家
    • 萌博
    • 野路子程序员

    COPYRIGHT © 2022 笨猫博客. ALL RIGHTS RESERVED.

    Theme Kratos Made By Seaton Jiang