支持markdown的服务器,Vuejs中使用markdown服务器端渲染的示例
啊哈,又是来推荐一个 vuejs 的 package,miaolz123/vue-markdown。 对应的应用场景是:你想使用一个编辑器或者是在评论系统中支持 markdown。这个 package 的有点还是挺多了,比如默认就支持 emoji,这个就很完美啦!laravist 的新版就使用了 vue-markdown 来渲染评论。
安装
直接使用 npm 来安装:
npm install --save vue-markdown
使用
也是很简单的,可以直接这样:
import VueMarkdown from 'vue-markdown'
new Vue({
components: {
VueMarkdown
}
})
或者是这样,举一个具象化的例子是:比如我们有一个 Comment.vue 组件用来渲染评论,可以在这个组件中直接指明:
import VueMarkdown from 'vue-markdown';
export default { // ... other codes
props:['comment'],
data(){
return {
comment : this.comment
}
},
components: {
VueMarkdown
},
// ... other codes
}
然后在渲染的时候这个:
这里我们首先通过 comment props 传入整个 comment(这个comment其实就是一个对象) ,然后在 Comment.vue 通过 :source 来给 veu-markdown 组件传入每个评论的 body 字段内容,注意这里的 comment.body 在数据库中保存的就是评论的 markdown 格式的内容。
Vuejs服务器端渲染markdown示例
const Koa = require('koa');
const _ = require('koa-route');
const vsr = require('vue-server-renderer');
const fs = require('fs');
const indexjs = require('./component/index.js');
const Vue = require('vue');
const MD = require('markdown-it')
const server = new Koa();
const route = {
index: (ctx, id) => {
// 解析markdown
const md = new MD().render(fs.readFileSync('./markdown/' + id + '.md', 'utf-8'));
// vue插入html代码
const app = new Vue({
data: {
main: md
},
template: `
});
// 其他变量设置
const context = {
htmlTitle: id
};
// 加载模板html文件
const renderer = 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 这个需求来说,容易集成,优点多多。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
支持markdown的服务器,Vuejs中使用markdown服务器端渲染的示例相关推荐
- 关于 SAP UI5 对服务器端渲染 Server Sider Render 的支持问题
之前 Jerry 的公众号文章介绍过 SAP 产品的渲染模式: SAP UI渲染模式:客户端渲染 VS 服务器端渲染 关于 SAP 产品 UI 的搜索引擎优化 SEO - Search Engine ...
- python实例化是什么意思_Python中实例化class的执行顺序示例详解
前言 本文主要介绍了关于Python实例化class的执行顺序的相关内容,下面话不多说了,来一起看看详细的介绍吧 Python里对类的实例化时有怎样的顺序 一般来说一个类里面有类变量和方法,比如我们定 ...
- 在HBuilder中编辑markdown文档(原)
最近才真正意识到markdown的神奇.本篇内容主要部分来自HBuilderX自带的markdown语法帮助,加入了一些自己认为很实用的使用方法. 目 录 自动生成目录 返回目录 生成html页面 引 ...
- 如何将 ipynb 发布到 blog 中(html, markdown格式)
相关文章链接 如何向IPython Notebook中导入.py文件 如何将 ipynb 发布到 blog 中(html, markdown格式) Introducing IPython Notebo ...
- 完美:C# Blazor中显示Markdown并添加代码高亮
昨天发了一篇介绍这个库:C# Blazor中显示Markdown文件,介绍怎么在Blazor中显示Markdown内容的文章,文章内的代码是没有高亮的,思来相去,还是要做好,于是百度到这篇文章.NET ...
- vscode markdown_VS Code中的Markdown插件
这篇文章已经介绍过如何下载和使用VSC作为Markdown编辑器: 蓝莓的铲屎官:[Markdown] 使用vscode开始Markdown写作之旅zhuanlan.zhihu.com 本文旨在介绍 ...
- 无意中发现Markdown,最终解放了我
文件夹 概述 换行 删除线 链接自己主动识别 表格 代码块高亮 定义列表 脚注 自己主动生成文件夹 參考资料 正文 概述 大部分情况下,Markdown的基本的语法已够我们使用,比方随性记录点东西.非 ...
- Pandoc中的Markdown语法
概述 Pandoc中支持扩展修订版本的Markdown语法 使用pandoc中支持的Markdown语法用 -f markdown 使用标准Markdown语法用 -f markdown_strict ...
- typora 公式对齐_快速上手丨Typora 中使用Markdown
Hello . 大家好 今天给分享Typora中markdown使用教程, 顺便公开鞭策(处刑)一下腾讯爸爸的公众号平台 我是charming 从公众号最初走到现在,公众号推文编辑.排版一直是个头疼的 ...
最新文章
- Nginx 403 Forbidden 排错记录汇总
- python文件读取与输出_python基本文件操作(文件输入和输出)
- 小黑小波比.sql语句截取字符串的子串
- eclispe的三个重要配置文件
- 安装elasticsearch-analysis-ik中文分词器
- 潍坊学院计算机系崔玲玲,人工免疫算法在引水工程中的应用.pdf
- Eclipse开发工具之崩溃和备份
- 美团酒店直连产品数据一致性演进
- Lego-美团接口自动化测试实践
- 使窗口(和 MDI 子窗口)的关闭按钮变灰的方法 - 回复 梦想成真
- P1350 车的放置
- 多层LSTM的坑:如何定义多层LSTM?
- 一次慢查询暴露的隐蔽的问题
- 操作系统 李治军 操作系统基础(一)
- 图像影音型计算机主板选择什么,开启4K新时代 七款家用影音主板推荐
- “地理-语言”大模型文心ERNIE-GeoL及应用
- CF 贪心+dp(动态规划) 01背包(做与不做)
- POJ-2632:Crashing Robots(C++实现详细代码)
- MGR新加节点一直recovering故障解决
- 二进制与8,10,16转换
热门文章
- nginx 知识点 :ctx_index and index
- Kafka史上最详细总结
- Delta Lake——数据湖的可靠性
- Bootstrap+jquery实现页面跳转【小demo】
- easyui树形菜单生成算法,及在关系型数据库中的存储方式(非递归,高效算法)
- JUC队列-ConcurrentLinkedQueue(四)
- JAXB 有两个名为 ** 的属性,类的两个属性具有相同名称 **解决方案
- 17.explain_api
- 【解题报告】Leecode 859. 亲密字符串——Leecode每日一题系列
- 【绝对有用】Syntax error on token “throws“, @ expected after this token