1

動的に読み込みたい単純なポートフォリオ サイトをセットアップしています。これには jQuery プラグインpagify.jsを使用しています。そのプラグインのセットアップは非常に簡単で、次のようになります。

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

これに関する唯一の問題は、ロードするすべてのページを手動で配列に追加する必要があることです。

ディレクトリをトラバースして、その中の各ページを配列に追加する方法はありますか? したがって、ファイル foo.html と bar.html を含むディレクトリ /posts がある場合、'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 "});  ";
?>

または、以下で説明する @Blowsie のように、PHP ページに配列をフィードさせることもできます。要するに、どこかに手動で何かを追加するか、バックエンド コーディング プラットフォームを使用する必要があるということです。

于 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 に答える