machete/themes/beauty/views/site/index.php

<!-- 顶部导航栏模块 -->
<nav class="navbar navbar-default navbar-fixed-top navbarJS">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display navbar-inverse-->
        <div class="navbar-header">
            <div class="navbar-toggle">
                <img class="svg icon1 svgimg lampJS verMiddle" src="/img/beauty/buld.svg" alt="点击关灯/开灯" title="点击关灯/开灯">
                <button type="button" class="collapsed mr_button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <img class="svg icon1 svgimg verMiddle" src="/img/beauty/navshow.svg" alt="展开列表" title="展开列表">
                </button>
            </div>
            
            <a class="navbar-brand" href="/">
                <img class="verMiddle" src="/content/machete_icon.png" alt="logo图片">
                <span class="verMiddle">FileSite图片站</span>
            </a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
<?php
$selectedId = $viewData['cateId'];
$breadcrumbs = !empty($viewData['breadcrumbs']) ? $viewData['breadcrumbs'] : [];
if (!empty($viewData['menus'])) {        //只显示第一级目录
    foreach($viewData['menus'] as $index => $item) {
        $selected = $item['id'] == $selectedId || (!empty($breadcrumbs) && $item['id'] == $breadcrumbs[0]['id']) ? 'active' : '';
        echo <<<eof
        <li class="{$selected}"><a href="/?id={$item['id']}">{$item['directory']}</a></li>
eof;
    }
}
?>
            </ul>
            <?php /*
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            */ ?>
            <div class="nb_right nav navbar-nav navbar-right">
                <img class="svg icon1 svgimg lampJS verMiddle" src="/img/beauty/buld.svg" alt="点击关灯/开灯" title="点击关灯/开灯">
                <img class="icon1 svg connectmeJS svgimg svgimg2 iconr2 verMiddle" src="/img/beauty/scrolltop.svg" alt="联系我们" title="联系我们">

            </div>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<?php
if (!empty($breadcrumbs)) {
    echo <<<eof
    <div class="breadcrumbs">
        <small>当前位置：</small>
eof;

    foreach($breadcrumbs as $bread) {
        if ($bread['id'] != $selectedId) {
            echo <<<eof
        <a href="{$bread['url']}">{$bread['name']}</a> / 
eof;
        }else {
            echo <<<eof
        <strong>{$bread['name']}</strong>
eof;
        }
    }

    echo <<<eof
    </div>
eof;
}
?>

<!-- 内容主题 -->
<div class="img_main">
    <div class="im_mainl row">
        <?php
        $imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
        $category = !empty($viewData['scanResults'][$selectedId]) ? $viewData['scanResults'][$selectedId] : [];

        //当前目录的描述介绍
        if (!empty($category['description'])) {
            echo <<<eof
    <p class="modal-body">{$category['description']}</p>
eof;
        }

        //当前目录的readme详细介绍
        if (!empty($viewData['htmlCateReadme'])) {
            echo <<<eof
    <div class="modal-body markdown-body">{$viewData['htmlCateReadme']}</div>
eof;
        }

        if (!empty($category['directories'])) {        //两级目录支持
            $index = 0;
            foreach($category['directories'] as $dir) {
                echo <<<eof
            <div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
                <a href="{$dir['path']}" class="bor_radius">
eof;

                if (!empty($dir['snapshot'])) {
                    if ($index > 0) {
                        echo <<<eof
    <img data-original="{$dir['snapshot']}" class="bor_radius im_img lazy" alt="{$dir['directory']}">
eof;
                    }else {
                        echo <<<eof
    <img src="{$dir['snapshot']}" class="bor_radius im_img" alt="{$dir['directory']}">
eof;
                    }
                }else if (!empty($dir['files'])) {
                    $first_img = array_shift($dir['files']);
                    if (!in_array($first_img['extension'], $imgExts)) {
                        foreach($dir['files'] as $file) {
                            if (in_array($file['extension'], $imgExts)) {
                                $first_img = $file;
                                break;
                            }
                        }
                    }

                    if (in_array($first_img['extension'], $imgExts)) {
                        if ($index > 0) {
                            echo <<<eof
    <img data-original="{$first_img['path']}" class="bor_radius im_img lazy" alt="{$first_img['filename']}">
eof;
                        }else {
                            echo <<<eof
    <img src="{$first_img['path']}" class="bor_radius im_img" alt="{$first_img['filename']}">
eof;
                        }
                    }else {
                        echo <<<eof
    <img src="/img/default.png" class="bor_radius im_img" alt="default image">
eof;
                    }
                }

                $title = !empty($dir['title']) ? $dir['title'] : $dir['directory'];
                echo <<<eof
                <div class="im_img_title">
                    <span>{$title}</span>
                </div>
            </a>
        </div>
eof;
                $index ++;
            }
        }

        if (!empty($category['files'])) {        //一级目录支持
            $index = 0;
            foreach($category['files'] as $file) {
                if (!in_array($file['extension'], $imgExts)) {continue;}

                $title = !empty($file['title']) ? $file['title'] : $file['filename'];

                if ($index > 0) {
                    echo <<<eof
<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <a href="javascript:;" class="bor_radius" data-fancybox="gallery" data-src="{$file['path']}" data-caption="图片{$title}">
        <img src="img/beauty/lazy.svg" data-original="{$file['path']}" class="bor_radius im_img lazy" alt="{$file['filename']}">
    </a>
</div>
eof;
                }else {
                    echo <<<eof
<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <a href="javascript:;" class="bor_radius" data-fancybox="gallery" data-src="{$file['path']}" data-caption="图片{$title}">
        <img src="{$file['path']}" class="bor_radius im_img" alt="{$file['filename']}">
    </a>
</div>
eof;
                }

                $index ++;
            }
        }
    ?>

    </div>
