h5ai个性化配置页眉页脚教程

什么是 h5ai


h5ai是一款功能强大 php 文件目录列表程序,由德国开发者 Lars Jung 主导开发,它提供多种文件目录列表呈现方式,支持多种主流 Web 服务器,例如 Nginx、Apache、Cherokee、Lighttpd 等,支持多国语言,可以使用本程序在线预览文本、图片、音频、视频等。

本教程适用于已配置h5ai的同学,如需了解更多,详情点击官网:https://larsjung.de/h5ai/

h5ai页眉页脚设置


h5ai作者在主配置文件_h5ai/private/conf/options.json提到,


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.html_h5ai.footer.html,同时h5ai自身支持Markdown格式页面,同样可以作为页眉页脚插入网页。

需要注意的是,不同文件名称以及不同的存放位置会呈现不同的效果

_h5ai.header.html与_h5ai.footer.html


通过配置文件可知,此种页眉页脚仅在访问此html的存储目录时才会显现


├── _h5ai
│ ├── private
│ └── public
│ └── .htaccess
├── my music
│ ├── test.mp3
│ ├── sing.mp3
│ ├── record.mp3
│ └── _h5ai.header.html
├── my video
│ ├── video.mp4
│ ├── record.mp4
└── └── _h5ai.footer.html

如上存储目录所示,仅在访问my music文件夹时,加载该目录下的_h5ai.header.html

类似地,仅在访问my video文件夹时,加载该目录下的_h5ai.footer.html

_h5ai.headers.html与_h5ai.footers.html


通过配置文件可知,此种页眉页脚在访问此html的存储目录及其子目录时显现


├── _h5ai
│ ├── private
│ └── public
│ └── .htaccess
├── my music
│ ├── test.mp3
│ ├── sing.mp3
│ └── record.mp3
├── my video
│ ├── new
│ │ ├── new.mp4
│ ├── video.mp4
│ ├── record.mp4
│ └── _h5ai.footers.html
└── _h5ai.headers.html

如上存储目录所示

在访问my music my video文件夹时,加载根目录下的_h5ai.headers.html,即在两个目录下显示出的页眉与访问根目录的页眉相同

在访问my video\new文件夹时,加载my video下的_h5ai.footers.html,即在my video\new目录下显示出的页眉与访问my video目录的页眉相同

结束语


相信通过以上的说明,你已经了解了如何个性化配置h5ai的页眉与页脚

小编在这里悄悄地给大家一个福利,一个扁平、边框灰度渐变的页眉设计代码,欢迎大家参考

(Reference:https://github.com/lrsjng/h5ai/issues/575

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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>
">

坚持原创技术分享,您的支持将鼓励我继续创作!