Apaxy 美化静态资源导航页面

环境

• 系统：Ubuntu 20.04 TLS
• 服务：Apache
• 框架：XAMPP

安装

进入 Apaxy 仓库发行页面，Releases · oupala/apaxy · GitHub，下载最新版压缩包，解压后进入目录，将里面同名的 apaxy 目录下的 .htaccess 和 theme 目录拷贝到你的静态资源根目录下即可

配置

需要替换 .htaccess、header.html 和 footer.html 文件下的目录名字，将 {FOLDERNAME} 替换成你当前静态资源所在目录，比如我的静态资源 url 路径为 https://www.domain.com/static，使用的是 XAMPP 框架，资源路径是在 /opt/lampp/htdocs/static，那么将 {FOLDERNAME} 替换为 /static

完成

此时再次访问你的静态资源导航页面即可看到效果

优化

路径混淆

有时资源的 url 路径做了比较深的隐藏以让普通用户无法猜测到，比如为 https://www.domain.com/apps/static，资源路径则在 /opt/lampp/htdocs/apps/static 下，那么 .htaccess 和 theme 目录则放在根目录 /opt/lampp/htdocs/apps 下，并修改 {FOLDERNAME} 为 /apps

此时的静态资源导航页面也会把每一层目录都显示出来，home 的 url 路径是 https://www.domain.com/apps，不完美，因为 apps 这个目录只是为了做混淆、隐藏目的，并不存放资源，所以 home 目录应该是对应 https://www.domain.com/apps/static 这个 url，修改 theme 目录下的 apaxy.js

$ cd /opt/lampp/htdocs/apps
$ vi theme/apaxy.js

修改路径以让主题识别

// generate a breadcrumb
var uri = window.location.pathname.substr(13);
var arr = uri.split('/');
var url = "/apps/static"
var bread = '<li><strong><a href="/apps/static">Home</a></strong></li>';
var cont = 1;
arr.forEach(function(value){
        url = url + '/' + value;
        if(value != ''){
            if(arr.length == cont+1)
                bread += "<li class='active'>"+decodeURI(value)+"</li>";
            else
                bread += "<li><a href='"+url+"'>"+decodeURI(value)+"</a></li>";
        }
        cont++;
});
document.getElementById("breadcrumb").innerHTML = bread;
uri = window.location.pathname.substr(1);
if (uri.substring(uri.length-1) == '/'){
        var indexes = document.getElementsByClassName('indexcolname'),
        i = indexes.length;
        while (i--){
            var a = indexes[i].getElementsByTagName('a')[0];
            a.innerText = a.innerText.split("/")[0];
            a.href =  a.getAttribute('href',2);
        }
}

lightgallery 打开图片

如果你的静态资源导航主要放图片，那么可以让图片打开在当前页面的 lightgallery（即 lightbox 效果），而不是独立页面打开图片

重命名 header-lightgallery.html 和 footer-lightgallery.html 为 header.html 和 footer.html 并覆盖

$ cd /opt/lamepp/htdosc/apps/theme
$ mv header.html header.html.bak
$ mv footer.html footer.html.bak
$ cp header-lightgallery.html header.html
$ cp footer-lightgallery.html footer.html

然后修改 footer.html 里的 {FOLDERNAME} 为 /apps，保存完成后刷新页面点击图片即可看到效果

隐藏 home 下 Parent Directory

在 home 路径下，下方文件列表依然显示 Parent Directory，所以可以在 apaxy.js 最后添加代码以让它在 home 目录下隐藏

// auto hide Parent Directory row in Home page
cur_uri = window.location.pathname.substr(1);
if(cur_uri == "apps/static/") {
        var a = document.getElementsByClassName("even")[0].style.display="none";
}

添加描述

header.html 里的 {HEADER-MESSAGE}，以及 footer.html 里的 {FOOTER-MESSAGE}，都可以删除并添加自定义的 html 代码或文字描述