H5ai文件目录列表程序(云网盘)基础界面美化介绍

背景：上一篇介绍了H5ai的搭建，基本可以快速使用上。这一篇主要说下它的基本优化设置。

如果你还不会部署，请猛戳下方学习再来这里。

H5ai文件目录列表程序(云网盘)搭建小记

LAzySheep

22年1月16日
喜欢：2
浏览：3.5k

功能配置

配置文件路径 /_h5ai/private/conf/options.json

初始化的配置在搭建的时候已经简单介绍过了，这里再丰富一些说明。

一、view功能

"view": {
        "binaryPrefix": false,
        "disableSidebar": true, //是否显示左侧边栏（功能栏）
        "fallbackMode": false,  
        "fastBrowsing": true,
        "fonts": ["Ubuntu", "Roboto", "Helvetica", "Arial", "sans-serif"],
        "fontsMono": ["Ubuntu Mono", "Monaco", "Lucida Sans Typewriter", "monospace"],
        "hidden": ["^\\.", "^_h5ai"],  //此参数可以指定文件夹列表里隐藏哪些文件，可以使用正则来匹配文件名称。
        "hideFolders": false,
        "hideIf403": true,
        "hideParentFolder": false,
        "maxIconSize": 40,
        "modes": ["details", "grid", "icons"],
        "modeToggle": false,
        "setParentFolderLabels": true,
        "sizes": [20, 40, 60, 80, 100, 140, 180, 220, 260, 300],
        "theme": "comity",  //图标选择有default和comity两种
        "unmanaged": ["index.html", "index.htm", "index.php"],  //如果某个文件夹里包含数组里的文件，则将拒绝显示此文件夹里的所有内容。
        "unmanagedInNewWindow": false
    },

hidden详细说明：
^\.：隐藏名称以 . 开头的文件，如 .htaccess,.gitignor 等等。
^_h5ai：隐藏名称以 _h5ai 开头的文件或文件夹，如 _h5ai，_h5ai.header.html 等等。
^：隐藏名称以开头的文件或文件夹，如 tmp，__aaa 等等。
\.sh$：隐藏名称以.sh结尾的文件或文件夹，如 bash.sh,scripts.sh 等等。
^robots.txt：隐藏名称以 robots.txt 开头的文件或文件夹，如 robots.txt， robots.txt.bak 等等。
hideFolders：是否在文件列表中只显示文件而隐藏文件夹。
theme：默认的文件类型图标，_h5ai/public/images/theme 里的每个文件夹都是一种图标，默认带了 2 套，另一套图标名为 comity。

二、文件信息功能

   "info": {
        "enabled": false,  //是否显示右侧边栏（详情栏）。
        "show": false,  //是否一直显示右侧边栏。
        "qrcode": true,  //是否在右侧边栏生成下载链接的二维码以方便移动端下载。
        "qrFill": "#999",
        "qrBack": "#fff"
    },

三、文件下载和选择功能

 "download": {
        "enabled": false,  //是否允许下载文件
        "type": "php-tar",  //选择压缩方式。php-tar使用php内置功能来下载文件，多线程，可以同时下载多个文件。shell-tar使用外部tar程序来下载文件，单线程，同一时间只能下载一个文件。shell-zip使用外部zip程序来下载文件，单线程，同一时间只能下载一个文件。
        "packageName": null,  //默认压缩包名称，为 null 时压缩包名称当前文件夹的名称,
        "alwaysVisible": false  //下载按钮是否动态显示（只能选中文件后显示）。
    },
    "select": {
        "enabled": true,  //是否允许文件选择，如果禁止文件选择，那么文件就无法下载。
        "clickndrag": true,  //是否允许左键拖动来进行文件多选。
        "checkboxes": false  //当鼠标悬浮在文件名上时是否显示选择框。
    },

四、语言设置

    "l10n": {
        "enabled": true,  //是否允许更改界面语言
        "lang": "en",  //默认界面语言，en 为英文，zh-cn 为中文简体，zh-tw 为中文繁体。
        "useBrowserLang": true  //是否根据浏览器的语言来自动调整界面语言。
    },

