配置 - Nuxt 内容 V1

您可以在您的 nuxt.config.js 中使用 content 属性配置 @nuxt/content。

nuxt.config.js

export default {
  content: {
    // My custom configuration
  }
}

在深入研究各个属性之前，请先查看模块的默认设置。

合并默认值

您可以将每个选项定义为函数或静态值（基本类型、对象、数组等）。如果您使用函数，则默认值将作为第一个参数提供。

如果您不使用函数来定义您的属性，该模块将尝试将它们与默认值合并。这对 markdown.remarkPlugins、markdown.rehypePlugins 等等很有用，因为默认值相当合理。如果您不想包含默认值，只需使用函数即可。

属性

`apiPrefix`

类型：string
默认值：'/_content'

将用于客户端 API 调用和 SSE 的路由。

nuxt.config.js

content: {
  // $content api will be served on localhost:3000/content-api
  apiPrefix: 'content-api'
}

`dir`

类型：string
默认值：'content'

用于编写内容的目录。您可以提供绝对路径，如果相对路径，则将使用 Nuxt srcDir 解析。

nuxt.config.js

content: {
  dir: 'my-content' // read content from my-content/
}

`fullTextSearchFields`

类型：Array
默认值：['title', 'description', 'slug', 'text']

需要索引才能搜索的字段，详细了解搜索这里。

text 是一个特殊键，包含您的 Markdown 在解析为 AST 之前的内容。

nuxt.config.js

content: {
  // Only search in title and description
  fullTextSearchFields: ['title', 'description']
}

`nestedProperties`

类型 Array
默认值：[]
版本：>= v1.3.0

注册嵌套属性以处理点符号表示法和深度过滤。

nuxt.config.js

content: {
  nestedProperties: ['categories.slug']
}

`liveEdit`

类型 boolean
默认值：true
版本：>= v1.5.0

在开发中禁用实时编辑模式

nuxt.config.js

content: {
  liveEdit: false
}

`markdown`

该模块在幕后使用 remark 和 rehype 将 Markdown 文件编译成 JSON AST，这些文件将存储在 body 变量中。

以下说明适用于 remarkPlugins 和 rehypePlugins

要配置模块如何解析 Markdown，您可以

向默认值添加一个新插件

nuxt.config.js

export default {
  content: {
    markdown: {
      remarkPlugins: ['remark-emoji']
    }
  }
}

覆盖默认插件

nuxt.config.js

export default {
  content: {
    markdown: {
      remarkPlugins: () => ['remark-emoji']
    }
  }
}

使用本地插件

nuxt.config.js

export default {
  content: {
    markdown: {
      remarkPlugins: [
        '~/plugins/my-custom-remark-plugin.js'
      ]
    }
  }
}

在定义中直接提供选项

nuxt.config.js

export default {
  content: {
    markdown: {
      remarkPlugins: [
        ['remark-emoji', { emoticon: true }]
      ]
    }
  }
}

使用插件名称以 camelCase 形式在 camelCase 中提供选项

nuxt.config.js

export default {
  content: {
    markdown: {
      // https://github.com/remarkjs/remark-external-links#options
      remarkExternalLinks: {
        target: '_self',
        rel: 'nofollow'
      }
    }
  }
}

添加新插件时，请确保在依赖项中安装它

yarn add remark-emoji

nuxt.config.js

export default {
  content: {
    markdown: {
      remarkPlugins: ['remark-emoji']
    }
  }
}

`markdown.tocDepth`

类型：number
默认值：3
版本：>= v1.11.0

您可以更改目录中包含的最大标题深度。

`markdown.remarkPlugins`

类型：Array
默认值：['remark-squeeze-paragraphs', 'remark-slug', 'remark-autolink-headings', 'remark-external-links', 'remark-footnotes']
版本：>= v1.4.0

您可以查看 remark 插件列表。

`markdown.rehypePlugins`

类型：Array
默认值：['rehype-minify-whitespace', 'rehype-sort-attribute-values', 'rehype-sort-attributes', 'rehype-raw']
版本：>= v1.4.0

您可以查看 rehype 插件列表。

`markdown.basePlugins`

已弃用。请改用 markdown.remarkPlugins 作为函数。

`markdown.plugins`

已弃用。请改用 markdown.remarkPlugins 作为数组。

`markdown.prism.theme`

类型：string
默认值：'prismjs/themes/prism.css'

该模块使用 PrismJS 处理 Markdown 内容中的代码突出显示。

它会自动将所需的 PrismJS 主题推送到您的 Nuxt.js 配置中，因此如果您想使用与默认主题不同的主题，例如 prism-themes

yarn add prism-themes

nuxt.config.js

content: {
  markdown: {
    prism: {
      theme: 'prism-themes/themes/prism-material-oceanic.css'
    }
  }
}

要禁用主题的包含，请将 prism 设置为 false

nuxt.config.js

content: {
  markdown: {
    prism: {
      theme: false
    }
  }
}

`markdown.highlighter`

类型：Highlighter | PromisedHighlighter
版本：>=1.9.0

您可以使用此选项更改 Markdown 内容中的默认代码突出显示器。例如，我们使用 highlight.js。

nuxt.config.js

import highlightjs from 'highlight.js'

export default {
  content: {
    markdown: {
      highlighter(rawCode, lang) {
        const highlightedCode = highlightjs.highlight(rawCode, { language: lang }).value

        // We need to create a wrapper, because
        // the returned code from highlight.js
        // is only the highlighted code.
        return `<pre><code class="hljs ${lang}">${highlightedCode}</code></pre>`
      }
    }
  }
}

