Nuxt、Nuxt Content、および Cloudinary を使用して独自のブログを作成する方法 by@terieyenike
2,921 測定値

Nuxt、Nuxt Content、および Cloudinary を使用して独自のブログを作成する方法

2022/05/21
14
@terieyenike 2,921 測定値
tldt arrow
JA
Read on Terminal Reader

長すぎる; 読むには

この記事では、記事ごとに動的なページを持つブログを作成する方法を説明します。 Nuxt コンテンツ モジュールを使用して、API のようなインターフェイスを介してマークダウン、YAML、XML、さらには CSV ファイルにアクセスします。 Cloudinary を使用すると、あらゆるブラウザーやデバイスでデジタル エクスペリエンスをアップロード、作成、管理できます。このチュートリアルを完了するには、Cloudinary アカウント、JavaScript の知識、および Vue フレームワークに精通している必要があります。 Nuxt でブログを作成するには、フレームワークの基本的な知識と Vue に精通している必要があります。

People Mentioned

Mention Thumbnail

Companies Mentioned

Mention Thumbnail
Mention Thumbnail

Coin Mentioned

Mention Thumbnail
featured image - Nuxt、Nuxt Content、および Cloudinary を使用して独自のブログを作成する方法
Teri Eyenike HackerNoon profile picture

@terieyenike

Teri Eyenike

I am a frontend developer with a particular interest in...

もっと詳しく知る
LEARN MORE ABOUT @TERIEYENIKE'S EXPERTISE AND PLACE ON THE INTERNET.
react to story with heart

インターネット上で私たちの知識を書いて共有するためのブログを持つことは、可視性を高め、主題に関する権威として私たちの分野で私たちを知ってもらうために不可欠です.

この記事では、記事ごとに動的なページを持つブログを作成する方法を説明します。

目次

  • 前提条件
  • 入門
  • ヌクストとは?
  • Nuxt コンテンツとは?
  • クラウディナリーとは?
  • Nuxt でブログを作成する
  • ブログノートの作成
  • 投稿の取得
  • 動的ページの作成
  • 最終的な考え
  • もっと詳しく知る

先に進むには、 GitHubのコードベースとそのレポ、および参照用のデモを表示します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

  • クラウドアカウント。サインアップは無料です
  • JavaScript の基礎知識
  • Vue に慣れる

入門

開始するには、ターミナルを開いて次のコマンドを実行します。

 npx create-nuxt-app blog-for-developers

上記のコマンドは、プロジェクトのさまざまな側面を構成できるようにするコマンドライン インターフェイス (CLI) プロンプトを開始します。

image

すべてのファイルとフォルダでボイラープレートが設定されたので、次の場所でアクセス可能な開発サーバーを実行しましょう。

 http://localhost:3000
プロジェクト内。

 # change directory to project folder
cd blog-for-developers

# start the development environment
npm run dev

ヌクストとは?
NuxtJS はオープンソースの直感的な Vue フレームワークであり、ユーザー インターフェイスを構築できるため、Web 開発がシンプルかつ強力になります。

Nuxt コンテンツとは?
このプロジェクトの初期セットアップ中に、Nuxt コンテンツ モジュールを選択しました。このモジュールを使用すると、コードベースを Git ベースのヘッドレス CMS として使用して、API のようなインターフェイスを介してマークダウン、JSON、YAML、XML、さらには CSV ファイルにアクセスできます。このモジュールで

@nuxt/content
、それは注入します
$content
プロジェクト内のどこからでもアクセスできるように、プロジェクト内でグローバルにインスタンス化します。

クラウディナリーとは?
Cloudinary は、Web およびモバイル アプリケーション用のクラウド サービス画像およびビデオ管理ツールです。 Cloudinary を使用すると、あらゆるブラウザーやデバイスでデジタル エクスペリエンスをアップロード、作成、管理できます。

Nuxt でブログを作成する

