问题描述
我正在使用 Contentful 构建网站,并遵循了不同的指南和配置。无论我做什么,我似乎都无法获得 Markdownit 工作的基本示例。我一直收到错误:
无法在文档中获取任何示例: https://openbase.com/js/@nuxtjs/markdownit
我什至删除了整个模板并尝试了简单的版本。我还在下面的配置文件中尝试了不同的设置。
我已经运行了'yarn build'、'yarn add markdown-it'
而且似乎都没有帮助
这是我最终想要开始工作的内容:
<article v-html="$md.render(post.fields.body)"></article>
这是我正在关注的一个示例,它似乎在现场演示中起作用: https://github.com/sdras/contentful-nuxt-netlify/blob/e80e6552eef812320a7bd2dd66ad3fa8ebf5f840/pages/_slug.vue
上下文 - pages/_id/index.vue
<template>
<div class="post-component">
<a @click="$router.go(-1)">Go back to overview</a>
<hr />
<h1>{{post.fields.title}}</h1>
<p></p>
<p>
{{post.fields.body}}
</p>
<article v-html="$md.render(post.fields.body)"></article>
</div>
</template>
<script>
import {createClient} from '../../plugins/contentful';
const contentfulClient = createClient();
export default {
name: 'index',asyncData ({ env,params }) {
return contentfulClient.getEntries({
'content_type': env.CTF_BLOG_POST_TYPE_ID,'fields.slug': params.id
}).then(post => {
return {
post: post.items[0]
}
}).catch(console.error)
}
}
</script>
const config = require('./.contentful.json')
module.exports = {
// ...
env: {
CTF_SPACE_ID: config.CTF_SPACE_ID,CTF_CDA_ACCESS_TOKEN: config.CTF_CDA_ACCESS_TOKEN,CTF_PERSON_ID: config.CTF_PERSON_ID,CTF_BLOG_POST_TYPE_ID: config.CTF_BLOG_POST_TYPE_ID
}
// ...
}
export default {
// Target: https://go.nuxtjs.dev/config-target
target: 'static',// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'thomasulman',htmlAttrs: {
lang: 'en'
},Meta: [
{ charset: 'utf-8' },{ name: 'viewport',content: 'width=device-width,initial-scale=1' },{ hid: 'description',name: 'description',content: '' },{ name: 'format-detection',content: 'telephone=no' }
],link: [
{ rel: 'icon',type: 'image/x-icon',href: '/favicon.ico' }
]
},// Global CSS: https://go.nuxtjs.dev/config-css
css: [
],// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],// Auto import components: https://go.nuxtjs.dev/config-components
components: true,// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
],// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'nuxt-buefy',"@nuxtjs/markdownit"],markdownit: {
runtime: true,// Support `$md()`
injected: true,},// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
}
package.json
{
"name": "******","version": "1.0.0","private": true,"scripts": {
"dev": "nuxt","build": "nuxt build","start": "nuxt start","generate": "nuxt generate"
},"dependencies": {
"@nuxtjs/markdownit": "^1.2.10","contentful": "^8.4.2","core-js": "^3.15.1","markdown-it": "^12.1.0","nuxt": "^2.15.7","nuxt-buefy": "^0.4.8"
},"devDependencies": {}
}
以防万一它有帮助: 索引.vue
<template>
<div>
<!-- <Navigation /> -->
<!-- render data of the person -->
<h1>{{ person.fields.name }}</h1>
<!-- render blog posts -->
<ul>
<li v-for="post in posts">
{{ post.fields.title }}
<nuxt-link :to="post.fields.slug" class="more">Read more ⟶</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
import { createClient } from '~/plugins/contentful.js'
const client = createClient()
export default {
// `env` is available in the context object
asyncData({ env }) {
return Promise.all([
// fetch the owner of the blog
client.getEntries({
'sys.id': env.CTF_PERSON_ID
}),// fetch all blog posts sorted by creation date
client.getEntries({
'content_type': env.CTF_BLOG_POST_TYPE_ID,order: '-sys.createdAt'
})
]).then(([entries,posts]) => {
// return data that should be available
// in the template
return {
person: entries.items[0],posts: posts.items
}
}).catch(console.error)
}
}
</script>
解决方法
我已实现使其正常工作,如下所示:https://github.com/nuxt-community/markdownit-module#usage
我也添加了一个 proper HTML sanitizer,检查插件目录。
您可以在此处找到可用的 Github 存储库:https://github.com/kissu/so-nuxt-markdownit
目前这个配置对我来说已经足够了nuxt.config.js
plugins: [
'~/plugins/vue-dompurify'
],modules: [
'@nuxtjs/markdownit'
],markdownit: {
runtime: true,// Support `$md()`
// preset: 'default',// linkify: true,// breaks: true,// use: [
// 'markdown-it-div',// 'markdown-it-attrs'
// ]
}
并且这两个文件工作正常index.vue
<template>
<div>
<div v-dompurify-html="$md.render(model)"></div>
<br/>
<br/>
<div v-dompurify-html="testMarkdownContent"></div>
<nuxt-link to="/inline">Inline markdown working too!</nuxt-link>
</div>
</template>
<script>
import testMarkdown from '../blog/test.md'
export default {
data() {
return {
model: '# Hello World!'
}
},computed: {
testMarkdownContent() {
return testMarkdown
}
}
}
</script>
inline.vue
<template lang="md">
# Hello World!
Current route is: {{ $route.path }}
<nuxt-link to="/">Back to index</nuxt-link>
</template>
,
整个事情的问题在于 // module.exports {} 覆盖了配置文件中的导出默认 {}。