Nuxt Content × SSG で作る静的ブログ。２：基本的な記事項目のレンダリングと静的書き出し

├── content
│   ├── articles
│   │   ├── aaaaaa.md

├── pages
│   ├── articles
│   　   ├── _slug.vue

<template>
  <article>
    <nuxt-content :document="content" />
  </article>
</template>
<scirpt>
export default {
  async asyncData({ $content, params,redirect }) {
    const content = await $content('articles').where({path:"/articles/"+params.slug}).fetch();
    if(content.length > 0){
      return {
        content:content[0],
      }
    }else{
      redirect('/articles')
    }
  }
}
</script>

![image alt text](/image/sample.jpg)

// パターン１
![image alt text](~/asset/sample.jpg)

// パターン２
![image alt text](/asset/sample.jpg)

// パターン３
![image alt text](require(~/asset/sample.jpg))

<template>
  <img :src="imgSrc()" :alt="alt"/>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true
    },
    alt: {
      type: String,
    },
  },
  methods: {
    imgSrc() {
      try {
        return require(`~/assets/image/${this.src}`)
      } catch (error) {
        return null
      }
    }
  },
}
</script>

以下のようにします。
<imageRender src="sample.jpg"/>

<div class="alert alert-warning">
このアラートもこのようにHTMLをマークダウンに書いています！
</div>

npm install prism-themes

content: {
    markdown: {
      prism: {
        theme: 'prism-themes/themes/prism-material-oceanic.css'
      }
    }
  },

toc:Array[8]
    0:Object
        depth:2
        id:"サイトのルーティングを考えてpagesの構成を設定する"
        text:"サイトのルーティングを考えてpagesの構成を設定する"
    1:Object

<template>
  <div class="p-main-container">
    <div class="p-main-wrapper">
        //目次のコンポーネント
        <toc :toc="content.toc"/>

        //メインのエリア
        <div id="l-center-area">

            //サムネイル
            <img v-if="thumbnail" class="c-article-thumbnail" :src="thumbnail" :alt="content.title">

            //タグとカテゴリーのバッチ
            <div class="p-article-badge p-badge-container">
                <nuxt-link class="c-tag-badge u-blue" v-for="(c,index) in content.category" :key="'category-'+index" :to="'/category/'+c">
                    <span>{{$store.getters['getCategoryTextBySlug'](c)}}</span>
                </nuxt-link>
                <nuxt-link class="c-tag-badge" v-for="(t,index) in content.tag" :key="'tag-'+index" :to="'/tag/'+t">
                    <span>{{$store.getters['getTagTextBySlug'](t)}}</span>
                </nuxt-link>
            </div>

            <h1 class="c-article-header">{{ content.title }}</h1>

            // 更新一時など
            <div class="p-articler-date">
                <span class="c-date"><fa-icon :icon="['fa', 'history']"/>{{ updateAt }}</span>
                <span class="c-date"><fa-icon :icon="['far', 'clock']"/>{{ createdAt }}</span>
            </div>

            // マークダウンのレンダリング箇所
            <nuxt-content :document="content" />
        </div>

        //サイドメニュー
        <sidemenu/>
    </div>
  </div>
</template>

generate: {
    async routes () {
      const { $content } = require('@nuxt/content')
      const files = await $content({ deep: true }).only(['path']).fetch()
      return files.map(file => file.path === '/index' ? '/' : file.path);
    }
},

npm run generate

npm run start

├── content
│   ├── articles
│   │   ├── sample.md
│
├── pages
│   ├── articles
│   　   ├── _slug.vue