自定义界面

HFS 3的定制与HFS 2的定制非常不同，不兼容于HFS 2。你可以做的事情更少，但这是因为旧系统在每次更新时都很容易出错。 过多的功能 = 过多的责任。

定制能力正在进行中。欢迎提出建议。

当前的能力主要基于样式规则。 您可以通过转到 Admin-panel > Custom HTML，选择一个适当的部分，比如 html body 的顶部，并添加一个 <style> 标签，其中包含任何内容来自由地添加样式。 示例：

<style>
#root { background: red }
</style>

我们目前没有关于类和ID的文档，所以请使用浏览器检查DOM来找出你需要的规则（右键单击 > 检查）。

请注意，我们使用了一些CSS变量，如 --bg --text --button-bg，这可以让您的工作更加轻松。查看 蓝色背景示例。

图片

包含图片的选项有几种：

• 使用隐藏文件夹：
  • 将图片文件放入一个文件夹中，例如 “images”
  • 在虚拟文件系统中共享它
  • 删除可见性（谁能看到：无）
  • 现在您可以在您的html/style中引用这些文件，因为它们像 /images/logo.png 一样可访问
• 在样式中嵌入小文件
• 使用表情符号

示例

设置更宽的列表

在 “top of html body” 或 “html head” 部分中添加以下文本

<style>
.list-wrapper { max-width: 100em; }
</style>

添加文本或图像到登录对话框

您可以添加任何文本（示例中的“My test”）并获得类似于这样的效果（用深色主题拍摄的截图）

只需在自定义HTML中添加文本，部分 “before login” 中。但由于它是HTML，你几乎可以得到任何东西，比如一张图像，只需一些基本的代码

<img src='http://rejetto.com/pics/rejetto.com.gif'>

在示例中，我们使用的是托管在另一台服务器上的文件。

您可能希望在HFS本身中托管您的图像，将其添加到虚拟文件系统中，可能是隐藏的（删除“can see”权限），这样地址就变成了 url(/my-hidden-folder/my-logo.png)

蓝色背景

在 “top of html body” 中添加以下内容

<style>
:root { --bg: #258; --text: #fff; }
a { color: #fff; text-decoration: underline; }
</style>

我们使用下划线来区分链接，这些链接在这个示例中与普通文本颜色相同。 结果将如下所示

从特殊文件中附加HTML内容进入文件夹

此示例将从名为 “readme.html” 的文件中读取内容，并将其添加到列表后面。

将以下内容添加到 “After list” 部分：

<div id='inject-readme'></div>
<style>
ul.dir { flex: unset }
</style>
<script>
let lastPath = ''
HFS.onEvent('entry', ({ entry }) => {
    let el = document.getElementById('inject-readme')
    let {pathname} = location
    if (pathname !== lastPath) { // 重置
        lastPath = pathname
        el.innerHTML = ''
    }
    if (entry.n === 'readme.html') // 加载
        fetch(entry.n).then(x => x.text()).then(x => 
            el.innerHTML = x)
})
</script>

从特殊文件中附加Markdown内容进入文件夹

此示例将从名为 “readme.md” 的文件中读取内容，并将其添加到列表后面（已渲染）。

将以下内容添加到 “After list” 部分：

<div id='inject-readme'></div>
<style>
ul.dir { flex: unset }
</style>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
window.addEventListener('load', () => {
    let lastPath = ''
    HFS.onEvent('entry', ({ entry }) => {
        let el = document.getElementById('inject-readme')
        let {pathname} = location
        if (pathname !== lastPath) { // 重置
            lastPath = pathname
            el.innerHTML = ''
        }
        if (entry.n === 'readme.md') // 加载
            fetch(entry.n).then(x => x.text()).then(x => 
                el.innerHTML = marked.parse(x))
    })
})
</script>

添加一个“复制链接”到文件菜单

将以下内容添加到 “Before header” 部分

<script>
    HFS.onEvent('fileMenu', ({ entry }) => ({
      label:
 "Copy link",
      async onClick() { 
        await navigator.clipboard.writeText(location + entry.n)
        HFS.dialogLib.alertDialog("Link copied")
      }
    }))
</script>