eyecatch

作成日:2020-05-16 / 更新日:2020-05-16

SEO対策として、パンくずリストは重要視されているものの一つかと思います。 かなり我流ではありますが、パンくずリストのようなものを作るコンポーネント作成方法をご紹介します。

# vuepressで作ってみた

こちらも参照ください。

# パンくずリストとは

パンくずリストはそのサイトの中で、どのあたりにいるのかを表したものです。 童話のヘンゼルとグレーテルの話に基づいて名前がつけられています。

サイトの階層構造を示すことができればいいわけなので、ここではカテゴリを利用して、パンくずリストを作ります。

TIP

カテゴリは各ページに1つのみ設定されている前提とします。 複数の場合はおそらくうまく稼働しないと思います。

# 設定

# vueコンポーネントの作成

パンくずリストを生成するためのvueコンポーネントを作成します。

<template>
    <div>
        <a v-bind:href=$site.base>ホーム</a>  >  {{category}} > <a v-bind:href=$page.path>このページ</a>
    </div>
</template>
<script>
export default {
    computed: {category() {return this.$page.frontmatter.categories}}
}
</script>

# frontmatterにカテゴリを定義する

各ページ(mdファイル)のfrontmatter内にカテゴリを設定します。(ここでは1つのみ設定します)

---
title: Vuepressでxxxxxxx
===中略===
categories: Vuepress
---

# vueコンポーネントを設定

各ページ(mdファイル)のパンくずリストを出力したい場所にvueコンポーネントが稼働できるように設定します。

<Breadcrumbs />

これで表示できるようになるはずです。

# 一歩進めたいところ

パンくずリスト内のカテゴリにてリンクを貼り、そのカテゴリ一覧にアクセスできるようにしたいです。 今後に向けての課題です。