ブログ(自作静的サイト)に新着記事一覧を実装する
このブログ、というかこのサイトはほとんど静的サイトです。しかも「BlueGriffon」というHTMLエディターを使ってペチペチとタグを打ち込んで作成しています。
「BlueGriffon」“Gecko”ベースのHTML5/CSS3対応HTMLエディター
本当は「静的サイトジェネレータ」みたいなやつでページを一括作成！とかできたら楽なのでしょうが…
各ページのレイアウトを細かく弄りたい！という私には向いてなかったみたいです😅
(一応トライしてみたけど難しくて断念したとも言うｗ)
昔ながらの作り方で何とか頑張っております…ｗ
で、ブログサービスなども使わずちまちま作っているわけですが、手打ちで作っているとふと「ブログサービスにはつきものの○○を実装したい」とか思ったりするわけです。
今回はその中でも『新着記事一覧』の実装に取り組んでみました。何とか形になったので、作業手順をメモ代わりに書いていきたいと思います。
実装方法
単純な『新着記事一覧』を作るだけなら、
・<a href="xxx01.html">○○について</a><br>
・<a href="xxx02.html">✕✕について</a><br>
・<a href="xxx03.html">△△について</a>
のような形で書いていけばいいのですが、この形だと記事を書く度、『新着記事一覧』を載せたページを一々更新しなければならなくなります。それはすごく面倒くさい！
トップページだけでなく各記事の一番下にも設置したいと思っていたので、なんとか更新を自動化できないかと考えたのです。
どういう形なら実装できるか考えた結果、「記事一覧のページを作成し、そこから”新着記事”と設定した記事のみ抜粋して表示する」という形にしてみました。『jQuery の load()』を使っています。
参考にしたサイトはこちら↓
・【jQuery入門】load()でHTMLを読み込む方法！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト
・jQuery load() を使って別のページの見出しを表示する | Web Design Leaves
記事一覧から新着記事を抜き出す
まずは記事一覧をつくります。(実際のページはこちら)
そして各記事のリンクの中で、『新着記事一覧』に記載したいリンクを class="new" 指定した<div>タグで囲みます。
<div class="new"><a href="https://miscnote.com/blog/20200602-entry-01/">Moonlighterダンジョンプレイ中にマップを確認する</a></div>
<div class="new"><a href="https://miscnote.com/blog/20200513-entry-01/">ルーターを買い替えた(WSR-2533DHP3)ら有線接続が頻繁に切断された話</a></div>
<div class="new"><a href="https://miscnote.com/blog/20200318-entry-01/">Moonlighterの疑問あれこれをまとめてみた</a></div>
※実際は他タグも記述されてますが、説明している要素だけ抜粋しました。
そして『新着記事一覧』を表示したいページに、
<script>
jQuery(function($){
$('#list1').load('https://miscnote.com/blog/list-of-articles.html .new');
});
</script>
を記述します。
※私は↑から更にjsファイルに記述して呼び出す形にしました。
(参照：【JavaScript入門】外部JSファイルを読み込んでみよう | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト)
そして『新着記事一覧』を載せたい場所に、
<div id="list1"></div>を記述することで、class="new" で指定した記事の一覧が表示されるようになりました！
今後新しい記事を書いたときは、記事一覧にリンクを追加して、<div class="new">タグを移動してあげればOK。
少し面倒ですが、色々考えた結果これが一番スムーズに運用できるかなと。
最後に
まとめてみるとすごく簡単になってしまいましたが… ここに行き着くまでが大変でした😅
更新の手間などを考えると、手打ち静的サイトだと結構制限があって…不便だなとは思いますが、その分すごく勉強になっている気がします。
※2020/9/14 上記事からさらに修正・改善したので記事にしました↓