</div>

<?php /*if (!empty($viewData['mp3File'])) { ?>
<audio autoplay controls loop preload="auto" id="music" class="hide">
    <source src="<?=$viewData['mp3File']['path']?>" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
<div class="mbtns" onclick="playMusic()">
    <div class="mbtn playing hide" id="btn_playing">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cassette-fill" viewBox="0 0 16 16">
            <path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h.191l1.862-3.724A.5.5 0 0 1 4 10h8a.5.5 0 0 1 .447.276L14.31 14h.191a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13ZM4 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm8 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM6 6a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H7a1 1 0 0 1-1-1Z"/>
            <path d="m13.191 14-1.5-3H4.309l-1.5 3h10.382Z"/>
        </svg>
    </div>
    <div class="mbtn paused" id="btn_paused">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cassette" viewBox="0 0 16 16">
            <path d="M4 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm9-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM7 6a1 1 0 0 0 0 2h2a1 1 0 1 0 0-2H7Z"/>
            <path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13ZM1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-.691l-1.362-2.724A.5.5 0 0 0 12 10H4a.5.5 0 0 0-.447.276L2.19 13H1.5a.5.5 0 0 1-.5-.5v-9ZM11.691 11l1 2H3.309l1-2h7.382Z"/>
        </svg>
    </div>
</div>
<script>
function playMusic() {
    var mp3 = document.getElementById('music');
    var playingBtn = document.getElementById('btn_playing'),
        pausedBtn = document.getElementById('btn_paused');
    try {
        if (mp3.paused) {
            mp3.play();
            mp3.volume = 0.5;
            playingBtn.className = playingBtn.className.replace(' hide', '');
            pausedBtn.className = pausedBtn.className.replace(' hide', '') + ' hide';
        }else {
            mp3.pause();
            pausedBtn.className = pausedBtn.className.replace(' hide', '');
            playingBtn.className = playingBtn.className.replace(' hide', '') + ' hide';
        }
    }catch(e){}
}

function detectMusicAutoPlaying() {
    var mp3 = document.getElementById('music');
    var playingBtn = document.getElementById('btn_playing'),
        pausedBtn = document.getElementById('btn_paused');
    try {
        if (!mp3.paused) {
            mp3.volume = 0.5;
            playingBtn.className = pausedBtn.className.replace(' hide', '');
            pausedBtn.className = playingBtn.className.replace(' hide', '') + ' hide';
            if (typeof(timer) != 'undefined') {clearInterval(timer);}
        }
    }catch(e){}
}
var timer = setInterval(detectMusicAutoPlaying, 50);
</script>
<?php }*/ ?>