您正在阅读 Nuxt 内容 V1 文档。阅读最新版本

社区

集成

了解如何将 @nuxt/content 与其他模块一起使用。

@nuxtjs/feed

对于文章，可以使用内容使用 @nuxtjs/feed 模块生成新闻提要。

要在 feed 选项内使用 $content，您需要在 modules 属性中将 @nuxt/content 放在 @nuxtjs/feed 之前。

您可以在以下位置访问您的提要：baseUrl + baseLinkFeedArticles + file

对于 RSS：https://mywebsite.com/feed/articles/rss.xml

对于 JSON：https://mywebsite.com/feed/articles/feed.json

示例 1

export default {
  modules: [
    '@nuxt/content',
    '@nuxtjs/feed'
  ],

  feed () {
    const baseUrlArticles = 'https://mywebsite.com/articles'
    const baseLinkFeedArticles = '/feed/articles'
    const feedFormats = {
      rss: { type: 'rss2', file: 'rss.xml' },
      json: { type: 'json1', file: 'feed.json' },
    }
    const { $content } = require('@nuxt/content')

    const createFeedArticles = async function (feed) {
      feed.options = {
        title: 'My Blog',
        description: 'I write about technology',
        link: baseUrlArticles,
      }
      const articles = await $content('articles').fetch()

      articles.forEach((article) => {
        const url = `${baseUrlArticles}/${article.slug}`

        feed.addItem({
          title: article.title,
          id: url,
          link: url,
          date: article.published,
          description: article.summary,
          content: article.summary,
          author: article.authors,
        })
      })
    }

    return Object.values(feedFormats).map(({ file, type }) => ({
      path: `${baseLinkFeedArticles}/${file}`,
      type: type,
      create: createFeedArticles,
    }))
  }
}

上述方法适用于某些用例。但是，如果您使用 npm run generate，则此方法将产生错误。

或者，如果您想将文章的正文作为内容包含在内（包括来自组件的任何内容，如果您将 Vue 组件和降价文件混合在一起），那么您需要采取不同的方法。

一种可能的方法是使用 @nuxtjs/feed 文档化的方法，它将与 npm run generate 协同工作，并将使用现有的 Nuxt 进程来包含内容。以下是操作方法。

首先，使用基于数组的方法来声明您的提要，如 @nuxtjs/feed 文档中所示。提要数组由具有 5 个可能值的多个对象组成。

  1. path 是从您的域到提要文档的路径。
  2. 一个将生成提要内容的函数。
  3. cacheTime，顾名思义，决定提要何时刷新。
  4. type 决定您要输出的 RSS 提要类型。
  5. data，作为函数的参数提供（下面的示例中的 args 属性）。
modules: [    
    '@nuxt/content',
    '@nuxtjs/feed'    
  ],

  feed: [
    {
      path: '/feed.xml',
      async create(feed, args) => {  
        // create the feed
      },
      cacheTime: 1000 * 60 * 15,
      type: 'rss2',
      data: [ 'some', 'info' ]
    },
    {
      path: '/feed.json',
      async create(feed, args) => {  
        // create the feed
      },
      cacheTime: 1000 * 60 * 15,
      type: 'json1',
      data: [ 'other', 'info' ]
    }
  ],

您可以通过分别声明创建函数并将其提供给提要数组对象来充分利用 nuxt/content api。创建函数可以声明在 nuxt.config.js 文件的顶部，也可以在另一个目录中单独声明并导出。创建函数在 Nuxt 进程将降价文件和 Vue 组件编译成 HTML 之后运行。这使我们能够提取该内容并将其提供给提要。

示例 2

// this example declares the function at the top of the nuxt.config.js file
const fs = require('fs').promises;
const path = require('path');

let posts = [];

const constructFeedItem = async (post, dir, hostname) => {  
  //note the path used here, we are using a dummy page with an empty layout in order to not send that data along with our other content
  const filePath = path.join(__dirname, `dist/rss/${post.slug}/index.html`); 
  const content = await fs.readFile(filePath, 'utf8');
  const url = `${hostname}/${dir}/${post.slug}`;
  return {
    title: post.title,
    id: url,
    link: url,
    description: post.description,
    content: content
  }
} 