Nuxt コンテンツを使用してマークダウンでブログのコンテンツを作成する前に、まずナビゲーション リンクといくつかのテキストを含むブログのランディング ページを作成しましょう。

フォント スタイルを追加
の中に

nuxt.config.js file
、お気に入りのフォントを head セクションに追加し、以下に示すように特定のフォント ファミリを使用できます。

上記のコード ブロックは、フォントを使用する CSS を記述するまでページに影響を与えません。

次に、次のコードを

pages/index.vue
これには、ナビゲーション リンクとホームページ上のテキストが含まれます。コンポーネントを取り外し、
 <Tutorial />
.

 <template>    <section class =" showcase ">      < header >        < h2 class =" logo ">          < nuxt - link to ="/"> ecosurf </ nuxt - link >        </ h2 >        < nav class =" nav desktop ">          < ul >            < li class =" nav__list ">              < nuxt - link to ="/ blogs "> Stories </ nuxt - link >            </ li >          </ ul >        </ nav >      </ header >      < video
        autoplay
        loop muted
        src =" https: // res . cloudinary . com / terieyenike / video / upload / v1651393236 / mixkit - tropical - island - landscape - view - 4692 - large_yanvml . mp4 "></ video >      < div class =" overlay "></ div >      < div class =" text ">        < h2 data - type =" uppercase " class =" stroke "> Never Stop </ h2 >        < h3 data - type =" uppercase "> Exploring The World </ h3 >        < p >          View of the tropical island landscape, from a hill with houses, palm
          trees and many trees, and in the distance the hills that surround the
          sea, on a sunny day .        </ p >      </ div >      < ul class =" social ">        < li >          < a href =" https: // twitter . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img
            alt =" twitter profile " src =" https: // i . ibb . co / Wnxq2Nq / twitter . png "/></ a >        </ li >        < li >          < a href =" https: // instagram . com / terieyenike " rel =" noopener noreferrer " target =" _blank ">< img
            alt =" instagram profile " src =" https: // i . ibb . co / ySwtH4B / instagram . png "/></ a >        </ li >      </ ul >    </ section > </ template >

上記のコード ブロックには、

 <video>
Cloudinary に保存されているビデオのソースと、ロード時にビデオをミュートする autoplay、loop、muted などの属性を使用します。 Cloudinary に保存されているメディアを取得するには、目的のビデオをメディア ライブラリ タブにアップロードします。その後、添付される URL をコピーします。
 src
<video>
.

image

また、ナビゲーション ヘッダーのリンクは、

 nuxt-link
家の両方へのコンポーネント
/
そしてその
/blogs
すべてのブログを表示するために作成するルート。

ページが CSS でスタイル設定されていることを確認するには、プロジェクトのルートにフォルダーを作成します。
 assets/styles/main.css
、およびこのから以下を含めます。

の中に
nuxt.config.js
ファイルを更新して、作成した CSS ファイルを次のように含めます。

 export default {      ...      css : [ '@/assets/styles/main.css' ],      ... }

ページは次のようになります。

image

ブログノートの作成

ブログ サイトを構築するには、コンテンツを表示してレンダリングする必要があります。

 /blogs
ページ。まず、
 content
ディレクトリ、次にすべてのマークダウン ファイルを含む blog ディレクトリ。すべてのコンテンツをマークダウンで記述することで、さまざまなプログラミング言語の構文強調表示を備えた見出し、リンク、コード ブロックなど、多くのマークダウン構文標準がサポートされます。

PS: Nuxt コンテンツはコンテンツ フォルダーを利用してすべてのファイルを保存します。

