1

我正在建立一个简单的投资组合网站，我想动态加载它；我为此使用了 jQuery 插件pagify.js。该插件的设置非常简单，如下所示：

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

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

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

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

4

3 回答 3

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'  
});
于 2012-04-11T10:18:19.990 回答
0

您将需要使用您的后端代码构建此 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 一样提供数组。底线是您要么需要在某处手动添加一些东西，要么需要使用后端编码平台。

于 2012-04-11T10:18:17.727 回答
0

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

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

为了使 JavaScript 中的事情变得更容易，您可以在 json 文件中包含一组页面，您可以调用每个页面。

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

json文件：

['home', 'about', 'contact']
于 2012-04-11T10:12:38.447 回答