Blog

Intro

Welcome to the guide for the blog.In RapidLaunch's blog we use V1 NuxtContent library.

For more information visit V2 Nuxt Content

Our Blog comes fully configured to start writing content, if you want to make changes follow this guide

Writing an article

Our blog use markdown to write post, for more information visit Markdown - Nuxt Content

  • Let's start creating our folder structure. For more information visit Directories - Nuxt Content
    • In the folder @/content let's create our folder structure, for example @/content/blog/articles
    • In our folder @/articles let's create our first markdown file, for example @/articles/my-first-article.md
    • In our markdown file, in this case @/my-first-article.md, let's create our file structure as the following example:
// header start
---
id: 1
title: 'Blog Content Example 1 '
description: 'lorem ipsum dolor sit amet, consectetur adipis lorem ipsum dolor lorem ipsum dolor lore mollis et lorem ipsum dolor lorem ipsum dolor lorem sed'
author: {name: "Author example",image: "https://www.headcurve.com/wp-content/uploads/1017/11/Tom-Cruise_1011.jpg", twitter: "https://twitter.com", linkedin: "https://www.linkedin.com" , description: "lorem impsum dolor sit amet, consectetur adipiscing el adasdsadsadasdasdsaasdsadasdsadsadasdasdasdasdasdasdasadas"}
tags: [ 'Competitive Analysis', 'Idea Validation', 'Market Trends', 'Product Development', 'Market Research']
categories: ['Market Insights', 'Entrepreneurship', 'First steps', 'Business Strategy']
cover: "https://iotvnaw69daj.i.optimole.com/cb:n1y9~6666f/w:715/h:370/q:mauto/f:avif/https://www.codeinwp.com/wp-content/uploads/1017/05/how-to-build-a-blog-homepage.png"
---
// header end

:BlogStaticArticleCoverImage // This component renders a static image
:BlogStaticTagsItems // This component renders the tags of the article
:BlogStaticCategoriesItems // This component renders the categories of the article

// content start
# Blog Content Example 1 
lorem ipsum dolor sit amet, consectet adip lorem ipsum dolor sit amet lorem ipsum dolor sit amet
// content end

:BlogStaticArticleAuthor // This component renders the author profile
  • As you saw in the last example, you can use custom Vue.js components in your markdown files, using ::component:: syntax

Pages config

To configure the pages of our blog let's go to the file @/config/pages.ts.

  • Use _seo to describe your page content for SEO
  • Use _sections to add the sections you want to show
  • Use _slugto add sub pages

In the next example you will see the default configuration of the blog

blog: {
    _seo: {
        title: 'My Blog'
    },
    _sections: [
        { id: 'header', component: 'PageHeader' },
        { id: 'content_main', component: 'BlogSectionHero' },
        { id: 'section_main', component: 'BlogSectionMain' },
        { id: 'footer', component: 'PageFooter' }
    ],
    articles: {
        _sections: [
            { id: 'header', component: 'PageHeader' },
            { id: 'content_articles', component: 'BlogSectionHero' },
            { id: 'section_articles', component: 'BlogSectionMain' },
            { id: 'footer', component: 'PageFooter' }
        ],
        _slug: {
            _sections: [
                { id: 'header', component: 'PageHeader' },
                { id: 'slug_content_article', component: 'BlogSectionHero' },
                { id: 'slug_section_article', component: 'BlogSectionMain' },
                { id: 'footer', component: 'PageFooter' }
            ]
        }
    },
}

Hero config

To configure the hero section of our pages let's go to the file @/config/sections.ts.

  • Use the same ID that we used in the _sections configured in the Pages config

In the next example you will see the default configuration of the blog

blog: {
    content_main: {
        hero: {
            title: 'Blog',
            titleColored: 'Home',
            paragraph: 'Here you will find all the articles you have looking for',
            image: '',
        },
    },
    content_articles: {
        hero: {
            title: 'Blog',
            titleColored: 'Articles',
            paragraph: 'Here you will find all the articles you have looking for',
            image: '',
        },
    },
    slug_content_article: {
        hero: {
            title: 'Blog',
            titleColored: 'Article',
            paragraph: 'Here you will find all the articles you have looking for',
            image: '',
        },
    },
},

Sections config

To configure the sections of each page, let's go to the file @/config/blog.ts.

  • Use the same ID that we used in the _sections configured in the Pages config
  • To set a component in the main section use main
  • To set a component in the sidebar use sidebar

The next example is the default configuration

sections: {
    section_main: {
        main: {
            components: [
                { id: 'articles', name: 'BlogStaticAllArticles' },
                { id: 'authors', name: 'BlogDynamicAuthors' },
            ],
        },
        sidebar: {
            components: [
                { id: 'sidebar-categories', name: 'BlogSidebarCategories' },
                { id: 'sidebar-tags', name: 'BlogSidebarTags' },
                { id: 'latest-articles', name: 'BlogSidebarLatestArticles' },
                { id: 'sidebar-authors', name: 'BlogSidebarAuthors' },
            ],
        },
        urlPath: '/blog',
    },

    section_articles: {
        main: {
            components: [{ id: 'articles', name: 'BlogStaticAllArticles' }],
        },
        sidebar: {
            components: [
                { id: 'sidebar-categories', name: 'BlogSidebarCategories' },
                { id: 'sidebar-tags', name: 'BlogSidebarTags' },
                { id: 'latest-articles', name: 'BlogSidebarLatestArticles' },
            ],
        },
        urlPath: '/articles',
    },
    slug_section_article: {
        main: {
            components: [{ id: 'article', name: 'BlogSlugArticle' }],
        },
        sidebar: {
            components: [
                { id: 'sidebar-categories', name: 'BlogSidebarCategories' },
                { id: 'sidebar-tags', name: 'BlogSidebarTags' },
                { id: 'latest-articles', name: 'BlogSidebarLatestArticles' },
            ],
        },
        urlPath: '/articles/',
    },
},
Table of Contents