新着記事一覧の修正・関連記事一覧を実装

2020-09-14 2023-09-10

以前当ブログに新着記事一覧を実装したのですが、

ここから少し修正したのと、『関連記事一覧』も実装したので、その過程をメモ代わりに残しておきたいと思います。

新着記事一覧の修正

以前は「class="new"」を記述したタグを読み込む形で実装していたのですが、それだと記事を追加した時に「class="new"」を移動しなければいけませんでした。
「記事一覧の上から5番目までを抜き出す方法はないかな？」
と調べたところ、以下の記述で抜き出すことが出来ました！

<script>
jQuery(function($){
$('#list1').load('https://miscnote.com/blog/list-of-articles.html .list_item:lt(5)');
});
</script>

※class名を new から list_item に変えてます。
「class="list_item"」は各記事タイトルのリンクを囲っている要素全てに配置しています。
『上から5番目まで』という指定は :lt(5) で行っています。
(参照：jQuery リファレンス：:lt( ))
この「:lt」というフィルタを知らなかったので、実装まで少し時間がかかりました😅

そもそもjQuery自体独学＆調べたものをコピペ改変して使っているので、知識不足が否めないんですよね…
↑の参照サイトにたくさんのセレクタが紹介されていて、とても勉強になりました😊

関連記事一覧を実装

記事一覧にカテゴリーを実装したので、各記事の下に『関連記事一覧』も表示することにしました。
新着記事は『上から◯番目』という指定だけで良かったのですが、関連記事では更に『カテゴリーが△△のもの』という指定が必要になります。

<script>
jQuery(function($){
$('#list1').load("https://miscnote.com/blog/list-of-articles.html li[data-category='ゲーム']");
});
</script>

(参照：jQuery リファレンス：[ 属性名 = '値' ])
カテゴリー用の属性が別のスクリプトで指定されたものだったのでこの形にしました。( li はカテゴリーの要素が書いてあるタグです)

カテゴリーとは別に『タグ』を実装したのですが、そちらは配列を使っていたのでうまく呼び出せませんでした。
配列も指定できる書き方があるのかなぁ…？今の時点では分からないですね。一旦諦めました💧

【2023/9/6 追記】
関連記事一覧をランダム表示に変更しました。

関連記事一覧をランダム表示にする｜MiscNote Blog

以前ブログ記事の下部に「新着記事一覧」「関連記事一覧」を実装しました。しかし最近はカテゴリー「その他」の記事を追加することが多く、そうすると新着記事と関連記事の一覧が全く同じになってしまいます。「関連記事一覧はカテゴリー内の記事からランダムで5つ表示させることはできないかな？」と思い調べてみました。

最後に

なかなか一度で最善の形にはならないですね。ちょっとずつ勉強して改善・修正の繰り返しです。
とはいえ、かなり理想の形になってきました。
やはり「更新箇所をできるだけ少なくしたい＝楽したい」という気持ちは良い原動力になりますねｗ