奈寻味导航网 » 文章资讯 » Vuejs中使用markdown服务器端渲染的示例

Vuejs中使用markdown服务器端渲染的示例

2023-09-20 15:44:07 170

啊哈，又是来推荐一个vuejs的package，miaolz123/vue-markdown。对应的应用场景是：你想使用一个编辑器或者是在评论系统中支持markdown。这个package的有点还是挺多了，比如默认就支持emoji，这个就很完美啦！laravist的新版就使用了vue-markdown来渲染评论。

安装

直接使用npm来安装：

npminstall--savevue-markdown

使用

也是很简单的，可以直接这样：

importVueMarkdownfrom'vue-markdown'

newVue({
components:{
VueMarkdown
}
})

或者是这样，举一个具象化的例子是：比如我们有一个Comment.vue组件用来渲染评论，可以在这个组件中直接指明：

importVueMarkdownfrom'vue-markdown';


exportdefault{//...othercodes
props:['comment'],
data(){
return{
comment:this.comment
}
},
components:{
VueMarkdown
},
//...othercodes
}

然后在渲染的时候这个：

这里我们首先通过commentprops传入整个comment（这个comment其实就是一个对象），然后在Comment.vue通过:source来给veu-markdown组件传入每个评论的body字段内容，注意这里的comment.body在数据库中保存的就是评论的markdown格式的内容。

Vuejs服务器端渲染markdown示例

constKoa=require('koa');
const_=require('koa-route');
constvsr=require('vue-server-renderer');
constfs=require('fs');
constindexjs=require('./component/index.js');
constVue=require('vue');
constMD=require('markdown-it')

constserver=newKoa();

constroute={
index:(ctx,id)=>{
//解析markdown
constmd=newMD().render(fs.readFileSync('./markdown/'+id+'.md','utf-8'));
//vue插入html代码
constapp=newVue({
data:{
main:md
},
template:`

` }); //其他变量设置 constcontext={ htmlTitle:id }; //加载模板html文件 constrenderer=vsr.createRenderer({ template:fs.readFileSync('./template/index.template.html','utf-8') }); //渲染 renderer.renderToString(app,context,(err,html)=>{ if(err){ ctx.response.status=500; }else{ ctx.response.body=html; } }) } }; server.use(_.get('/post/:id',route.index)); server.listen(8080);








{{htmlTitle}}

总结

本文介绍的vue-markdown在某些应用场景中其实超级好用，特别是对于评论系统想支持markdown这个需求来说，容易集成，优点多多。希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

Vuejs中使用markdown服务器端渲染的示例

热门推荐

随机推荐