【Nuxt.js】 Nuxt/content を使用してみた
はじめに
最近 Nuxt/content を初めて使用してみたので、自身の記憶定着と備忘録のために記事として残しておきたいと思います。
(参考サイト)
nuxt/content公式
Nuxt/content とは
Nuxt.js のアプリ内で、マークダウン方式を使用できるようになります。
マークダウン方式を使用したいファイルは、contentディレクトリの直下に作成し、末尾に.mdをつけます。
ファイル構成
とある製品、またはサイトについてなどの説明書きをまとめたページを作成するとします。
├ content
│ └ manuals
│ ├ 001.md
│ └ 002.md
│
├ pages
│ └ manuals
│ ├ _slug.vue (詳細ページ)
│ └ index.vue (一覧ページ)
└ index.vue
使用方法
- 1. Nuxt/content をインストールする
$ npm install @nuxt/content
{
modules: [
'@nuxt/content'
],
:
}
- 2. pages/manuals/index.vue を作成する
ファイル構成でも簡単に表記していますが、pages/manuals/index.vue は、pages/manuals/_slug.vue へのリンクを載せた一覧ページになります。
<template>
<div>
<h1>一覧ページ</h1>
<ul>
<li v-for="manual in manuals" :key="manual.slug">
<!-- manual.slug はファイル名を表すので、リンクへ飛べる -->
<nuxt-link :to="'/manuals/' + manual.slug">
{{ manual.title }}
</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
export default {
async asyncData ({ $content }) {
// content/manuals 直下のファイルを全て取得
const manuals = await $content('manuals').fetch()
return { manuals }
}
</script>
- 3. pages/manuals/_slug.vue を作成する
この _slug.vue には、content/manuals/001.md や 002.md が読み込まれ,
各ページが表示されるようになります。
<template>
<div>
<h1>{{ manuals.title }}</h1>
<!-- nuxt-content で作成した、content/manuals 直下のファイルを読み込む -->
<nuxt-content :document="manuals" />
</div>
</template>
<script>
export default {
async asyncData ({ $content, params }) {
const manuals = await $content('manuals', params.slug || 'index').fetch()
return { manuals }
}
}
</script>
- 4. content/manuals フォルダを作成し、ファイルをいくつか作成する
content/manuals/manuals1.md を作成する
---
title: マニュアル1
---
## サブタイトル
マニュアル1の説明文です。
content/manuals/manuals2.md を作成する
---
title: マニュアル2
---
## サブタイトル
マニュアル2の説明文です。
まとめ
Nuxt/content の導入で、マークダウンを使用することにより箇条書きが使いやすい、簡単に Qiita の投稿ページのようなものが作成できる、という点は大きな利点だと感じました。ただし、スタイルを当ててデザインを調整することを考えると、HTML の方が融通が効くという印象でした。
あくまでも個人的な意見ですが、以下のようにまとめます。
-
Nuxt/content
- マークダウン記法が使用できる
- スタイルは一般的なタグに当てる(h1, p, ulなど)
- 同じタグのものに対するデザインの使い分けが効かない
- 比較的簡単かつシンプルなサイトには向いている
-
HTML
- スタイルは、各タグや各クラスに当てる
- 同じタグのものでも、個々にデザインを当てられる
- 凝ったデザインで作りに向いている
- スタイルは、各タグや各クラスに当てる
終わり
今回は以上になります。
ざっくりとした記事にはなってしまいましたが、公式ページには様々なオプションなども掲載されていますので、用途に合わせて使用すると良いと思います。
私自身まだまだ未熟ではありますが、同じ様な立場の方に少しでも参考になれば幸いです。
また、もし内容に誤りなどがございましたら、ご指摘いただけますと幸いです。
Author And Source
この問題について(【Nuxt.js】 Nuxt/content を使用してみた), 我々は、より多くの情報をここで見つけました https://qiita.com/__Wata16__/items/cbdeb310e6efd656dd77著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .