标签: nuxt-content

使用 nuxt/content 显示从数据库获取的 markdown

我在我的应用程序中使用 nuxt / content ,它工作正常。在应用程序的另一部分,我想从数据库中获取一些降价并显示它。

let mytext = "Some *markdown* fetched from a db here."

<nuxt-content :document="mytext" />
Run Code Online (Sandbox Code Playgroud)

这不起作用,因为我缺少一个解析步骤;当您执行$content("a_page_title_here").fetch()此操作时,它会解析获取的文本并将其作为结构化 json 呈现给组件。

如何使用$content解析文本,以便将其传递给组件进行显示?

我敢打赌有一种方法可以做到这一点,但文档不包含描述您可以使用$content.

如果有一种简单的方法来使用底层 Remark 组件,我就可以做到。

vue.js nuxt.js nuxt-content

10
推荐指数
1
解决办法
4237
查看次数

在 Nuxt.js markdown 内容中使用 Tailwind CSS 类

我正在使用 Nuxt 以及内容插件和 Tailwind 排版。我想在 Markdown 文件中使用 Tailwind 类以允许添加一些基本布局。

<!-- file: content.md -->

<div class="grid grid-cols-2 gap-4">
  <div>

### Some markdown...

  </div>
  <div>

### Some other markdown...

  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

由于渲染的 markdown<nuxt-content />不是用 Tailwind 处理的,因此其中使用的类不会包含在生成的样式中(除非它们在项目的其他地方使用)。

一种解决方法是使用非常聪明的 Tailwind 功能,该功能将包含注释中提到的类。我创建了一个全局组件,其中包含 Markdown 内容中可能使用的所有类。

<!-- file: grid.vue -->

<template>
  <div class="grid">
    <slot />
  </div>
</template>

<style>
/* Tailwind CSS

  grid-cols-1
  grid-cols-2
  [...]

  gap-2
  gap-4
  [...]

*/
</style>
Run Code Online (Sandbox Code Playgroud)

然后我只是在降价内容中使用该组件:

<!-- file: content.md -->

<grid class="grid-cols-2 gap-4">
  <!-- ... -->
</grid>
Run Code Online (Sandbox Code Playgroud)

我想知道是否有一种方法可以通过 Tailwind 运行 markdown …

markdown nuxt.js tailwind-css nuxt-content

5
推荐指数
1
解决办法
1313
查看次数

由内容模块设置的页面标题在导航后不会变回原样

我的网站使用 Nuxt 3 和 Nuxt Content。我在文件内设置了默认页面标题nuxt.config.ts(请参阅文档:SEO 和 Meta),内容模块在使用它的每个页面上设置标题。但是,返回任何其他页面不会重置页面标题。它保留最后一个 MarkDown 文件的值,并且不会更改回全局页面标题。导航到另一个 MarkDown 页面会更改标题,但它永远不会从模块设置的最后一个值变回原样。

我还尝试通过useHead 可组合项而不是运行时配置来设置标题,但结果相同。

我做错了什么吗?如果是,我该如何解决这个问题?或者这是一个已知的错误?

nuxt.js nuxt-content nuxtjs3

3
推荐指数
1
解决办法
1029
查看次数

WARN [nuxt] 两个组件文件正在解析

WARN [nuxt] 两个组件文件解析为同名 ProseCode:

  • ./node_modules/@nuxtjs/mdc/dist/runtime/components/prose/ProseCode.vue
  • ./node_modules/@nuxt/content/dist/runtime/components/Prose/ProseCode.vue

警告 [nuxt] 两个组件文件解析为同名 ProsePre:

  • ./node_modules/@nuxtjs/mdc/dist/runtime/components/prose/ProsePre.vue
  • ./node_modules/@nuxt/content/dist/runtime/components/Prose/ProsePre.vue

更新 nuxt 3 -> 3.7 和 nuxt/content 2.4 -> 2.8 后出现警告

如何解决这个问题?谢谢

nuxt.js nuxt-content nuxtjs3 nuxt3

3
推荐指数
1
解决办法
849
查看次数

标签 统计

nuxt-content ×4

nuxt.js ×4

nuxtjs3 ×2

markdown ×1

nuxt3 ×1

tailwind-css ×1

vue.js ×1