实现极客时间专题浏览
coderzhouyu2023-10-05
扫描目录并展示
<?php
// 获取当前目录下的所有文件
$files = scandir('./');
// 过滤掉当前目录和上级目录
$files = array_filter($files, function ($file) {
return $file !== '.' && $file !== '..';
});
// 过滤掉非文件夹
$files = array_filter($files, function ($file) {
return is_dir($file);
});
// 过滤掉 . 开头的文件夹
$files = array_filter($files, function ($file) {
return substr($file, 0, 1) !== '.';
});
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>周瑜的电子书收集</title>
<!-- CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">
<img src="https://www.bootcss.com/assets/img/navlogo-small.png" width="30" height="30" class="d-inline-block align-top" alt="">
小书屋
</a>
</nav>
<div class="container my-5">
<div class="book_list row row-cols-2">
<?php foreach ($files as $file) { ?>
<div class="card col ">
<div class="card-body">
<h5 class="card-title"><?= $file ?></h5>
<a href="/info.php?path=<?= $file ?>" class="btn btn-primary">阅读</a>
</div>
</div>
<?php } ?>
</div>
</div>
</body>
</html>
读取目录下的文件并展示
<?php
$path = $_GET['path'];
$realpath = __DIR__ . "/" . $path;
function getDirTree($path)
{
$dir_tree = [];
$files = scandir($path);
// 过滤掉当前目录和上级目录
$files = array_filter($files, function ($file) {
return $file !== '.' && $file !== '..';
});
foreach ($files as $file) {
$realpath = $path . "/" . $file;
if (is_dir($realpath)) {
$dir_tree[] = [
"name" => $file,
"path" => replacePath($realpath),
"type" => "dir",
"children" => getDirTree($realpath)
];
} else {
$dir_tree[] = [
"name" => $file,
"path" => replacePath($realpath),
"type" => "file"
];
}
}
return $dir_tree;
}
function replacePath($path)
{
$path = str_replace(__DIR__, "", $path);
$path = str_replace("\\", "/", $path);
return $path;
}
$dir_tree = getDirTree($realpath);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>周瑜的电子书收集</title>
<!-- CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<style>
.nav-link {
color: #2b2b2b !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="/">
<img src="https://www.bootcss.com/assets/img/navlogo-small.png" width="30" height="30" class="d-inline-block align-top" alt="">
小书屋
</a>
</nav>
<div class="container my-5">
<h3 class="py-2 border-bottom"><?= $path ?></h3>
<div class="row">
<div class="col-lg-4 col-md-4 border-right" style="height:600px; overflow: scroll;">
<?php foreach ($dir_tree as $item) { ?>
<?php if ($item['type'] == 'dir' && count($item['children']) > 0) { ?>
<div class="item">
<h6><?= $item["name"] ?></h6>
<ul class="nav flex-column nav-pills">
<?php foreach ($item['children'] as $child) { ?>
<li class="nav-item">
<a class="nav-link" data-href="<?= $child['path'] ?>"><?= $child['name'] ?></a>
</li>
<?php } ?>
</ul>
</div>
<?php } ?>
<?php } ?>
</div>
<div class="col">
<iframe width="100%" height="600px" frameborder="0" scrolling="yes" id="iframe" src="">
</iframe>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(function() {
$(".nav-link").click(function() {
$("#iframe").attr("src", $(this).data("href"));
$(".nav-link").removeClass("active");
$(this).addClass("active");
return false;
})
})
</script>
</body>
</html>