インターネット上で私たちの知識を書いて共有するためのブログを持つことは、可視性を高め、主題に関する権威として私たちの分野で私たちを知ってもらうために不可欠です. この記事では、記事ごとに動的なページを持つブログを作成する方法を説明します。 目次 前提条件 入門 ヌクストとは？ 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

Book a call with @terieyenike

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

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

長すぎる; 読むには

Join to Learn About Storytelling for Startups

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

HackerNoon Mobile

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

長すぎる; 読むには

People Mentioned

Companies Mentioned

Coin Mentioned

@terieyenike

関連ストーリー