const create = async (feed, args) => {
  const [filePath, ext] = args;  
  const hostname = process.NODE_ENV === 'production' ? 'https://my-production-domain.com' : 'https://127.0.0.1:3000';
  feed.options = {
    title: "My Blog",
    description: "Blog Stuff!",
    link: `${hostname}/feed.${ext}`
  }
  const { $content } = require('@nuxt/content')
  if (posts === null || posts.length === 0)
    posts = await $content(filePath).fetch();

  for (const post of posts) {
    const feedItem = await constructFeedItem(post, filePath, hostname);
    feed.addItem(feedItem);
  }
  return feed;
}

export default {
...
  modules: [    
    '@nuxt/content',
    '@nuxtjs/feed'    
  ],
  feed: [
    {
      path: '/feed.xml',
      create,
      cacheTime: 1000 * 60 * 15,
      type: 'rss2',
      data: [ 'blog', 'xml' ]
    },
  ],  
...
}

这种方法至少有两个缺点。

  1. 由于您正在读取整个生成的页面，因此您可能会遇到不必要的内容，例如来自页眉和页脚的内容。解决此问题的一种方法是使用空布局创建一个虚拟页面，以便仅使用您希望包含在 RSS 提要中的内容。
  2. rss2 和 XML 运行良好，因为 HTML 会自动编码。但是，json1 和 json 可能需要额外的操作，以便内容可以传输。

还要记住，如果您不在降价文件中使用混合内容（因此，如果您只使用降价文件），那么仅包含降价文件要容易得多。您可以使用 nuxt.config.js 中的此钩子检索降价文件。

示例 3

export default {
...
  hooks: {
    'content:file:beforeInsert': (document) => {
      if (document.extension === '.md') {      
        document.bodyPlainText = document.text;
      }
    },
  },
...
}

然后在您的创建函数中


const constructFeedItem = (post, dir, hostname) => {  
  const url = `${hostname}/${dir}/${post.slug}`;
  return {
    title: post.title,
    id: url,
    link: url,
    description: post.description,
    content: post.bodyPlainText
  }
} 

const create = async (feed, args) => {
  const [filePath, ext] = args;  
  const hostname = process.NODE_ENV === 'production' ? 'https://my-production-domain.com' : 'https://127.0.0.1:3000';
  feed.options = {
    title: "My Blog",
    description: "Blog Stuff!",
    link: `${hostname}/feed.${ext}`
  }
  const { $content } = require('@nuxt/content')
  if (posts === null || posts.length === 0)
    posts = await $content(filePath).fetch();

  for (const post of posts) {
    const feedItem = await constructFeedItem(post, filePath, hostname);
    feed.addItem(feedItem);
  }
  return feed;
}

仅检索降价文件非常适合您使用提要与 dev.to 或 medium 集成，因为这两个网站都在其编辑器中使用降价文件。

@nuxtjs/sitemap

您可能希望生成一个包含所有帖子链接的网站地图。您可以通过与生成提要类似的方式来实现。

示例 1

网站地图模块应始终最后声明，以便可以包含由其他模块创建的路由。声明模块后，您必须通过将网站地图配置对象添加到 nuxt.config.js 来配置网站地图。您必须提供主机名，并且可以选择包含任何从 Nuxt 内容动态生成的路由。routes 属性接受一个异步函数，该函数返回一个 URL 数组。

const createSitemapRoutes = async () => {
  let routes = [];
  const { $content } = require('@nuxt/content')
  if (posts === null || posts.length === 0)
    posts = await $content('blog').fetch();
  for (const post of posts) {
    routes.push(`blog/${post.slug}`);
  }
  return routes;
}

export default {
...
  modules: [
    '@nuxt/content',
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    hostname: 'https://my-domain-name.com',
    gzip: true,
    routes: createSitemapRoutes
  },
...
}

Forestry CMS

您可以通过几个步骤将 Nuxt 内容与 Forestry 集成。

我们建议您查看由 Pascal Cauhépé 制作的本教程。
👉  https://nuxt-content-and-forestry.netlify.app