Vuepressで吹き出しを実装する

Vuepressで吹き出しを実装します．主にcssの設定をVuepressでどうのように実装するかの流れになります．

有料枠設定にしていますが，下記のサイトで他の記事もみれます．youtubeの投げ銭的な物として，お考えください．

Vuepressで吹き出しを実装する

本稿の成果物

ファイル構成

ファイル構成は以下通りです．

hamlet_engineer
└── src
   ├── public
   │   └── hirasu1231.jpg
   └── .vuepress
       ├── (省略)
       ├── styles
       │    └── index.styl
       └── config.js

概要

Custom Containerという，文字に対する装飾ではなく，ブロックに対してデザインを付与する仕組みを利用します．

公式の説明ページはこちら (opens new window)です．

これを利用してMarkdownに以下のコードを記述すると、吹き出しも出すことができるようになります．

::: bubble9
このような吹き出しを追加します．
:::

このような吹き出しを追加します．

Vuepressでの吹き出し

プラグインのインストール

Custom Containerはvuepress-plugin-containerというプラグインで導入されています

以下のコマンドでvuepress-plugin-container (opens new window)というプラグインをインストールします．

yarn add vuepress-plugin-container

vuepress-plugin-containerの設定

.vuepress/config.jsに以下のコードを追記します．

module.exports = {
   ...,
   plugins: [
     ...,
     // 吹き出し
     'vuepress-plugin-container': {
       type: 'bubble9',
       defaultTitle: '',
       before: info => `<div class="bubble9"><div class="imgs"><img src="/hirasu1231.jpg" alt=""></div><div class="chat"><div class="ss">${info}`,
       after: '</div></div></div>',
     },
   ],
 }

吹き出しのデザイン

.vuepress/styles/index.stylに以下のコードを追記して，吹き出しのデザインを調整します．

ベースはcssですが，tab区切りとスペース区切りになっています．

/* 吹き出し*/
/*以下、②左側のコメント*/
.bubble9 
 width 100%
 margin 1.5em 0
 overflow hidden
 
.bubble9
 .imgs 
   float left
   margin-right -90px
   width 75px
   
.bubble9 
 .imgs img
   position relative
   top 10px
   width 95%
   height auto
   border solid 3px #1976D2
   border-radius 50%
   
.bubble9
 .chat 
   width 95%
   
.ss 
 margin 16px
 position relative
 padding 10px
 border-radius 10px
 color #000000
 background-color #BBDEFB
 margin-left 90px
 
.ss
 :after 
   content ""
   display inline-block
   position absolute
   top 20px 
   left -24px
   border 12px solid transparent
   border-right 12px solid #BBDEFB
   
.ss p 
 margin 16
 padding 10

まとめ

Vuepressで吹き出しを実装しました．吹き出し以外にも追加できそうです．

参考サイト

Vuepressで吹き出しを実装する