Back

Write Articles

Write Articles

Write Markdown articles in Alpine is straightforward.

Create an articles list

Create a new file in the content/ directory:

touch content/2.articles.md

The numbered prefix determines the order of the menu items.

In this file, use the articles-list component to display the list of articles:

2.articles.md
---
title: 'Articles'
layout: 'page'
---

::articles-list
---
path: articles
---
::

The path prop corresponds to the directory where the articles are stored.

Display an article in the list

Create a new file in the /content/articles directory:

mkdir content/articles
touch content/articles/1.my-new-article.md

For your article to be correctly displayed in the articles list, define a cover and date property in the frontmatter:

content/articles/1.my-new-article.md
---
cover: path/to/cover
date: 2022-08-23
---

The cover property can be a local path relative to the /public directory or an external URL.

Your article will now be displayed in the list with its filename as a default title.

Edit your article

Under the frontmatter block, enter a Markdown h1 tag and a line of text:

content/articles/1.my-new-article.md
---
cover: path/to/cover
date: 2022-08-23
---

# An awesome article

This article is little by size but big by heart.

Your article will now be displayed in the list with the title and description you wrote in Markdown.

Override title and description

If you want to change the title and description displayed on the list and in the meta tags of the article, add the title and description property to your frontmatter:

content/articles/1.my-new-article.md
---
cover: path/to/cover
date: 2022-08-23
title: Another title
description: Another description
---

You are now ready to edit your article and create new ones!

Optional Arguments

In the frontmatter block, you can pass additional options for displaying your article, such as displaying badges on the image:

---
cover: path/to/cover
date: 2022-08-23
badges: [{
  color: 'white',
  bg: 'rgba(0, 0, 0, 0.3)',
  content: 'Technology'
}]
---

Read more

Alpine is a Nuxt theme using the Content module in documentDriven mode.

👉 Learn more in the Nuxt Content documentation.

Back to top