五、字体加速

 "resources": {
        "scripts": [],
        "styles": [
            "//fonts.lug.ustc.edu.cn/css?family=Ubuntu:300,400,700%7CUbuntu+Mono:400,700"
        ]
    },

在这里添加的第三方脚本与 CSS 会自动生成 <link> 标签插入所有页面的 <head> 中。
默认从 _h5ai/public/ext/ 里加载不以「 http://、https://、/ 」开头的脚本与 CSS 文件。

由于google国内访问很慢，解决字体加速的方式有三种：改为常用字体宋体等、用国内镜像源或者下载到本地加载。

1、用国内镜像源，以中科大为?。

中科大源	对应google字体源
fonts.lug.ustc.edu.cn	fonts.googleapis.com
ajax.lug.ustc.edu.cn	ajax.googleapis.com
google-themes.lug.ustc.edu.cn	themes.googleusercontent.com
fonts-gstatic.lug.ustc.edu.cn	fonts.gstatic.com

修改fonts.googleapis.com为fonts.lug.ustc.edu.cn即可

 "resources": {
        "scripts": [],
        "styles": [
            "//fonts.lug.ustc.edu.cn/css?family=Ubuntu:300,400,700%7CUbuntu+Mono:400,700"
        ]
    },

2、将google字体下载到本地加载

1）在 _h5ai/public/ext/ 目录下新建shell脚本`fonts.sh`

#!/bin/bash

ext_dir="/www/wwwroot/域名根目录/_h5ai/public/ext"

# 将谷歌字体的 css 下载到 _h5ai/public/ext 下
curl -sL -H "User-Agent:Mozilla/5.0 (X11; Linux x86_64; rv:69.1) Gecko/20100101 Firefox/69.1" \
         -o "$ext_dir/fonts.google.css" \
         "https://fonts.lug.ustc.edu.cn/css?family=Ubuntu:300,400,700%7CUbuntu+Mono:400,700"

# 将 css 文件里的所需的字体下载至 _h5ai/public/ext/fonts 下
# 并将 css 文件里字体的路径更改为 _h5ai/public/ext/fonts
mkdir -p "$ext_dir/fonts"
if [ -d "$ext_dir/fonts" ]; then
    cd "$ext_dir/fonts"
    wget $(grep "https" "$ext_dir/fonts.google.css" | awk -F '[()]' '{print $6}')
    sed -i 's|https://.*/|/_h5ai/public/ext/fonts/|' "$ext_dir/fonts.google.css"
fi

2）赋予`fonts.sh`文件可执行权限，并运行。运行之后，google字体被下载到fonts.sh脚本所在的目录下。

$ pwd
/www/wwwroot/域名根目录/_h5ai/public/ext
$ chmod +x  fonts.sh
$ ./fonts.sh
$ ls -ltr 
total 24
-rw-r--r-- 1 root root  170 Mar 22  2019 README.md
-rwxr-xr-x 1 root root  777 Aug 17 10:34 fonts.sh
drwxr-xr-x 2 root root 4096 Aug 17 10:35 fonts
-rw-r--r-- 1 root root 9595 Aug 17 10:35 fonts.google.css

3）修改配置文件 `options.json` 将谷歌字体换成本地字体

"resources": {
        "scripts": [],
        "styles": [
            "fonts.google.css"
        ]
    },

六、页眉和页脚

/*
  Allow customized header and footer files.
  First checks for files "_h5ai.header.html" and "_h5ai.footer.html" in the current directory.
  If not successful it checks all parent directories (starting in the current directory) for
  files "_h5ai.headers.html" and "_h5ai.footers.html".
  Note the different filenames: "header" (only current) - "headers" (current and sub directories)!
  The file's content will be placed inside a <div/> tag above/below the main content.
  If a file's extension is ".md" instead of ".html" its content will be interpreted as markdown.
*/
"custom": {
"enabled": true
},