コンテンツ ディレクトリ内のマークダウン ファイルの例を次に示します。以下をファイルに追加します
content/blogs/egghead.md
.

 ---    title: Egghead    cover _image: https://res.cloudinary.com/terieyenike/image/upload/v1651446130/pexels-jeremy-bishop-8241100_ oklfpe.jpg    author: Teri Eyenike    description: All we need to do is open up our terminal and run the command npm install @nuxt/content. Once it's installed, you'll see that inside of our package.json, we see our Nuxt Content module. Next, to finalize the setup, let's go ahead and open up our nuxt.config.js, and let's go ahead and scroll down to the section that's labeled Modules.    date: May 2, 2021    publishOn: 2021-05-02T00:00:00    tags: ["learning", "platform"] ---    [ Egghead ]( https://www.egghead.io ) is a great platform for developers to enhance their skills! <!-- more content -->

マークダウン ファイルには、前付の開始時と終了時に三重ダッシュ構文で示される前付の概念を使用して、メタデータを追加する機能があります。メタデータとは、公開時やブログ コンテンツの抜粋など、読者に表示されるものです。その他のさまざまなプロパティを含めることができます。

PS: 前付の内部では、YAML 構文を使用しています。

投稿の取得
ブログページの投稿を取得するために、新しいルートを作成しましょう

pages
. blogs という名前のフォルダーを作成し、そこに
index.vue
ディレクトリ、blogs のファイル。

次に、次のコードをコピーして、
 pages/blogs/index.vue
