記事一覧にカテゴリーとタグを実装する

カテゴリーを実装する

まず一覧に並んでいる記事をカテゴリー毎にまとめて表示させたいなと思い、色々調べてみました。

記事一覧や商品一覧で役立つ！特定のクラスを持った要素を抽出してソートするjQuery | 福岡のホームページ制作会社 | シンス株式会社

記事や商品を特定のクラスで抽出して表示するのに便利なスクリプト こんにちは！福岡でホームページ制作を行なうシンス株式会社の越水です。

since-inc.jp

シンプルに1記事につき1つのカテゴリーを割り当てて抽出することが出来ます。
この時は↑の記事のサンプルコードほぼそのままの形で利用させていただきました。

こんな感じでしばらく運用していたのですが、『Moonlighter』や『Minecraft』などは「ゲーム」の中の1タイトルなのでまとめたいなと思いました。
また記事の中でもスマホに関係するもの(FitTycoonやアプリについてなど)やJavaScript関連など、カテゴリーとは別に仕分けたいと考えました。

タグを実装する

jQueryでリスト表示を絞り込む処理を実装する ｜ Tips Note by TAM

TAM のテクニカルチームがお届けする WEB技術ブログ！

www.tam-tam.co.jp

ということで次に参考にしたのはこちらです。
記事3つ目の配列を使ったやり方で実装してみることにしました。

だいぶスッキリしました！

サンプルではカテゴリーにも配列を使っていますが、関連記事一覧の表示を実装する時にうまく動くやり方が分からなかったので、当サイトではカテゴリーは1記事につき1つで設定しています。
1記事につきタグを複数指定できるので、絞り込みで色んなパターンの表示ができるのはとても便利です✨

ただ…HTMLの記述がこの様になるのですが↓

<li class="list_item" data-category='ゲーム' data-tag='["Steam", "レビュー"]'>
  <span class="Lgame">Game</span>
  <a href="https://miscnote.com/blog/20200913-entry-01/">DarkFarmをプレイしてみた</a>
  <time class="date">2020-09-13</time>
</li>

『data-tag='["Steam", "レビュー"]'』の配列の部分。
BlueGriffon(HTMLエディター)のプレビュータブで開くと、

data-tag="["Steam", "レビュー"]"

最後に

少しずつ少しずつ弄っているので、こうやってメモを残しておかないと何をどう弄ったのか分からなくなってきます…

いつかは自分で考えたコードで運用出来たら良いなとは思うんですが…流石に基礎からしっかり勉強しなきゃダメそうです😅

記事一覧のデータをJSONファイルで管理する｜MiscNote Blog

ブログ記事一覧のページは今までHTMLベタ打ちで更新していました。このような形の部分をコピーして修正するだけなので、簡単といえば簡単なのですが… タイトルの前の「ラベル部分」もカテゴリに合わせて変更していたので、その修正が地味に大変…というか修正し忘れて間違えていることが時々ありました。

miscnote.com