diywzdh
/
view.php

<?php
require 'header.php';

/* 判断是否输入了 pageID */

if (empty($_GET['pageID'])) {
    echo "需要传入有效的 pageID。";
    exit;
}

/* 判断该 pageID 是否存在 */

$pageID = $_GET['pageID'];

$jsonFileName = $datapath . "/siteid_" . $pageID . ".json";

if (!file_exists($jsonFileName)) {
    // 该 pageID 不存在
    exit('"' . $pageID . '" 这个 pageID 尚未使用，无法查看。');
}

$string = file_get_contents("$jsonFileName");
$json_a = json_decode($string, true);

if ($json_a == FALSE) {
    echo "Json 数据格式不正确，请先纠正。";
    exit;
}

// -----------------------------------------------------------------------------
?>

<!doctype html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><?php echo $pageID; ?></title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="resources/bootstrap-4.3.1-dist/css/bootstrap.min.css">

    <!-- Optional JavaScript -->
    <script src="resources/jquery-3.4.0/jquery-3.4.0.min.js"></script>
    <script src="resources/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="resources/uikit-3.5.5/css/uikit.min.css">
    <script src="resources/uikit-3.5.5/js/uikit.min.js"></script>
    <script src="resources/uikit-3.5.5/js/uikit-icons.min.js"></script>

    <style type="text/css">

        .fenlei {}

        .fenlei:hover {
            cursor:pointer;
        }

        .wangzhiliebiao {}

        #offcanvas-nav {
            z-index: 3000;
        }

        .stiky {
            position: sticky;
            top: 38px;
        }

    </style>
    <base target="_blank" />
</head>
<body>

<!--顶部导航栏-->
<!--参考资料：https://bootstrapcreative.com/pattern/navbar-centered-logo-links-left-right/-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

    <!--  Show this only on mobile to medium screens  -->
    <div class="navbar-brand d-lg-none"><?php echo $pageID; ?></div>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!--  Use flexbox utility classes to change how the child elements are justified  -->
    <div class="collapse navbar-collapse justify-content-between" id="navbarToggle">

        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="index.php" target="_self">首页<span class="sr-only">(current)</span></a>
            </li>
        </ul>

        <!--   Show this only lg screens and up   -->
        <div class="navbar-brand d-none d-lg-block"><?php echo $pageID; ?></div>

        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#" target="_self">使用帮助</a>
            </li>
        </ul>

    </div>
</nav>
<!--顶部导航栏-->

<div class="container mb-3">

<!-- -------------------------------------------------------------------- -->

<nav id="navbar" class="mt-2 sticky-top">
    <div class="btn-group" role="group" aria-label="Basic example">
      <button id="btnEdit" type="button" class="btn btn-secondary rounded-0">编辑</button>
      <button id="btnOpen" type="button" class="btn btn-secondary rounded-0">展开</button>
      <button id="btnClose" type="button" class="btn btn-secondary rounded-0">折叠</button>
      <button id="btnShowTOC" type="button" class="btn btn-secondary rounded-0" uk-toggle="target: #offcanvas-nav">目录</button>
    </div>
</nav>

<!-- -------------------------------------------------------------------- -->

    <div id="offcanvas-nav" uk-offcanvas="mode:reveal; overlay: true">
        <div class="uk-offcanvas-bar">

            <ul class="uk-nav uk-nav-default">
                <li class="uk-parent">
                    <div><b>一级目录</b></div>
                    <ul class="uk-nav-sub">
                        <?php
                        $counter = 1;
                        foreach ($json_a as $fenlei => $wangzhi) {
                            echo <<<BBB
                        <li><a href="#{$counter}" target="_self">$fenlei</a></li>
BBB;
                            $counter += 1;
                        }
                        ?>
                    </ul>
                </li>
            </ul>

        </div>
    </div>

<!-- -------------------------------------------------------------------- -->

<div id="content" class="mt-2">

    <?php
    $zindexCounter = 1000;
    $counter = 1;
    foreach ($json_a as $fenlei => $wangzhi) {
    ?>

        <div id="<?php echo $counter; ?>" style="z-index: <?php echo $zindexCounter; ?>" class="fenlei list-group-item list-group-item-action list-group-item-secondary rounded-0 stiky"><?php echo htmlspecialchars($fenlei); ?></div>

        <div class="wangzhiliebiao">


            <?php
                foreach ($wangzhi as $biaoti => $lianjie) {
            ?>
                    <a class="list-group-item list-group-item-action rounded-0" href="<?php echo htmlspecialchars($lianjie); ?>"><?php echo htmlspecialchars($biaoti); ?></a>
            <?php
                }
            ?>

        </div>

    <?php
        $zindexCounter += 1;
        $counter += 1;
    }
    ?>

</div>

<!-- -------------------------------------------------------------------- -->
</div>

<script src="resources/vanilla-back-to-top/vanilla-back-to-top.min.js"></script>

<script>
    addBackToTop({
        diameter: 56,
        backgroundColor: 'rgb(255, 82, 82)',
        textColor: '#fff',
        scrollDuration: 300, // ms
        zIndex: 2000
    })
</script>

<!-- -------------------------------------------------------------------- -->
<script>
    // 页内跳转滚动效果
    // 参考资料：
    // https://blog.csdn.net/youyoufangshou/article/details/53172928
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });
</script>

<!-- -------------------------------------------------------------------- -->

<script type="text/javascript">

    $(document).ready(function() {

        function showLinkList(){

            var nextBrotherElement = $(this).next();

            if (nextBrotherElement.css('display') == 'block') {
                nextBrotherElement.slideUp();
            } else {
                nextBrotherElement.slideDown();
            }

        }

        $(document).on("click",".fenlei",showLinkList);

    });

</script>

<!-- -------------------------------------------------------------------- -->

<script type="text/javascript">

    $(document).ready(function() {

        function openAll() {
            $('.wangzhiliebiao').slideDown();
        }

        function closeAll() {
            $('.wangzhiliebiao').slideUp();
        }

        function editPage() {
            window.open("edit.php?pageID=<?php echo $pageID; ?>", "_self");
        }

        $(document).on("click", "#btnOpen", openAll);
        $(document).on("click", "#btnClose", closeAll);
        $(document).on("click", "#btnEdit", editPage);

    });

</script>

<!-- -------------------------------------------------------------------- -->

<?php
    echo $analysisCode;
?>

<!-- -------------------------------------------------------------------- -->

</body>
</html>