Question

我正在建立一个简单的投资组合网站，我想动态加载;我正在使用jQuery插件pagify.js。该插件的设置非常简单，就像这样：

$('#page_holder').pagify({ 
    pages: ['home', 'about', 'contact'], 
    default: 'home'  
});

唯一的问题是，您要加载的每个页面都必须手动添加到数组中。

有没有办法遍历目录，并将其中的每个页面添加到数组中？所以如果我有一个目录/帖子，包含文件foo.html和bar.html，它会返回'foo'，'bar'。

编辑：应该添加，“后端系统”（据你可以称之为）是Jekyll，所以它只是服务器上的一堆html页面。

Answer 1

如果你使用PHP作为服务器端语言，你可以很容易地做到这一点并将结果添加到你的javascript中：

$fileList = '';
$folder = 'posts';
$files = scandir($folder);
foreach ($files as $currentFile) {
    if (strpos($currentFile, '.html') !== FALSE) {
        $filename = str_ireplace('.html', '', $currentFile);
        $fileList .= (empty($fileList) ? '' : ', ') . "'$filename'";
    }
}

现在$ fileLIst有你的逗号分隔列表。只需在JS中使用它：

$('#page_holder').pagify({ 
    pages: [<?= $fileList; ?>], 
    default: 'home'  
});

Answer 2

您无法使用javascript访问文件夹中的目录或列表文件。这是出于安全原因。

但是可以使用php，asp.net等框架列出文件

为了简化JavaScript，您可以在json文件中拥有一组页面，您可以调用每个页面。

$.getJSON('test.json', function(data) {
   $('#page_holder').pagify({ 
       pages: data, 
       default: 'home'  
   }); 
});

Json文件：

['home', 'about', 'contact']

Answer 3

您需要使用后端代码构建此JS。这是一个PHP示例..

$arr = glob('slide_*.html'); //Get all files like 'slide_home.html'

//You'll need to get the array to a usable format to contain the terms 
//"home", "about", "contact", etc...    
//once its correct, and you have the default page in slot 0,
//echo the dynamic JS Code in the right place.

<?php
    echo "$('#page_holder').pagify({  ";
    echo "    pages: ['". implode("', '", $arr) ."'], ";
    echo "    default: '".$arr[0]."'  ";
    echo "});  ";
?>

或者，你可以让你的PHP页面按照下面提到的@Blowsie来提供数组。最重要的是，您需要手动在某处添加内容，或者您需要使用后端编码平台。

使用jQuery遍历html文件的目录？

3 个答案: