VuePress用にブログカードコンポーネントを作ってみる

2020/09/19

やりたいこと

記事一覧に表示する用のブログカードコンポーネントを作る

具体的にいうと？

下記を満たしたブログカードコンポーネントを作りたい

OGPの画像と同じものを表示させたい
記事タイトルを表示させたい
日付が表示を表示させたい

作成する

VuePressで使うコンポーネントは.vuepress配下にcomponentsフォルダを作りそこに作成していきましょう。
(参考:VuePressを導入してみる〜記事一覧表示編〜#3. ディレクトリ(フォルダ)構成

1. 必要なHTMLタグを用意する

<template lang="pug">
  article.article-card
    a.article-card__link(href="/")
      img.article-card__eyecatch(v-bind:src="url")
      span.article-card__date 2020/09/19
      h2.article-card__title 記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル
</template>

<script>
export default {
  // サンプル画像を表示させるために一時的に設定
  computed: {
    url() {
      return "https://placehold.jp/740x457.png?css=%7B%22background-color%22%3A%22%20white%22%2C%22color%22%3A%22%20%23555555%22%2C%22font-size%22%3A%22%2035px%22%2C%22word-break%22%3A%22%20break-all%22%2C%22padding%22%3A%22%2025px%22%7D&text=sample"
    }
  }
}
</script>

<style>
/* 略 */
</style>

先日取り入れたpug(プリプロセッサ)を早速使っていきます。
(参考:VuePressでプリプロセッサを使う)

スタイルを当ててないから境界がわかりにくいですね。
表示させたい要素はしっかり表示されています。

2. スタイルを当てていく

<template lang="pug">
  article.article-card
    a.article-card__link(href="/")
      img.article-card__eyecatch(v-bind:src="url")
      span.article-card__date 2020/09/19
      h2.article-card__title 記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル記事タイトル
</template>

<script>
// 略
</script>

<style lang="scss">
  .article-card {
    display: block;
    border: 1px solid #ccc;
    border-radius: 1rem;
    &__link {
      color: #333;
    }
    &__eyecatch {
      width: 320px;
      border-radius: 1rem 1rem 0 0;
      border-bottom: 1px solid #ddd;
      display: block;
      width: -webkit-fill-available;
    }
    &__date, &__title {
      padding: 0.5rem 1.5rem;
    }
    &__date {
      display: block;
      color: #999;
      padding-bottom: 0;
    }
    &__title {
      display: block;
      border: none;
      margin: 0;
      font-size: 1.125rem;
      min-height: 2rem;
    }
  }
</style>

スタイルに関してもsass(プリプロセッサ)を使用して記述していきます。
ひとまずこんなもんでしょうか。

3. 動的に変更できるようにする

このコンポーネントは記事一覧で使用することを想定しています。
propsでデータを渡せるようにしていきます。

<template lang="pug">
  article.article-card
    a.article-card__link(v-bind:href="link")
      img.article-card__eyecatch(v-bind:src="placeholdUrl + title")
      span.article-card__date {{ date }}
      h2.article-card__title {{ title }}
</template>

<script>
export default {
  props: ['link', 'date', 'title'],
  computed: {
    placeholdUrl() {
      const placeholdUrl = "https://placehold.jp/740x457.png?css=%7B%22background-color%22%3A%22%20white%22%2C%22color%22%3A%22%20%23555555%22%2C%22font-size%22%3A%22%2035px%22%2C%22word-break%22%3A%22%20break-all%22%2C%22padding%22%3A%22%2025px%22%7D&text="
      return placeholdUrl
    }
  }
}
</script>

<style>
/* 略 */
</style>

コンポーネントを使用するときに属性に表示させたいデータを入れていきます。

<ArticleCard
  v-bind:link="this.$page.path"
  v-bind:date="this.$page.frontmatter.date"
  v-bind:title="this.$page.title"
/>

完成しましたー:tada::tada::tada:

まとめ

VuePressは自分でコンポーネントを気軽に作れるのが良いですよね。
これをそっけなかった記事一覧ページで使えばいい感じにブログっぽくなること間違いなし。
明日は一覧ページを改修しようと思います。

それではまた明日。