インターネット上で私たちの知識を書いて共有するためのブログを持つことは、可視性を高め、主題に関する権威として私たちの分野で私たちを知ってもらうために不可欠です. この記事では、記事ごとに動的なページを持つブログを作成する方法を説明します。 目次 前提条件 入門 ヌクストとは？  Nuxt コンテンツとは? クラウディナリーとは？  Nuxt でブログを作成する ブログノートの作成 投稿の取得 動的ページの作成 最終的な考え もっと詳しく知る 先に進むには、  のコードベースとそのレポ、および参照用の を表示します。 GitHub デモ 前提条件 このチュートリアルを完了するには、次のものが必要です。 クラウドアカウント。 は無料です サインアップ JavaScript の基礎知識 Vue に慣れる 入門 開始するには、ターミナルを開いて次のコマンドを実行します。   npx create-nuxt-app blog-for-developers 上記のコマンドは、プロジェクトのさまざまな側面を構成できるようにするコマンドライン インターフェイス (CLI) プロンプトを開始します。  すべてのファイルとフォルダでボイラープレートが設定されたので、次の場所でアクセス可能な開発サーバーを実行しましょう。 プロジェクト内。   http://localhost:3000   # change directory to project folder  cd blog-for-developers  # start the development environment  npm run dev  NuxtJS はオープンソースの直感的な Vue フレームワークであり、ユーザー インターフェイスを構築できるため、Web 開発がシンプルかつ強力になります。 ヌクストとは？   このプロジェクトの初期セットアップ中に、Nuxt コンテンツ モジュールを選択しました。このモジュールを使用すると、コードベースを Git ベースのヘッドレス CMS として使用して、API のようなインターフェイスを介してマークダウン、JSON、YAML、XML、さらには CSV ファイルにアクセスできます。このモジュールで  、それは注入します プロジェクト内のどこからでもアクセスできるように、プロジェクト内でグローバルにインスタンス化します。 Nuxt コンテンツとは? @nuxt/content $content  Cloudinary は、Web およびモバイル アプリケーション用のクラウド サービス画像およびビデオ管理ツールです。 Cloudinary を使用すると、あらゆるブラウザーやデバイスでデジタル エクスペリエンスをアップロード、作成、管理できます。 クラウディナリーとは？   Nuxt でブログを作成する Nuxt コンテンツを使用してマークダウンでブログのコンテンツを作成する前に、まずナビゲーション リンクといくつかのテキストを含むブログのランディング ページを作成しましょう。 の中に  、お気に入りのフォントを head セクションに追加し、以下に示すように特定のフォント ファミリを使用できます。 フォント スタイルを追加 nuxt.config.js file 上記のコード ブロックは、フォントを使用する 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 > 上記のコード ブロックには、  Cloudinary に保存されているビデオのソースと、ロード時にビデオをミュートする autoplay、loop、muted などの属性を使用します。 Cloudinary に保存されているメディアを取得するには、目的のビデオをメディア ライブラリ タブにアップロードします。その後、添付される URL をコピーします。 の  .    <video>   src <video> また、ナビゲーション ヘッダーのリンクは、 家の両方へのコンポーネント そしてその すべてのブログを表示するために作成するルート。 ページが CSS でスタイル設定されていることを確認するには、プロジェクトのルートにフォルダーを作成します。  、およびこの から以下を含めます。 の中に ファイルを更新して、作成した CSS ファイルを次のように含めます。    nuxt-link / /blogs   assets/styles/main.css 要点 nuxt.config.js         ...             ... } export   default  {        css : [ '@/assets/styles/main.css' ], ページは次のようになります。  ブログノートの作成 ブログ サイトを構築するには、コンテンツを表示してレンダリングする必要があります。 ページ。まず、 ディレクトリ、次にすべてのマークダウン ファイルを含む blog ディレクトリ。すべてのコンテンツをマークダウンで記述することで、さまざまなプログラミング言語の構文強調表示を備えた見出し、リンク、コード ブロックなど、多くのマークダウン構文標準がサポートされます。  PS: Nuxt コンテンツはコンテンツ フォルダーを利用してすべてのファイルを保存します。 コンテンツ ディレクトリ内のマークダウン ファイルの例を次に示します。以下をファイルに追加します  .    /blogs   content content/blogs/egghead.md       title: Egghead         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"] ---         ---     cover _image: https://res.cloudinary.com/terieyenike/image/upload/v1651446130/pexels-jeremy-bishop-8241100_ oklfpe.jpg     [ Egghead ]( https://www.egghead.io ) is a great platform for developers to enhance their skills!   マークダウン ファイルには、前付の開始時と終了時に三重ダッシュ構文で示される前付の概念を使用して、メタデータを追加する機能があります。メタデータとは、公開時やブログ コンテンツの抜粋など、読者に表示されるものです。その他のさまざまなプロパティを含めることができます。  PS: 前付の内部では、YAML 構文を使用しています。 ブログページの投稿を取得するために、新しいルートを作成しましょう  . blogs という名前のフォルダーを作成し、そこに ディレクトリ、blogs のファイル。 次に、次のコードをコピーして、 ファイルを使用して、レンダリングされたマークダウン ファイルを表示します。  投稿の取得 pages index.vue   pages/blogs/index.vue       <template>                                                                                                                                                                                                                                                                             </template>                                                                                                                                                                                                                                         // pages/blogs/index.vue 
        < 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 > 
      < 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 > 上記のコード ブロックは次のことを行います。  : ユーザーに対して個々のファイルを静的に生成するため、Nuxt からページを生成するために使用されます。私たちは ブログのメモが保存されるメソッド、 関数、および 方法。   asyncData $content   sortBy() fetch  : 2 つのパラメーターを受け取ります。  (日付順に並べ替える) と、公開された最新のコンテンツに基づいてコンテンツをどのように表示するかに関する des 属性   sortBy()   publishOn 各ブログ記事を動的にするために、記事を URL に割り当てます。 を使用して [続きを読む] ボタンのブログ スラッグ 成分。   /blogs/ <nuxt-link> コンテンツ ディレクトリからレンダリングされた投稿のスニペットを表示するための最後の手順は、v-for ディレクティブを使用してブログをループし、カード内の各記事をレンダリングすることです。 投稿のレンダリング ブログページは次のようになります。  動的ページの作成 次に、各ブログ投稿のページを作成して、動的 URL ルートを作成しましょう。 Nuxt では、動的なページを作成するために、.vue ファイル名の前にアンダースコアを追加して、URL をハードコーディングしないようにしています。 次に、  blogs ディレクトリの下のファイルに次のコードを追加します。    _slug.vue       <template>                                                                                                                                                                                                                               </template>                                                                                           // pages/blogs/_slug.vue 
        < 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 > 
      < 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 > このコード ブロックは、次のことを行います。  : コンテンツを使用して、ルート パラメーターと実際のファイル名にマップされるスラッグを使用して、ディレクトリ blogs から特定のファイルをフェッチします。   ${route.params.slug} マークダウン ファイルで定義された実際のコンテンツとしてマークダウンをレンダリングするには、nuxt-content コンポーネントを使用して、 全体で 物体   document note  : スタイル要素にスコープを定義して、スタイリングが特定のページにのみ適用されるようにします。 scoped 最終的な考え ブログの作成は、自分の考えをより多くの聴衆と共有したい場合に最適です。Nuxt は、この記事でその方法を提供してくれました。堅牢なブログ Web サイトを確実に作成するために検討できる機能は他にもあります。 もっと詳しく知る Nuxt コンテンツ Nuxt のドキュメント ライブ 試す デモを

Dash

Fetch

Instagram

NuxtJS

Target

Twitter

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

このオーディオは、ストーリーの元の言語で制作されています。

長すぎる; 読むには

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

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

About Author

コメント

ラベル

この記事は

Related Stories

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

HackerNoon ライティングコンテストで優勝したいですか? #crypto-api コンテスト優勝者のおすすめはこちら

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

フォーラムからフィードへ: ソーシャルメディアアルゴリズムがデジタルインタラクションを形作る仕組み

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps