如何自动将文件夹直接添加为按钮？答案

【问题标题】：How to add folders directly as buttons automatically?如何自动将文件夹直接添加为按钮？
【发布时间】：2020-09-10 19:42:27
【问题描述】：

我有几个文件夹，例如 a、b 等，每个文件夹都包含一个 index.html。在根目录下，我有一个主页 (index.html)。我希望文件夹a、b 等在我的主页上显示为链接，这样当点击它时，人们就会被发送到相应的 index.html。我还想确保每次添加一个新文件夹，比如c，它都会显示为我主页的链接。我该怎么办？

【问题讨论】：

您在为您的网站提供服务吗？如果是这样，后端语言是什么？是 Node.JS 吗？您只在标签中添加了 JavaScript，我认为您无法仅在前端中做到这一点。你为什么需要这个？听起来不太安全。
这只是一个我要在本地使用 Apache (XAMPP) 的项目
由于您使用的是XAMPP，我发布了一个基于PHP的解决方案。您能否更新您的问题，以便读者知道您正在使用它？

标签： php json hyperlink

【解决方案1】：

使用 PHP

文件：`index.php`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var dirList = JSON.parse(`<?=
            json_encode( glob('*', GLOB_ONLYDIR) );
        ?>`);

        document.write('<ul>');

        for (let dir of dirList) {
            document.write(`
                <li>
                    <a href=${dir}>Link to directory ${dir}</a>
                </li>
            `);
        }

        document.write('</ul>');
    </script>
</head>
<body>
</body>
</html>

您可能已经知道这一点，但是您的项目目录（包含您的 index.php 和您想要列出的文件夹）应该存储在 xampp/htdocs 下才能正常工作。

注意：很抱歉使用document.write()，但它比调用document.createElement() 并多次附加内容更快、更易于阅读。

说明

为了将数据从 PHP 传递到 JS，我将其格式化为 JSON：

使用glob() 检索目录数组；
将数组编码为 JSON；
回显它（<?= + ?> 块是 <?php echo + ?> 的缩写）；
在 JavaScript 中接收，解析 JSON 数组并将其存储在 var dirList 中；
遍历数组元素并在列表中创建链接。

你如何处理或设计它实际上取决于你。如果需要，您可以发送 HTML 代码以及已经从 PHP 组装的整个列表，但我将大部分工作留给 JavaScript。

【讨论】：

使用 PHP

文件：index.php

说明

文件：`index.php`