Vuejsでmarkdownサーバー端を使ってレンダリングした例

3628 ワード

Vue markdown

あはは、またvuejsのpackageを紹介しに来ました。miaolz 123/vue-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';
<template>
 <div>
  <vue-markdown :source="comment.body"></vue-markdown>
 </div>
</template>

export default { // ... other codes
 props:['comment'],
 data(){  
  return {
   comment : this.comment
  }
 }, 
 components: {
  VueMarkdown
 }, 
// ... other codes
}

これをレンダリングする時：


<div class="comments">
 <div class="comments" v-for="comment in comments">
  <comment :comment="comment">
  </comment>
 </div>
</div>

ここで私達はまずcomment propsを通じて(このcommentは対象です)、Comment.vueを通して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: `
      <div>
        <div class="main" v-html="main"></div>
      </div>`
    });
    //       
    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);


<!DOCTYPE html>
<html lang="CH-ZN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>{{htmlTitle}}</title>
</head>

<body>
  <!--vue-ssr-outlet-->
</body>

</html>

締め括りをつける
本論文で紹介したvue-markdownは、いくつかのアプリケーションシーンの中では超使いやすいです。特に、コメントシステムに対してmarkdownの需要をサポートしたいです。皆さんの勉強に役に立つように、私たちを応援してください。

Androidトリミング画像の実現方法の例

ListviewでButtonがフォーカスを奪う解決方法