nuxt/contentでBlog入門
November 24, 2020
目次
nuxt/contextとは？
nuxt/contentモジュールを使ってNuxtJSアプリケーションを強化します。content/ディレクトリに書き込むことで、MongoDBのようなAPIを使ってMarkdown、JSON、YAML、XML、CSVファイルを取得します。これはGitベースのヘッドレスCMSとして動作します。
特徴として以下があり、豊富な機能がそろってる
- 開発モードでのビックリするほど高速なホットリロード
- Markdownの中でVueコンポーネントを利用できます
- 全文検索
- 静的サイト生成(SSG)のサポート
nuxt generate- 強力なクエリビルダーAPI (MongoDBライク)
- PrismJSを利用した、Markdown内コードブロックのシンタックスハイライト
- 目次の自動生成
- Markdown, CSV, YAML, JSON(5)、XMLを適切に処理します
- hooksによる拡張
環境
Nuxt.js + TypeScript + tailwindで構成
| ライブラリ | バージョン | 備考 |
|---|---|---|
| Nuxt.js | 2.14.7 | |
| TypeScript | 4.0.5 | nuxt-appで生成時に選択 |
| tailwind | 1.22.0 | nuxt-appで生成時に選択 |
| yarn | 1.22.0 | |
| create-nuxt-app | 3.4.0 |
インストール
新規でNuxt生成から始める場合
yarn create nuxt-app <project-name>
e.g.
yarn create nuxt-app nuxt-content-blog
...
yarn create v1.22.0
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-nuxt-app@3.4.0" with binaries:
- create-nuxt-app
create-nuxt-app v3.4.0
✨ Generating Nuxt.js project in nuxt-content-blog
? Project name: nuxt-content-blog
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Tailwind CSS
? Nuxt.js modules: Content
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git
...
yarn run v1.22.0
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
✨ Done in 2.58s.
🎉 Successfully created project nuxt-content-blog
To get started:
cd nuxt-content-blog
yarn dev
To build & start for production:
cd nuxt-content-blog
yarn build
yarn start
To test:
cd nuxt-content-blog
yarn test
For TypeScript users.
See : https://typescript.nuxtjs.org/cookbook/components/
✨ Done in 483.28s.生成が完了すると以下のの構成が作成される
初期ディレクトリ構成
.
├── assets
│ └── css
├── components
│ └── Logo.vue
├── content
│ └── hello.md
├── layouts
│ └── default.vue
├── middleware
├── pages
│ └── index.vue
├── plugins
├── static
│ └── favicon.ico
├── store
├── test
│ └── Logo.spec.js
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── nuxt.config.js
├── tsconfig.json
├── package.json
├── jest.config.js
└── yarn.lock※README.mdは削除、順番は見やすいように変更している
既存のNuxtにインストールする場合
@nuxt/contextのインストールをする
yarn add @nuxt/content設定する
つづいて、TypeScriptの利用設定等を行う
新規でNuxt生成から始める場合
tsconfig.jsのtypesに@nuxt/contentに追加
"types": [
"@nuxt/content" //追加
]nuxt.config.jsは、既に設定済みの為、設定不要
既存のNuxtにインストールする場合
tsconfig.jsのtypesに@nuxt/contentに追加
"types": [
"@nuxt/content" //追加
]nuxt.config.jsのmodulesに @nuxt/contentと追加する
export default {
...
modules: ['@nuxt/content'], //追加
...
}記事を表示する
インストール時に生成されている./content/hello.mdを表示するの仕方
Pageの設定
記事を表示するには、$contentで記事の取得を行い、<nuxt-content />コンポーネントで表示する
まずは、pages/_slug.vueを作成する
pages
└── _slug.vue //追加この場合、http://locahost:3000/{_slug}でアクセスした場合に表示される
_slugは、markdownのファイル名を指定する
今回は、hello.mdを表示するのでURLは、http://locahost:3000/helloとなる
pages/_slug.vue を実装する
<template>
<article>
<h1 class="text-4xl">{{ content.title }}</h1>
<nuxt-content :document="content" />
</article>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
async asyncData({ $content, params }) {
const content = await $content(params.slug).fetch()
return {
content
}
}
})
</script>- 記事の取得
asyncDataを使用して、$content(params.slug).fetch()を実行params.slugの記事(今回はhelloが入る)を取得する - 記事の表示
<nut-context>コンポーネントにasyncDateで取得したcontentをdocumentPropに渡すことで 記事が表示される また、titleもcontent.titleで表示可能。 その他、以下のパラメータが利用可能
{
body: Object
title: String
description: String
dir: String
extension: String
path: String
slug: String
toc: Array
createdAt: DateTime
updatedAt: DateTime
}ここまで設定したら、yarn devで起動して、http://locahost:3000/helloにアクセスすることで表示される。
記事を書く
今回は、nuxt/contentでBlog入門という記事を書いて見る
nuxt_contentでBlog入門.mdを作成する
/は使用出来ないのでnuxt_contentでBlog入門.mdでcontentディレクトリ配下に作成
content
├── hello.md
└── nuxt_contentでBlog入門.md //追加コンテンツを書く(MarkDown)
フロントマターを先頭に追加する必要がある
---の間にYAML形式でtitleなどを記載する
e.g.
---
title: nuxt/contentでBlog入門
description: nuxt/contentの設定とTipsを紹介
createdAt: 2020-11-24
tags:
- nuxt
- nuxt/content
- Vue.js
---その後、MarkDownで記述すればOK その他、vueコンポーネントを使用することを可能。詳しくは以下参照
記事の一覧を表示する
トップページ(pages/index.vue)に記事の一覧を取得し表示する方法
<template>
<div class="container">
<div class="w-full">
<h1 class="text-6xl uppercase">Article</h1>
<ul v-for="article in articles" :key="article.path">
<li>
<nuxt-link class="text-xl cursor-pointer" :to="article.path">{{
article.title
}}</nuxt-link>
</li>
</ul>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
async asyncData({ $content }) {
const articles = await $content().sortBy('createdAt', 'desc').fetch()
return {
articles,
}
},
})
</script>
<style>
...//省略
</style>上記の pages/_slug.vue を実装する と同様に$content().fetch()を使用して取得する。
一覧取得の為、$contentに引数不要。
また、.sortBy('createdAt', 'desc')を追加して最新の作成日順で取得している。
(※markdownにcreatedAtの記述がない場合ファイルの作成日が取得される)
そのほか
ブラウザから記事の編集が可能
開発モードに限り、記事をダブルクリックすることで編集モードになり記事に編集が可能。 もちろんファイルに反映される。
記事(.md)ファイルをディレクトリを変更したい。
記事(.md)ファイルは、./contentが記事取得先のデフォルトフォルダになる
もし記事フィアルを./content/articlesにしたい場合、$content('articles',params.slug).fetch()とすることで取得することが可能。
また、記事ファイルのデフォルトフォルダを変更した場合は、nuxt.config.jsに以下を追加する
export default {
content: {
dir: 'articles' // contentからarticlesに変更される
}
}その他にも色々設定可能。以下参照
まとめ
Nuxtを使ったことがあれば簡単に設定が出来て便利。
全文検索など便利な機能が備わってるのもいい！
このブログは、Gatsby.jsで書いてますが色々覚えないといけないので(学習コスト高)簡単に始めるならnuxt/contentはおすすめ。
何か、nuxt/contentでブログ書きたいなー。
