怎么把一段html字符串，渲染到模板？

axetroy commented 7 years ago

Node Version:
Egg Version:
Plugin Name:
Plugin Version:
Platform:

想渲染markdown，用marked去读取，编译成html之后，如何插入模板。

// controller/home
module.exports = app => {
  class HomeController extends app.Controller {
    * index() {
      const data = {};

      let text = fs.readFileSync(path.join(app.baseDir, 'README.md'));
      data.content = marked(text + '');

      yield this.ctx.render('home.tpl', data);
    }
  }
  return HomeController;
};

<!-- home.tpl -->
<html>
<head>
    <title>Egg HackerNews Clone</title>
</head>
<body>
<div>
{{content}}
</div>
</body>
</html>

渲染出来的是div内的纯字符串求教如何渲染到innerHTML，而不是innerText

atian25 commented 7 years ago

扩展下 view 插件即可，见示例 https://github.com/eggjs/egg-view-nunjucks/pull/10

atian25 commented 7 years ago

至于 innerHtml 这属于 nunjucks 的语法了，看看它的文档即可，手机上现在不好找。

另外也需要注意安全问题，看看我们的安全文档，还有 view 插件源码的 test 目录，里面有 shtml 的示例

axetroy commented 7 years ago

@atian25 nunjucks语法看了半天，没看出来有直接绑定到innerHTML的，{{}}是纯字符串...

当然能自定义标签，自定义解析，那最好了

axetroy commented 7 years ago

@atian25 不管怎么说，谢谢了。已经解决

popomore commented 7 years ago

是说被转译了吗，用 {{ content | safe }}

Axetroy notifications@github.com于2017年2月11日周六18:06写道：

@atian25 https://github.com/atian25 nunjucks http://mozilla.github.io/nunjucks/cn/templating.html 语法看了半天，没看出来有直接绑定到innerHTML的，{{}}是纯字符串...

当然能自定义标签，自定义解析，那最好了

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/eggjs/egg/issues/351#issuecomment-279134216, or mute the thread https://github.com/notifications/unsubscribe-auth/AAWA1fmFarN8LO5T26UuVl_2er8e2QPFks5rbYgwgaJpZM4L-Inn .

axetroy commented 7 years ago

@popomore {{ content | safe }}也只是转移成安全的字符串，转义这样的字符串，防止xss攻击

看了 @atian25 的方法，加入nunjucks-markdown就好了

完整代码实现：

// controller
const fs = require('fs');
const path = require('path');

const marked = require('marked');
const markdown = require('nunjucks-markdown');

// 这里自定义一个renderer，把mermaid流程图集成到markdown里面
const renderer = new marked.Renderer();
renderer.code = function (code, language) {
  if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
    return '<div class="mermaid">' + code + '</div>';
  }
  else {
    return '<pre><code>' + code + '</code></pre>';
  }
};

function markedWithGraph(str) {
  return marked(str, {renderer});
}

module.exports = app => {

  markdown.register(app.viewEngine, markedWithGraph);

  class MarkdownController extends app.Controller {
    * index() {
      const data = {};

      data.raw = fs.readFileSync(path.join(app.baseDir, 'README.md')) + '';

      yield this.ctx.render('home.tpl', data);
    }
  }
  return MarkdownController;
};

// router
module.exports = app => {
  app.get('/', 'home.index');
  app.get('/md/:file', 'md.index');
};

<html>
<head>
    <title>Egg HackerNews Clone</title>
    <link href="//cdn.bootcss.com/mermaid/7.0.0/mermaid.min.css" rel="stylesheet">
</head>
<body>

{% markdown %}
{{raw}}
{% endmarkdown %}

<script src="//cdn.bootcss.com/mermaid/7.0.0/mermaid.min.js"></script>
<script>
  mermaid.initialize({
    startOnLoad: true,
    flowchart: {
      useMaxWidth: false,
      htmlLabels: true
    }
  });
</script>
</body>
</html>

popomore commented 7 years ago

Safe 就是说这个字符是安全的，不会进行转译 Axetroy notifications@github.com于2017年2月11日周六18:52写道：

@popomore https://github.com/popomore {{ content | safe }}也只是转移成安全的字符串，转义这样的字符串，防止xss攻击

看了 @atian25 https://github.com/atian25 的方法，加入nunjucks-markdown就好了

完整代码实现：

// controllerconst fs = require('fs');const path = require('path'); const marked = require('marked');const markdown = require('nunjucks-markdown'); // 这里自定义一个renderer，把mermaid流程图集成到markdown里面const renderer = new marked.Renderer();renderer.code = function (code, language) { if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) { return '
' + code + '
'; } else { return '
' + code + '
'; } }; function markedWithGraph(str) { return marked(str, {renderer}); } module.exports = app => {

markdown.register(app.viewEngine, markedWithGraph);

class MarkdownController extends app.Controller {

index() { const data =

{};

data.raw = fs.readFileSync(path.join(app.baseDir, 'README.md')) + '';

yield this.ctx.render('home.tpl', data); } } return MarkdownController; };

// routermodule.exports = app => { app.get('/', 'home.index'); app.get('/md/:file', 'md.index'); };
Egg HackerNews Clone {% markdown %} {{raw}} {% endmarkdown %}
— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/eggjs/egg/issues/351#issuecomment-279136423, or mute the thread https://github.com/notifications/unsubscribe-auth/AAWA1bewnB3rajPNeJAQdsLFNmjd5jVTks5rbZMAgaJpZM4L-Inn .

junmaqiang commented 7 years ago

希望对你有用我是这样解决的 <td class="text-center">{{helper.statusShow(item.status) | safe}}</td>

eggjs / egg

怎么把一段html字符串，渲染到模板？ #351