※この記事について
現在Nuxt+Netlify+Contentfulでポートフォリオサイトを構築しており、その連載記事となります。
連載記事はマガジンにまとめています。こちらをご覧ください。

ポートフォリオサイトを作ろう。今回で第5回目です。
今回は前回の設計を元に、ファイルを作っていこうと思います。一旦必要な画面のおさらいです。

TOP
- about
- work (contentfulで書いた記事を一覧表示)
- work detail (contentful で書いた記事を表示)
- note (noteからRSSで一覧取得)
- contact

とりあえず今回は、「TOP」と「about」を作りたいと思います。
それではやっていきましょう。

default.vueの編集

まずは「layouts/default.vue」を編集します。

下記のように記載します。

<template>
 <div>
   <header>
     <h1 class="title">ポートフォリオサイト</h1>
   </header>
   <main class="container">
     <nuxt/>
   </main>
 </div>
</template>

<style>
html {
 font-family: "Source Sans Pro", 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
 font-size: 16px;
}
h1, h2, h3 {
 font-weight: normal;
}
.title {
 color: #35495e;
 margin: 100px 0 30px;
 text-align: center;
}
.container {
 width: 80%;
 margin: 0 auto;
}
</style>

aboutページの作成

aboutoページを作成します。「pages」ディレクトリ配下に「about.vue」というファイルを作成し、下記のように記載します。

<template>
 <section class=“content”>
   <h1 class="content_title">
     About
   </h1>
   <vue-markdown>
   # 自己紹介
   マークダウン で自己紹介を書いていきます。
   - できること
       - HTML
       - CSS
       - PHP
       - Vue.js
       - Nuxt.js  
         
   - 好きなもの
       - カレー
   Web制作をしています。
   </vue-markdown>
 </section>
</template>
<style scoped>
.content {
 max-width: 800px;
 margin: 0 auto;
}
.content_title {
 font-size: 2.0rem;
 font-weight: bolder;
}
.content_date {
 font-size: 1.0rem;
 color: rgb(57, 72, 85);
 text-align: right;
}
</style>
<script>
import VueMarkdown from 'vue-markdown'
export default {
  transition: 'slide-left',
  components: {
    VueMarkdown
  }
}
</script>

ファイルを保存し、「/about」にアクセスすると下記のよう画面が表示されます。

※「pages」ディレクトリに配置するとページが作成されます。今回は「about.vue」ファイルを作成したので、「/about」ページが作成されています。

共通部分『ナビゲーションメニュー』の作成

次にナビゲーションメニューを作成します。こちらは全画面共通部分となります。
共通部分とは、「サイトタイトル」「ヘッダー」や「フッター」等全画面に共通して表示する部分です。ここら辺は各ページで設定するのは手間なので、１ファイルで対応します。

今回は「components/Navbar.vue」ファイルを作成します。下記のように記載します。

<template>
 <nav class="navbar is-white" role="navigation" aria-label="main navigation">
   <header>
     <h1 class="title">ポートフォリオサイト</h1>
   </header>
   <div class="navbar-menu" id="navMenu">
     <div class="navbar-start">
       <nuxt-link to="/about" class="navbar-item">about</nuxt-link>
       <nuxt-link to="/work" class="navbar-item">Work</nuxt-link>
       <nuxt-link to="/note" class="navbar-item">note</nuxt-link>
       <nuxt-link to="/contact" class="navbar-item">contact</nuxt-link>
     </div>
   </div><!-- navbar-menu END -->
 </nav>
</template>

次に「layouts/default.vue」を修正します。default.vue に、今回作成したNavbar.vueを表示させるようにします。下記のように修正します。

<template>
 <div>
   <navbar/>
   <main class="container">
     <nuxt/>
   </main>
 </div>
</template>
<script>
import Navbar from '~/components/Navbar.vue'
export default {
 components: {
   Navbar
 }
}
</script>
<style>
html {
 font-family: "Source Sans Pro", 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
 font-size: 16px;
}
h1, h2, h3 {
 font-weight: normal;
}
.title {
 color: #35495e;
 margin: 100px 0 30px;
 text-align: center;
}
.container {
 width: 80%;
 margin: 0 auto;
}
</style>

修正点としては、
・<template>内に「<navbar/>」を追記します。
・<script>〜</script>を追記します。

すると下記のようなデザインになります。

メニューが表示されました。

と、今回はここまでです。次回はデザインを詰めるか、workページを作っていくかをしたいと思います！

※連載記事一覧はこちら。