소개

microCMS 공식 기사를 참고로 nuxt로 만든 웹사이트에 microCMS를 도입.
htps : // 미 c로 cms. 이오/bぉg/미c로 cms-없는 xt이면 ms한 ck-bぉg/

이것을 모방하여 쓴 일시가 T-Z 형식이 되어 버렸습니다만, 거기에 day.js를 넣으면 자유롭게 일시 표시 할 수 있었으므로, 그 비망록.

간단하게 뉴스 일람을 만들어 간다!

날짜와 시간이 T-Z 형식이되는 문제

microCMS에서 날짜와 시간을 추가. 필드 ID를 date로 설정했습니다.


그 때 위에 언급된 기사 같이 nuxt에 묘사. 날짜 {{content.date}}를 넣었습니다.

pages/index.vue

<template>
  <ul>
    <li v-for="content in contents" :key="content.id">
      <nuxt-link :to="`/${content.id}`">
　　　　{{content.date}}
        {{ content.title }}
      </nuxt-link>
    </li>
  </ul>
</template>

<script>
import axios from 'axios'
export default {
  async asyncData() {
    const { data } = await axios.get(
      // your-service-id部分は自分のサービスidに置き換えてください
      'https://your-service-id.microcms.io/api/v1/blog',
      {
        // your-api-key部分は自分のapi-keyに置き換えてください
        headers: { 'X-API-KEY': 'your-api-key' }
      }
    )
    return data
  }
}
</script>

하지만 이대로



이런 식으로 날짜가 T-Z 형식의 문자열이되어 버립니다.

와- 곤란한 이걸 모르겠어.

그래서 다음이 해결책입니다.

day.js 도입 【해결 방법】

day.js는 날짜와 시간을 표시 조작할 수 있는 라이브러리.

이것을 설치

npm install dayjs --save

plugin 폴더 아래에 day.js 만들기

plugin/day.js

import dayjs from 'dayjs'

export default ({ app }, inject) => {
   inject('dayjs', ((string) => dayjs(string)))
}

nuxt.config.js의 plugin 부분에 추가

nuxt.config.js

plugins: [
    '~/plugins/day.js',
  ],

그렇다면 inde.vue는 이렇게! !

pages/index.vue

<template>
<div class="p-10">
  <ul>
    <li v-for="content in contents" :key="content.id">
      <nuxt-link :to="`/${content.id}`">

<p v-text="$dayjs(content.date).locale('ja').format('YYYY/MM/DD')" />
        {{ content.title }}
      </nuxt-link>
    </li>
  </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  async asyncData() {
    const { data } = await axios.get(
           // your-service-id部分は自分のサービスidに置き換えてください
      'https://your-service-id.microcms.io/api/v1/blog',
      {
        // your-api-key部分は自分のapi-keyに置き換えてください
        headers: { 'X-API-KEY': 'your-api-key' }
      }
    )
    return data
  },
    layout: 'home',



}
</script>

기사 상세 페이지도 작성합니다.

pages/_slug/index.vue

<template>
  <main class="main">
    <h1 class="date" ><p v-text="$dayjs(date).locale('ja').format('YYYY/MM/DD')" /></h1>
    <h1 class="title" >{{title}}</h1>
    <div class="post" v-html="body"></div>
  </main>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData({ params }) {
    const { data } = await axios.get(
      `https://your-service-id.microcms.io/api/v1/blog/${params.slug}`,
      {
        headers: { 'X-API-KEY': 'your-api-key' }
      }
    )
    return data
  }
}
</script>

이것으로! 날짜를 year/month/day 형태로 다시 작성했습니다! 와우!



여기에서는 year/month/day의 형태로 하고 있습니다만, 그 외 포맷은 이하등 참고로.
htps : //이다 y. js. 오 rg / cs / 엔 / ぢ sp y / fu rma t
htps //w w.ぇぼぴぇl. 네 t / 그럼 sc 리 pt / 1460. HTML

데모 사이트는 이것입니다.

이것을 사용하여 만든 뉴스 페이지 데모입니다.

데모 사이트
htps : // 헛 py고 ld베르그 74d3 아1. 네 tぃfy. 아 p/네 ws/

(github의 소스 코드도 공개하려고 생각했지만 API key 숨기고 다시 올리는 건강이 지금은 없다)

그건 그렇고,이 데모, 프레임 워크는 tailwindcss를 사용합니다.

그리고는 microCMS로 기사를 관리해 가면 좋기 때문에 조금 편하다.