定义 markdown.highlighter 时，它会自动禁用 Prism 主题的包含。

如果您定义 markdown.highlighter，请不要忘记手动添加相应的样式。

它返回一个 string 或 HAST（超文本抽象语法树）。您可以通过传递第四个参数来构建 HAST。它由 h、node 和 u 组成。

nuxt.config.js

import highlightjs from 'highlight.js'

export default {
  content: {
    markdown: {
      highlighter(rawCode, lang, _, { h, node, u }) {
        const highlightedCode = highlightjs.highlight(rawCode, { language: lang }).value

        // We can use ast helper to create the wrapper
        const childs = []
        childs.push(
          h(node, 'pre', [
            h(node, 'code', { className: ['hljs', lang] }, [
              u('raw', highlightedCode)
            ])
          ])
        )

        return h(
          node,
          'div',
          { className: 'highlighted-with-highlightjs' },
          childs
        )
      }
    }
  }
}

使用 nuxt-content 组件渲染后，它将如下所示

<div class="highlighted-with-highlightjs">
  <pre class="language-<lang>">
    <code>
      ...
    </code>
  </pre>
</div>

您还可以从第三个参数中获取行突出显示和文件名值。将它们与 HAST 结合起来，您可以将其传递给客户端。

nuxt.config.js

import highlightjs from 'highlight.js'

export default {
  content: {
    markdown: {
      highlighter(rawCode, lang, { lineHighlights, fileName }, { h, node, u }) {
        const highlightedCode = highlightjs.highlight(rawCode, { language: lang }).value

        const childs = []
        const props = {
          className: `language-${lang}`,
          dataLine: lineHighlights,
          dataFileName: fileName
        }
        childs.push(
          h(node, 'pre', [
            h(node, 'code', props, [
              u('raw', highlightedCode)
            ])
          ])
        )

        return h(
          node,
          'div',
          { className: 'highlighted-with-highlightjs' },
          childs
        )
      }
    }
  }
}

然后返回的代码将如下所示

<div class="highlighted-with-highlightjs">
  <pre class="language-<lang>" data-line="<line>" data-file-name="<file-name>">
    <code>
      ...
    </code>
  </pre>
</div>

您可以从 mdast-util-to-hast、通用语法树和 unist-builder 中了解有关 h、node 和 u 的更多信息

如果您需要从承诺返回的包/函数中获取突出显示器，您可以这样做

nuxt.config.js

import { getHighlighter } from 'example-highlighter'

export default {
  content: {
    markdown: {
      async highlighter() {
        const highlighter = await getHighlighter()

        return (rawCode, lang) => {
          return highlighter.highlight(rawCode, { language: lang })
        }
      }
    }
  }
}

您可以前往代码片段 - 自定义突出显示器部分查看更多示例。

`yaml`

类型：object
默认值：{}

该模块使用 js-yaml 解析 .yaml、.yml 文件。您可以查看此处了解选项。

请注意，我们强制执行 json: true 选项。

`xml`

类型：object
默认值：{}

该模块使用 xml2js 解析 .xml 文件。您可以查看此处了解选项。

`csv`

类型：object
默认值：{}

该模块使用 node-csvtojson 解析 csv 文件。您可以查看此处了解选项。

`extendParser`

类型：object
默认 {}

使用此选项，您可以为其他文件类型定义自己的解析器。您还可以覆盖默认解析器！

要添加自定义解析器，请编写一个函数，该函数以文件内容作为参数并返回提取的数据。

示例

nuxt.config.js

const parseTxt = file => file.split('\n').map(line => line.trim())

// in Config:

{
  extendParser: {
    '.txt': parseTxt
  }
}

`editor`

您可以在开发中提供一个自定义编辑器来编辑您的 Markdown 文件。将 editor 选项设置为编辑器组件的路径。您可以在此处找到默认编辑器的代码。

nuxt.config.js

content: {
  editor: '~/path/to/editor/component.vue'
}

您的组件应实现以下内容

v-model 用于获取 Markdown 代码。
prop isEditing 是一个布尔值，包含有关是否已开始编辑以及组件是否显示的信息。（这是可选的）
编辑完成后，您的组件必须发出 endEdit

您应该意识到，您会获得完整的 Markdown 文件内容，因此这包括前置内容。您可以使用 gray-matter 来拆分和合并 Markdown 和前置内容。

`useCache`

类型：boolean
默认值：false

当 true 时，生产服务器 (nuxt start) 将使用内容的缓存版本（在运行 nuxt build 后生成），而不是解析文件。这将缩短应用程序启动时间，但会使应用程序无法感知任何内容更改。

默认值

nuxt.config.js

export default {
  content: {
    editor: '~/.nuxt/content/editor.vue',
    apiPrefix: '_content',
    dir: 'content',
    fullTextSearchFields: ['title', 'description', 'slug', 'text'],
    nestedProperties: [],
    liveEdit: true,
    useCache: false,
    markdown: {
      remarkPlugins: [
        'remark-squeeze-paragraphs',
        'remark-slug',
        'remark-autolink-headings',
        'remark-external-links',
        'remark-footnotes'
      ],
      rehypePlugins: [
        'rehype-minify-whitespace',
        'rehype-sort-attribute-values',
        'rehype-sort-attributes',
        'rehype-raw'
      ],
      prism: {
        theme: 'prismjs/themes/prism.css'
      }
    },
    yaml: {},
    csv: {},
    xml: {},
    extendParser: {}
  }
}

显示内容

您可以在模板中直接使用 `<nuxt-content>` 组件来显示您的 Markdown。

高级

了解 @nuxt/content 模块的高级用法。