ポートフォリオサイトを作ろう!【第5回ファイル作成編】
※この記事について
現在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」ページが作成されています。
共通部分『ナビゲーションメニュー』の作成
次にナビゲーションメニューを作成します。こちらは全画面共通部分となります。
共通部分とは、「サイトタイトル」「ヘッダー」や「フッター」等全画面に共通して表示する部分です。ここら辺は各ページで設定するのは手間なので、1ファイルで対応します。
今回は「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ページを作っていくかをしたいと思います!
※連載記事一覧はこちら。
読んでいただきありがとうございます。