ファイルを使用して、レンダリングされたマークダウン ファイルを表示します。

 // pages/blogs/index.vue
    <template>      < main >
        < header >
          < h2 class = "logo" >
            < nuxt-link to = "/" > ecosurf </ nuxt-link >
          </ h2 >
          < nav class = "nav desktop" >
            < ul >
              < li class = "nav__list" >
                < nuxt-link to = "/blogs" > Stories </ nuxt-link >
              </ li >
            </ ul >
          </ nav >
        </ header >
        < div class = "container section" >
          < div class = "container__grid" >
            < div v-for = "blog in blogs" :key = "blog.slug + blog.createdAt" class = "card" >
              < img :src = "blog.cover_image"
                   alt = "blog photographs" />
              < div class = "pad__card" >
                < div class = "author" >
                  < p class = "author__name" > {{ blog.author }} </ p > < span > | </ span >
                  < p > {{ blog.date }} </ p >
                </ div >
                < h2 class = "title" > {{ blog.title }} </ h2 >
                < p > {{                    blog.description.substring(0, 150)                  }}... </ p >
                < button >
                  < nuxt-link :to = "`/blogs/${blog.slug}`" > Read More </ nuxt-link >
                </ button >
              </ div >
            </ div >
          </ div >
        </ div >
      </ main >
    </template>    < script >
    export default {      async asyncData ( {$content} ) {        const blogs = await $content( "blogs" ).sortBy( "publishOn" , "desc" ).fetch()        return {          blogs        }      },      head ( ) {        return {          title : "Read interesting stories as a nomad" ,          meta : [            {              hid : 'description' ,              name : 'description' ,              content : 'Daily and juicy content as you learn, work, and relax. WFH'
            }          ]        }      }    }    </ script >
    < style scoped >
    header {      background : #111111 ;      position : unset;    }    .container {      width : 85% ;      max-width : 75rem ;      margin -inline: auto;    }    .section {      padding : 3em 0 ;    }    .container__grid {      display : grid;      gap: 2em ;      grid-template- columns : repeat (auto-fit, minmax ( 19rem , 1 fr));    }    .card {      background : #f0f7f4 ;      box-shadow : 0px 4px 3px rgba ( 0 , 0 , 0 , 0.1 );      border-radius : 5px ;    }    .card img {      object-fit : cover;      border-top-left-radius : 5px ;      border-top-right-radius : 5px ;      width : 100%
    }    .pad__card {      padding : 2em ;    }    .author {      display : flex;      align-items : center;    }    .author , .title {      margin-bottom : 1em ;    }    .author span {      margin : 0 0.3em ;    }    .author__name {      text-transform : capitalize;    }    button {      border : unset;      padding : 1em 2em ;      margin-top : 2em ;      background : #0D5159 ;      font-weight : 700 ;      cursor : pointer;    }    button a {      color : #fff ;    }    </ style >

上記のコード ブロックは次のことを行います。

  •  asyncData
    : ユーザーに対して個々のファイルを静的に生成するため、Nuxt からページを生成するために使用されます。私たちは
    $content
    ブログのメモが保存されるメソッド、
     sortBy()
    関数、および
    fetch
    方法。
  •  sortBy()
    : 2 つのパラメーターを受け取ります。
     publishOn
    (日付順に並べ替える) と、公開された最新のコンテンツに基づいてコンテンツをどのように表示するかに関する des 属性
  • 各ブログ記事を動的にするために、記事を URL に割り当てます。
     /blogs/
    を使用して [続きを読む] ボタンのブログ スラッグ
    <nuxt-link>
    成分。

投稿のレンダリング
コンテンツ ディレクトリからレンダリングされた投稿のスニペットを表示するための最後の手順は、v-for ディレクティブを使用してブログをループし、カード内の各記事をレンダリングすることです。

ブログページは次のようになります。

image

動的ページの作成

次に、各ブログ投稿のページを作成して、動的 URL ルートを作成しましょう。 Nuxt では、動的なページを作成するために、.vue ファイル名の前にアンダースコアを追加して、URL をハードコーディングしないようにしています。

次に、

 _slug.vue
blogs ディレクトリの下のファイルに次のコードを追加します。

 // pages/blogs/_slug.vue
    <template>      < main >
        < header >
          < h2 class = "logo" >
            < nuxt-link to = "/" > ecosurf </ nuxt-link >
          </ h2 >
          < nav class = "nav desktop" >
            < ul >
              < li class = "nav__list" >
                < nuxt-link to = "/blogs" > Stories </ nuxt-link >
              </ li >
            </ ul >
          </ nav >
        </ header >
        < div class = "container" >
          < div class = "return" >
            < nuxt-link to = "/" >
              < img alt = "back to home" src = "/home.png" />
            </ nuxt-link >
            < span > / </ span >
            < nuxt-link to = "/blogs" > Blog </ nuxt-link >
            < span > / </ span >
            < p > {{ note.title.substring(0, 15) }}... </ p >
          </ div >
          < section >
            < h1 > {{ note.title }} </ h1 >
            < nuxt-content :document = "note" cla />
          </ section >
        </ div >
      </ main >
    </template>    < script >
    export default {      async asyncData ( {$content, route} ) {        const note = await $content( `blogs/ ${route.params.slug} ` ).fetch()        return {          note        }      }    }    </ script >
    < style scoped >
    header {      background : #111111 ;      position : unset;    }    .container {      width : 85% ;      max-width : 75rem ;      margin -inline: auto;    }    section {      padding-bottom : 2em ;    }    .return {      display : flex;      margin : 1.5em 0 ;    }    .return img {      width : 20px ;      height : 20px ;    }    .return span {      margin : 0 1em ;    }    h1 {      margin-bottom : 1em
    }    </ style >

このコード ブロックは、次のことを行います。

  •  ${route.params.slug}
    : コンテンツを使用して、ルート パラメーターと実際のファイル名にマップされるスラッグを使用して、ディレクトリ blogs から特定のファイルをフェッチします。
  • マークダウン ファイルで定義された実際のコンテンツとしてマークダウンをレンダリングするには、nuxt-content コンポーネントを使用して、
     document
    全体で
    note
    物体
  • scoped
    : スタイル要素にスコープを定義して、スタイリングが特定のページにのみ適用されるようにします。

最終的な考え

ブログの作成は、自分の考えをより多くの聴衆と共有したい場合に最適です。Nuxt は、この記事でその方法を提供してくれました。堅牢なブログ Web サイトを確実に作成するために検討できる機能は他にもあります。

もっと詳しく知る

ライブデモを試す

関連ストーリー

L O A D I N G
. . . comments & more!
Hackernoon hq - po box 2206, edwards, colorado 81632, usa