JavaScriptで記事一覧

2021/9/13

機能

・記事一覧

新しいページ作るたびに全てのページにaタグを書く、なんて面倒なことできればしたくない

効率悪いしデータのサイズも大きくなる

ということで今回は１つのjsファイルを更新するだけでホーム以外のページでも記事を一覧できる方法を紹介しようと思います。

難易度

・簡単

ジョン王でも理解できる

作り方

1.ファイル作成

まず、JavaScript用に.jsのファイルを作成します。
ここではファイル名を0.jsにしようと思います。

2.作成したファイルにコードを書く

先ほど作成したjsファイルに以下のコードを記述します。

document.getElementById('link');
link.innerHTML='<div class="scrl1">'+
'<div class="link1"><a class="link2" href="">記事4</a></div>'+
'<div class="link1"><a class="link2" href="">記事3</a></div>'+
'<div class="link1"><a class="link2" href="">記事2</a></div>'+
'<div class="link1"><a class="link2" href="">記事1</a></div>'+
'</div>';

3.htmlにタグを埋め込む

htmlファイルに以下のタグを記述します。

<script src="0.js"></script><!--headタグ内かbodyタグ内の最下部に記述-->
<div id="link"></div><!--bodyタグ内の任意の場所に記述-->

4.CSSで見た目を整える

サンプルコード

.link1{width:95%;border:1px solid #333;overflow-wrap:break-word;right:0;left:0;margin:auto;}
.link2{font-size:16px;color:#00CCCC;}
.scrl1{overflow:scroll;height:450px;width:85%;background:#000;border:5px double #FFF;right:0px;left:0;bottom:0;margin:auto;z-index:1;position:relative;opacity:0.8;}

結果

↓こんな感じになります。

▶︎記事一覧 ▶︎関連記事

カテゴリー絞り込み機能についてはまた別のところで書こうと思います。