eyecatch

作成日:2020-05-10 / 更新日:2020-05-17

カテゴリ一覧を追加してみたいと思ったので、いろいろ調べながら作ってみました。

# vuepressで作ってみた

こちらも参照ください。

# 設定

# コンポーネントの設定

.vuepress/components/CategoriesList.vueを作成します。

<ui>
  <div v-for="category in Object.keys(categories)" :key ="index"> 
  <h2 :id="category">                                                        
  <a href="#" class="header-anchor" aria-hidden="true">#</a>  
    {{category}}  
  </h2>

    <li v-for="page in categories[category]" :key="index">       
      <router-link :to="{ path: page.path}" class="title-link">      
        {{page.title}}
      </router-link>
    </li>
  </div>
</ui>
</template>


<script>
export default {
  computed: {
    categories() {
      let categories = {};                 
      for (let page of this.$site.pages) {
          const category = page.frontmatter.categories;  
          if (category in categories) {                  
            categories[category].push(page);             
          } else {
            categories[category] = [page];              
          }
      }
      return categories;     
    }
  }
};
</script>

# config.jsの設定(表示場所の指定)

.vuepress/config.jsにカテゴリ一覧を表示する場所を用意します。

navに設定するならこんな感じかと思います。

一部抜粋です。
  themeConfig: {
    logo: '/img/favicon.png',
    nav: [
      { text: "Tag", link: "/tags/" }, 
      { text: "About", link: "/about/" }, 
      { text: "Categories", link: "/categories/" },  ←追加

    ],
    sidebar: "auto",
    sidebarDepth: 2,
    displayAllHeaders: true,
  },

# mdファイルの作成

.vuepressと同じ並びにcategorinesというフォルダを用意します。先ほどconfig.jsに記載したフォルダです。 そのフォルダ内にindex.mdファイルを用意して

<CatagoriesList />

を記載すれば完了です。

# 参考サイト

hene せろとにんぱわー.