jQueryを使用してhtmlファイルのディレクトリを検索しますか？

Question

私は動的にロードしたい単純なポートフォリオサイトを設定しています。私はこのためにjQueryプラグインpagify.jsを使用しています。そのプラグインの設定は、それがこのようなものだ、非常に簡単です：

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

これで唯一の問題は、ロードしたいすべてのページが配列に手動で追加しなければならないことです。

ディレクトリをトラバースして、各ページを配列に追加する方法はありますか？ですから、ファイル/ foo.htmlとbar.htmlを含むディレクトリ/ postsがあれば、 'foo'、 'bar'を返します。

EDIT： "バックエンドシステム"（それをあなたがそれと呼ぶ限り）はJekyllですので、サーバ上のhtmlページの束です。

Answer 1

javascriptを使用してフォルダ内のディレクトリまたはリストファイルにアクセスすることはできません。 これはセキュリティ上の理由によるものです。

あなたがあなたが呼び出すことができますJSONファイル内のページの配列を持つことができ、JavaScriptで簡単にものを作るためにPHP、asp.netのなどのフレームワーク

---

でファイルを一覧表示することが可能であるが各ページに

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

JSONファイル：

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

Answer 2

あなたは、これはあなたのバックエンドのコードを使用してJS構築する必要があります。ここであなただけの@Blowsieは後述するように、あなたの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の例です。要するに、手動でどこかに何かを追加する必要があるか、またはバックエンドコーディングプラットフォームを使用する必要があります。

Answer 3

あなたは簡単に十分なこの操作を行うと、あなたのjavascriptに結果を追加することができ、サーバーサイド言語としてPHPを使用している場合：

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

今$ファイルリストは、あなたのカンマ区切りのリストを持っています。あなたのJSでそれを使ってください：

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