事情是这样的,当我辛辛苦苦用 Axure 做好原型之后,生成 HTML 文件,然后打包上传到我的网站服务器,满心欢喜的去浏览的时候,Duang!404 Not Found . Exo Me? 不知道你有没有遇到过这样的情况呢?看页面提示就知道是 Axure 原型中的页面是用中文来命名的(因为页面提示信息中的 html 文件名称乱码了),然后生成的 HTML 文件自然也是中文.html 文件,恰巧你的 Web 服务器又不支持含有中文的 URL,怎么办?
可能你会说把 Axure 原型中的页面名称修改成英文不就可以了吗?But,我还希望原型的预览效果显示 Sidebar(侧边栏),而且 Sidebar 中的页面名称要显示中文,就像这样: 这样一来,我就不可以直接修改页面名称为英文,好吧,此路不通,我们另辟蹊径,办法终归是有的。当然你可能也会说,修改一下 Web 服务器的相关配置就可以了,But,我使用的阿里云的 Web 弹性托管服务,没有权限进行相关的配置,此路也不通,不然我就不会写这篇文章了。
前面卖了那么多关子,现在要进入主题了,其实针对上面这个问题,我可以换个思路。Sidebar 中的页面标题必然是通过超链接去链接到指定的 html 文件的(我们生成的 HTML 文件夹中必然有一个 .html 文件是与 Sidebar 中的页面名称对应的),所以我们可以修改一下这种关联配置,把原始的 中文.html 文件的文件名改成英文(e.html),然后再在某个文件中修改 Sidebar 中页面名称超链接的指向,指向到这个 e.html 文件,这样以来就同时解决了上面的两个问题:URL 路径是英文路径,Sidebar 中的页面名称仍然是中文。那么那个配置的地方在哪里呢?
经过我的探索和研究,终于找到了这个文件,就是它:document.js,它在你生成的 HTML 文件夹下的 data 文件夹中,我们打开这个 document.js 文件后会发现一些端倪: 在这个文件的代码中,我们可以看到一些和我们 Axure 中页面名称一致的字符,每个页面名称会对应两个相同的字符,比如我搜索“商家中心”就搜到了两处:
A=”商家中心”,B=”商家中心.html”
我们要修改的就是这个地方,第一个“商家中心”就是 Sidebar 中显示的页面名称,第二个“商家中心.html” 就是指向的我们生成的 HTML 文件夹中的那个“商家中心.html”的文件,我们把原始文件的名称改成“sjzx.html”,然后再把这个文件中的“商家中心.html”字符改成“sjzx.html”即可,这就是他们之间的关系。
修改完之后,我们再来看一下页面预览效果: URL 路径中会显示 HTML 页面的名称“sjzx”,Sidebar 中的页面名称仍然显示的“商家中心”,页面右侧正常显示“商家中心”业的内容(因为我的页面是空白的,所以显示空白),问题搞定。
说到这里,其实很多时候,我们通过对 Axure 生成的 HTML 文件稍加修改,就可以获得意外的效果,Axure 冷技能,以后慢慢和大家分享。2016年你错过我,2017年我等着你。