ブログ一覧の表示って結構やばいよね
成り立ちの第二弾です。
そうは言ってもソースが全公開されているので
「ソース読んでくれれば良いよ」
と言ってしまえばそれまでなんですが・・・
前の記事で生成したhtmlのコードをクローリングして
中のmetaタグ等からjsonデータを生成します
その生成したjsonデータをajaxで取得して
htmlとして書き出す
みたいなのがざっくりした流れです
まずはhtmlの解析ですが
ざっくりと以下のような感じですね
/** * ブログの読み込み * @param string $dirName * @param string $fileName * @return array */ function readBlog($dirName, $fileName) { $result = array(); // fileを取得してくる $html = file_get_contents($dirName . DIRECTORY_SEPARATOR . $fileName); // DOMDocumentとして取得する $domDocument = new DOMDocument(); // 読み込みを行う // @はエラー抑制の演算子 @$domDocument->loadHTML($html); // xmlデータとして取得 $xmlString = $domDocument->saveXML(); $xmlObject = simplexml_load_string($xmlString); // 配列に変換 $array = json_decode(json_encode($xmlObject), true); // 欲しいデータを取得 $result['href'] = str_replace('..', '', $dirName . DIRECTORY_SEPARATOR . $fileName); $result['title'] = isset($array['head']['title']) ? $array['head']['title'] : ''; $result['blogtype'] = preg_replace('/^\.\.\/blog/', '', $dirName); // metaデータを回してほしい情報を取ってくる if($array['head']['meta']) { foreach($array['head']['meta'] as $meta) { if(isset($meta['@attributes']) && isset($meta['@attributes']['name']) && $meta['@attributes']['name'] == 'createdate') { $result['date'] = $meta['@attributes']['content']; break; } } } return $result; }
超簡単ですね!w
後はjson_decodeで書き出せばおしまいです
/** * 書き出し */ function write() { // 順番の入れ替え usort( $this->result, function($a, $b){ $a_time = strtotime($a['date']); $b_time = strtotime($b['date']); if($a_time === $b_time) { return 0; } return ($a_time < $b_time)? 1: -1; }); file_put_contents(self::BLOG_PATH . DIRECTORY_SEPARATOR . 'index.json', json_encode($this->result)); }
fileの取得順で配列データが作られてしまうので
書き出しの直前に日付順でsortをしています
あとはblogを取得して生成する側ですね
これはmakelist.jsというのを作って対応しています。
jQueryとvue.jsを使って対応しています
jQueryにしてもvueにしても
ググったらいくらでも使い方が出てくるので
まあここには書かなくても良いかなと・・・
サンプルプログラムとしてお使い下さいな