Content Wind

A lightweight Nuxt theme to build a Markdown driven website, based on Nuxt Content, TailwindCSS and Iconify ✨ 一个轻量级的Nuxt主题，用于构建一个Markdown驱动的网站,基于Nuxt Content, TailwindCSS 和 Iconify ✨

特征

• Write pages in Markdown
• 在Markdown中编写网站
• Use layouts in Markdown pages
• Enjoy meta tag generation
• Configurable prose components
• Generated navigation from pages
• Switch between light & dark mode
• Access 100,000 icons from 100+ icon sets
• Highlight code blocks with Shiki
• Create Vue components and use them in Markdown
• Deploy on any Node or Static hosting: GH Pages, Vercel, Netlify, Heroku, etc.
• Live edit on Nuxt Studio

安装

Open a terminal and run the following command:

npx nuxi init -t themes/content-wind my-website

Follow the instructions in the terminal and you are ready to go 🚀

用法

This template has some built-in features to make it as easy as possible to create a content-driven website.

此模板具有一些内置功能，可以尽可能轻松地创建内容驱动的网站。

页面

Create your Markdown pages in the content/ directory:

# My title

This first paragraph will be treated as the page meta description.

You can overwrite meta tags by using front-matter:

---
title: 'Custom title'
description: 'Custom meta description'
image: 'Custom image injected as `og:image`'
---

# My title

This first paragraph will be treated as the page meta description.

This is done thanks to Nuxt Content's document-driven mode of Nuxt Content.

导航

The navigation is generated from your pages, you can take a look at the <Navbar> component to see how it works.

It uses the <ContentNavigation> component from Nuxt Content to fetch the navigation object.

To customize the title displayed in the navigation, you can set the navigation.title property in the front-matter of your pages:

---
navigation.title: 'Home'
---

# Welcome to my site

With a beautiful description

主题配置

You can configure Content Wind global configuration in the app.config.ts file:

interface AppConfigInput {
  cover?: string, // default: '/cover.jpg'
  socials?: {
    twitter?: string
    github?: string
  }
}

Example of settings Twitter and GitHub icons in the navbar:

export default defineAppConfig({
  socials: {
    twitter: 'Atinux',
    github: 'Atinux/content-wind'
  }
})

图标

Use any icon from icones.js.org with the <Icon> component:

<Icon name="ph:music-notes-fill" />

You can also use it in your Markdown:

:icon{name="ph:music-notes-fill"}

Will result in

Learn more on nuxt-icon documentation.

Code Highlight

It supports code highlighting with Shiki and as well as different VS Code themes.

```ts
export default () => 'Hello Content Wind'
```

Will result in:

export default () => 'Hello Content Wind'

Updating the theme is as simple as editing your nuxt.config:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  content: {
    highlight: {
      theme: 'one-dark-pro',
    }
  }
})

Learn more in the Content Code Highlight section.

Vue Components

Add Vue components into the components/content/ directory and start using them in Markdown.

See the <MarkdownBlock> component in components/content/MarkdownBlock.vue.

By leveraging the <ContentSlot> component from Nuxt Content, you can use both slots and props in Markdown thanks to the MDC syntax.

Deployment

Static Hosting

Pre-render the website to be deployed on any static hosting:

npm run generate

The dist/ directory is ready to be deployed (symlink to .output/public), learn more on Nuxt docs.

Node server

Build the application for production:

npm run build

Start the server in production:

node .output/server/index.mjs

Learn more on Nuxt docs for more information.

You are at the end of the page, you can checkout the about page or the GitHub repository and give a

Thanks for reading and happy writing, Atinux.