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

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

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

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

功能配置

配置文件路径 /_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.cnfonts.googleapis.com
ajax.lug.ustc.edu.cnajax.googleapis.com
google-themes.lug.ustc.edu.cnthemes.googleusercontent.com
fonts-gstatic.lug.ustc.edu.cn fonts.gstatic.com

 修改fonts.googleapis.comfonts.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.com/" title="kejiwanjia - https://www.kejiwanjia.com/">\n                <div>科技玩家</div>\n                <div>Cloud</div>\n            </a>\n

参考资料:

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

-> 加入科技玩家交流群组:点击加入 <-
注意:
1.文中二维码和链接可能带有邀请性质,请各位玩家自行抉择。
2.请勿通过链接填写qq号与密码、银行卡号与密码等个人隐私信息。
3.禁止纯拉人头,拉app注册等信息,发现必小黑屋。
4.同一种信息仅发一次,多发会被删除。
5.文章中源码或APP等,无法保证其绝对安全,需自行辨别。
6.文章关联方不想展示也可以微信站长“socutesheep”删除。
本文由 @LAzySheep 发布。如若转载,请注明出处: 科技玩家 » H5ai文件目录列表程序(云网盘)基础界面美化介绍

给TA买糖
共{{data.count}}人
人已买糖
学习笔记精选文章

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

2022-1-16 8:44:48

教程玩家投稿精选文章

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

2022-1-16 22:17:59

34 条回复 A文章作者 M管理员
贴心提醒
请认真对待作者付出,勿发表无意义言论,触发过滤规则的评论将无法提交,包含敏感词的评论会自动变成待审核状态哦。
  1. 趴趴熊

    是个好东西,只是我自己用不到。

  2. 秒速五厘米

    很棒很棒!

  3. 兔子

    看起来相当不错,可以自己搞一个网盘耍耍了。

  4. 等待潜规则

    感谢分享。

  5. user6324

    插眼看看

  6. 菜鸟小黑

    可以可以

  7. dzb123

    看起来相当不错,可以自己搞一个网盘。

  8. の21199

    学习一下

  9. hahahahou

    看看看看

  10. 萝卜头

    谢谢分享,学习了

  11. 这把看我表演

    谢谢分享,学习了

  12. OlyBoy

    是个好东西,自由度很大

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索