根据注释说明，为 h5ai 添加页眉和页脚，只需要在对应目录下放置好 _h5ai.header(s).html（页眉）或 _h5ai.footer(s).html（页脚）即可，设置将应用于该目录或该目录的所有子目录。

同时H5ai支持Markdown格式页面，可以放置 _h5ai.header(s).md 和 _h5ai.footer(s).md 。

不同文件名称以及不同的存放位置会呈现不同的效果。

只在当前目录显示
- 页眉：_h5ai.header.html
- 页脚：_h5ai.footer.html
在当前及子目录显示
- 页眉：_h5ai.headers.html
- 页脚：_h5ai.footers.html

1、页眉

在文件夹下新建 _h5ai.header.html，下面是我的示例。

<h1 style="text-align:center">科技玩家Cloud</h1>
<p style="text-align:center">
傻妞插件
</p>

2、页脚

在文件夹下新建 _h5ai.footer.html，下面是我的示例。

<p style="text-align:center">
本站所发布的一切破解补丁、注册机和注册信息及软件的文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
</p>
<p style="text-align:center">
<strong>Note</strong>: 本站信息来自网络，版权争议与本站无关，您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。访问和下载本站内容，说明您已同意上述条款。
</p>

3、功能演示

1）不加s的演示

2）加s的演示

这里再放一个发现的页眉样式代码供参考

<iframe frameborder="0" scrolling="no" style="width: 100%" srcdoc="

<!DOCTYPE html>
<html>
<head>
    <!--Import CSS library .CSS file-->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css'>
</head>

<body>
    <!--Demo Content-->
    <div class='row'>
        <div class='col s12'>
            <div class='card'>
                <div class='card-content'>
                    <div class='card-title' style='text-align: center;'>
                        Demo
                    </div>
                    <p>This is a demo.</p>
                </div>
            </div>
        </div>
    </div>

    <!--Import CSS library JavaScript files-->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js'></script>

    <!--Initialise CSS library-->‎
    <script type='text/javascript'>
        M.AutoInit();
    </script>

    <!--Import Iframe resizer library-->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.0/iframeResizer.contentWindow.min.js'></script>

</body>
</html>
">

七、修改网站标题

1、先修改配置文件`options.json`中的title部分内容为`false`

/*
 Replace window title with current breadcrumb.
*/
"title": {
    "enabled": false //默认是true，改为false
},

2、修改 `_h5ai/private/php/pages/index.php` 文件

