nuxt/contentでブログを作る

---
id: 264
title: nuxt/contentでブログを作る
created_at: 2020-12-12
updated_at: 2020-12-17
isDraft: false
tags: Nuxtjs,Vuejs,TypeScript,JavaScript
top_image: /icons/nuxt.svg
icon: /icons/nuxt.svg
---

## 本文

咳をしても一人

> yarn create nuxt-app myblog

。。。

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in myblog

# プロジェクト名
? Project name: myblog

# ここでTypeScriptを選べる
? Programming language: 
  JavaScript
> TypeScript

# パッケージマネージャ
? Package manager: (Use arrow keys)
> Yarn
  Npm

# UIフレームワーク
? UI framework:  
  None
  Ant Design Vue 
  Bootstrap Vue  
  Buefy
> Bulma
  Chakra UI      
  Element        
  Framevuerk     
  iView
  Tachyons       
  Tailwind CSS   
  Vuesax
  Vuetify.js

# ここで@nuxt/contentをインストール出来る
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Axios
 ( ) Progressive Web App (PWA)
 (*) Content

# リントツール
? Linting tools:      
 (*) ESLint
>(*) Prettier
 ( ) Lint staged files
 ( ) StyleLint        
 ( ) Commitlint  

# テストツール
? Testing framework: 
  None
> Jest
  AVA
  WebdriverIO 

# レンダリングモード
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
  Single Page App

# デプロイターゲット
? Deployment target:
  Server (Node.js hosting)
> Static (Static/JAMStack hosting) 

? Development tools:
>(*) jsconfig.json (Recommended for VS Code if you're not using typescript)
 ( ) Semantic Pull Requests
 ( ) Dependabot (For auto-updating dependencies, GitHub only)

# CIツール
? Continuous integration:      
  None
> GitHub Actions (GitHub only) 

? What is your GitHub username? (suzuroku)
? Version control system: (Use arrow keys)
> Git
  None

$ cd myblog
$ yarn dev

# dist/ に静的サイトのページが作る
$ yarn run generate

# dist/ のページを確認する
$ yarn run start

├─content # マークダウンを置くところ。
|  ├─ about.md
│  └─posts
│     ├─post1.md
│     └─post2.md
├─pages # そのパスの処理
|  ├─_slug.vue
│  └─posts
│     ├─index.vue # /posts/ で一覧を表示する
│     └─_slug.vue # /posts/{_slug}　パスを引数にとる

---
title: nuxt/contentでブログを作る
created_at: 2020-12-12
tags: Nuxtjs,Vuejs,TypeScript,JavaScript
top_image: /icons/nuxt.svg
icon: /icons/nuxt.svg
---

## 本文

咳をしても一人

<template>
  <article class="article content section-article">
    // 記事のヘッダー部分の例
    <section class="header">
      <h1>{{ post.title }}</h1>
      <div class="media">
        <div class="media-left">
          <figure class="image is-48x48">
            <img :src="post.top_image" />
          </figure>
        </div>
        <div class="media-content">
          <div class="tags">
            <i class="mdi mdi-tag" /> 
            <span v-for="tag in post.tags.split(',')" :key="tag">
              <a :href="'/tags/' + tag" class="tag">{{ tag }}</a>
            </span>
          </div>
        </div>
        <div class="media-right">
          <i class="mdi mdi-update" /> 
          <time v-html="post.updated_at.split('T')[0]"></time>
        </div>
      </div>
    </section>
    // 記事の本文
    <NuxtContent :document="post" />
  </article>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  async asyncData({ $content, params }) {
    // URIから変数を取得 /posts/{_slug}
    const slug = params.slug
    return {
      // content/posts/{_slug}.mdのマークダウンを取得
      post: await $content('posts/' + slug).fetch()
    }
  },
})
</script>

// クエリのイメージ
list = {
  [{ title: 'article1', tags: 'Nuxtjs,ブログ'}],
  [{ title: 'article2', tags: 'Python'}],
  [{ title: 'article3', tags: '数式,KaTeX'}],
};

$content(list)
  .sortBy(title, asc)
  .limit(2)
// titleで昇順に２件取得する
$content(list)
  .only('tags')
  .where({ 'tags': { $contains: [ 'Nuxtjs' ] } })
// tagsに絞ってtagsの文字列に'Nuxtjs'を含むオブジェクトをフィルタリングする。

yarn add --dev @nuxtjs/google-analytics

googleAnalytics: {
    id: process.env.GOOGLE_ANALYTICS_ID
  },

$ yarn add @nuxtjs/google-adsense

modules: [
    ['@nuxtjs/google-adsense', {
      id: process.env.GOOGLE_ADSENSE_ID
    }]
 ]

<template>
  <div>
    <adsbygoogle
    :ad-slot="'xxxxxxxx'"
    :ad-style="{ display: 'block' }"
    :ad-format="'auto'"
    />
  </div>
</template>

import { mount } from '@vue/test-utils'
import Logo from '@/components/Logo.vue'

describe('Logo', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Logo)
    expect(wrapper.vm).toBeTruthy()
  })
})

$ yarn test
yarn run v1.22.5
$ jest
 PASS  test/Logo.spec.js
  Logo
    √ is a Vue instance (15 ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-----------|---------|----------|---------|---------|-------------------
All files  |       0 |      100 |     100 |       0 |
 index.vue |       0 |      100 |     100 |       0 | 29
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.69 s
Ran all test suites.
Done in 5.96s.