您正在阅读 Nuxt 内容 V1 文档。阅读最新版本
高级
编程方式使用
$content 可从 **@nuxt/content** 访问。
注意，您只能在 **模块加载后** 从 Nuxt 访问它。 require('@nuxt/content') 应该在钩子或内部 Nuxt 方法中执行。
export default {
modules: [
'@nuxt/content'
],
generate: {
async ready () {
const { $content } = require('@nuxt/content')
const files = await $content().only(['slug']).fetch()
console.log(files)
}
}
}
静态站点生成
从 Nuxt 2.14+ 开始，nuxt generate 集成了一个爬虫功能，它将爬取您所有的链接并根据这些链接生成您的路由。 因此，您无需执行任何操作即可让您的动态路由被爬取。
此外，nuxt generate 将在没有代码更改时自动跳过 webpack 构建步骤，并使用缓存使用之前的构建。 内容模块与此功能集成，以忽略 content/ 文件夹内部的更改。 换句话说，当更改网站的内容并部署时，构建将被跳过。
在此了解更多信息 这篇文章.
当使用 Nuxt <= 2.12 时，您可能需要使用 generate.routes 指定动态路由。
示例
export default {
modules: [
'@nuxt/content'
],
generate: {
async routes () {
const { $content } = require('@nuxt/content')
const files = await $content({ deep: true }).only(['path']).fetch()
return files.map(file => file.path === '/index' ? '/' : file.path)
}
}
}
建议使用 Nuxt 2.14+ 以及 nuxt generate，因为它很棒！
钩子
该模块添加了一些您可以使用的钩子。
content:file:beforeParse
允许您在文件由解析器处理之前修改文件的内容。
参数
文件- 类型:
object - 属性
- 路径:
string - 扩展名:
string(例如:.md) - 数据:
string
- 路径:
示例
更改所有 Markdown 文件中所有 react 的外观为 vue
hooks: {
'content:file:beforeParse': (file) => {
if (file.extension !== '.md') return
file.data = file.data.replace(/react/g, 'vue')
}
}
content:file:beforeInsert
允许您在存储文档之前向文档添加数据。
参数
示例
在构建博客时，您可以使用 file:beforeInsert 来使用 reading-time 向文档添加 readingTime。
text是 markdown 文件在转换为 JSON AST 之前的正文内容。 您可以在此时使用它，但它不会被 API 返回。
export default {
modules: [,
'@nuxt/content'
],
hooks: {
'content:file:beforeInsert': (document) => {
if (document.extension === '.md') {
const { time } = require('reading-time')(document.text)
document.readingTime = time
}
}
}
}
示例
您可能希望在 .json 文件内解析 markdown。 您可以从 database 对象访问解析器。
export default {
modules: [,
'@nuxt/content'
],
hooks: {
'content:file:beforeInsert': async (document, database) => {
if (document.extension === '.json' && document.body) {
const data = await database.markdown.toJSON(document.body)
Object.assign(document, data)
}
}
}
}
content:options
扩展内容选项，这对希望在规范化时读取内容选项并对其实施更新的模块很有用。
参数
选项- 类型:
object - 属性
- 请参阅 配置
- 类型:
示例
export default {
modules: [,
'@nuxt/content'
],
hooks: {
'content:options': (options) => {
console.log('Content options:', options)
}
}
}
处理热重载
当您处于开发模式时，该模块将自动调用 nuxtServerInit 存储操作（如果已定义）和 $nuxt.refresh() 以刷新当前页面。
如果您想监听事件以执行更多操作，可以使用 $nuxt.$on('content:update') 在客户端监听 content:update 事件。
export default function ({ store }) {
// Only in development
if (process.dev) {
window.onNuxtReady(($nuxt) => {
$nuxt.$on('content:update', ({ event, path }) => {
// Refresh the store categories
store.dispatch('fetchCategories')
})
})
}
}
然后在您的 nuxt.config.js 中添加您的插件。
export default {
plugins: [
'@/plugins/update.client.js'
]
}
现在，每次更新 content/ 目录中的文件时，它也会调度 fetchCategories 方法。 这份文档实际上使用了它。 您可以通过查看 plugins/init.js 了解更多信息。
API 端点
此模块在开发中公开了 API 端点，因此您可以轻松查看每个目录或文件的 JSON，它位于 https://127.0.0.1:3000/_content/。 前缀默认情况下为 _content，并且可以使用 apiPrefix 属性进行配置。
示例
-| content/
---| articles/
------| hello-world.md
---| index.md
---| settings.json
将在 localhost:3000 上公开。
/_content/articles: 列出content/articles/中的文件。/_content/articles/hello-world: 获取hello-world.md作为 JSON。/_content/index: 获取index.md作为 JSON。/_content/settings: 获取settings.json作为 JSON。/_content: 列出index和settings。
该端点可在 GET 和 POST 请求上访问，因此您可以使用查询参数：https://127.0.0.1:3000/_content/articles?only=title&only=description&limit=10.
从 **v1.4.0** 开始，该端点还支持查询参数中的 where。
- 所有不属于任何默认键的键都将应用于
where。
https://127.0.0.1:3000/_content/articles?author=...
- 您可以使用
$operators以及_。
https://127.0.0.1:3000/_content/articles?author_regex=...
此模块在内部使用 LokiJS。 您可以在此处查看 查询示例.
- 您可以使用 嵌套属性
https://127.0.0.1:3000/_content/products?categories.slug_contains=top
您可以在 lib/middleware.js 中了解更多关于该端点的信息。