<title>index - powered by h5ai v0.29.2 (https://larsjung.de/h5ai/)</title>

先找到上面?找到这部分内容，再替换title中间部分内容，例如<title>科技玩家</title>，修改后浏览器标签页就变了。

八、修改首页默认的域名显示

修改 _h5ai/public/js/scripts.js 文件，Ctrl+F搜索?下面内容

"/"===t?p.getDomain():n.name //修改替换 p.getDomain() 为'你想显示的内容'
"/"===t?'你想显示的内容':n.name //示例"/"===t?'科技玩家':n.name

九、修改右上角版权信息

建议保留这部分版权信息，只是作为学习参考资料。

修改 _h5ai/public/js/scripts.js 文件，Ctrl+F搜索?下面内容进行修改

<a id="backlink" href="https://larsjung.de/h5ai/" title="powered by h5ai - https://larsjung.de/h5ai/">\n                <div>powered</div>\n                <div>by h5ai</div>\n            </a>\n

示例修改如下：

<a id="backlink" href="https://www.kejiwanjia.net/" title="kejiwanjia - https://www.kejiwanjia.net/">\n                <div>科技玩家</div>\n                <div>Cloud</div>\n            </a>\n

参考资料：

后话：这个小程序应该学习的差不多了，感兴趣的朋友也可以自己搭建玩玩。
后面我会慢慢去丰富这个下载站的资源。

-> 加入科技玩家交流群组：点击加入注意:
1.文中二维码和链接可能带有邀请性质，请各位玩家自行抉择。
2.请勿通过链接填写qq号与密码、银行卡号与密码等个人隐私信息。
3.禁止纯拉人头，拉app注册等信息，发现必小黑屋。
4.同一种信息仅发一次，多发会被删除。
5.文章中源码或APP等，无法保证其绝对安全，需自行辨别。
6.文章关联方不想展示也可以微信站长“socutesheep”删除。

本文由 @LAzySheep 发布。如若转载，请注明出处：科技玩家 » H5ai文件目录列表程序(云网盘)基础界面美化介绍

47 条回复 A文章作者 M管理员

贴心提醒

请认真对待作者付出，勿发表无意义言论，触发过滤规则的评论将无法提交，包含敏感词的评论会自动变成待审核状态哦。

更换删除

84896150 高级玩家lv3

23年1月10日

这个好给赞
幻念 中级玩家lv2

23年1月13日

谢谢大佬分享，谢谢！
七年 高级玩家lv3

23年2月4日

感谢分享，插眼学习
七年 高级玩家lv3

23年3月14日

辛苦大佬分享了，我先学习一下
萝卜头摸鱼工程师 超级金主高级玩家lv3

23年3月24日

谢谢，分享学习了
七年 高级玩家lv3

23年7月17日

辛苦了，学习一下
84896150 高级玩家lv3

23年7月18日

真棒，感谢分享！

{{userData.name}}已认证

H5ai文件目录列表程序(云网盘)基础界面美化介绍

H5ai文件目录列表程序(云网盘)搭建小记

功能配置

一、view功能

二、文件信息功能

三、文件下载和选择功能

四、语言设置

五、字体加速

1、用国内镜像源，以中科大为?。

2、将google字体下载到本地加载

1）在 _h5ai/public/ext/ 目录下新建shell脚本`fonts.sh`

2）赋予`fonts.sh`文件可执行权限，并运行。运行之后，google字体被下载到fonts.sh脚本所在的目录下。

3）修改配置文件 `options.json` 将谷歌字体换成本地字体

六、页眉和页脚

1、页眉

2、页脚

3、功能演示

1）不加s的演示

2）加s的演示

七、修改网站标题

1、先修改配置文件`options.json`中的title部分内容为`false`

2、修改 `_h5ai/private/php/pages/index.php` 文件

八、修改首页默认的域名显示

九、修改右上角版权信息

H5ai文件目录列表程序(云网盘)搭建小记

多账户管理神器 - 越狱插件 Crane

i茅台预约挂机

幻兽帕鲁自建多人游戏专属服务器喂饭教程

奥特曼

WeChatMsg使用问题（持续更新...）

新手小白外贸/跨境电商(ToB)第一单记录与总结

N1盒子刷armbian（之前刷过机，可以从USB启动）

{{userData.name}}已认证

H5ai文件目录列表程序(云网盘)搭建小记

功能配置

一、view功能

二、文件信息功能

三、文件下载和选择功能

四、语言设置

五、字体加速

1、用国内镜像源，以中科大为?。

2、将google字体下载到本地加载

1）在 _h5ai/public/ext/ 目录下新建shell脚本fonts.sh

2）赋予fonts.sh文件可执行权限，并运行。运行之后，google字体被下载到fonts.sh脚本所在的目录下。

3）修改配置文件 options.json 将谷歌字体换成本地字体

六、页眉和页脚

1、页眉

2、页脚

3、功能演示

1）不加s的演示

2）加s的演示

七、修改网站标题

1、先修改配置文件options.json中的title部分内容为false

2、修改 _h5ai/private/php/pages/index.php 文件

八、修改首页默认的域名显示

九、修改右上角版权信息

H5ai文件目录列表程序(云网盘)搭建小记

多账户管理神器 - 越狱插件 Crane

1）在 _h5ai/public/ext/ 目录下新建shell脚本`fonts.sh`

2）赋予`fonts.sh`文件可执行权限，并运行。运行之后，google字体被下载到fonts.sh脚本所在的目录下。

3）修改配置文件 `options.json` 将谷歌字体换成本地字体

1、先修改配置文件`options.json`中的title部分内容为`false`

2、修改 `_h5ai/private/php/pages/index.php` 文件