hタグをまとめて上部にアンカーリンクを置く
とりあえずhタグが全部リンク化されている状態にしたい
とりあえずフルスクラッチで作ろう
bodyをデータで持ってるからそれからhタグを検索。 idはmicroCMSがどうしてるのか調査したい
見出し5って使うの?パラグラフより小さいけど
とりあえず頑張って作る
<h1>-<h5>までのタグを正規表現で切り取り
let reg = /<h[1-5].*?<\/h[1-5]>/g;
let tables = payload.post.body.match(reg);
microCMSだとh1-h5は自動でidを振ってくれるのでひと手間減って便利
if(tables){
for(let i=0;i<tables.length;i++){
let obj = {
"tag" : tables[i].slice(1,3),
"id" : '#' + tables[i].match(/".*"/)[0].slice(1).slice(0,-1),
"text" : tables[i].match(/>.*</)[0].slice(1).slice(0,-1),
}
t.push(obj);
}
}
横全面だとダサいのでgridでmd=4へ いい感じ
<b-container class="p-0 m-0">
<b-row>
<b-col md="4">
<div class="tableofcontent bg-light p-2 mb-2" v-if="t[0]">
<b-list-group>
<p class="p-1 m-0 text-center"><strong>もくじ</strong></p>
<b-list-group-item class="py-1" v-bind:class="'t'+table.tag" v-bind:href="table.id" v-for="table in t">{{table.text}}</b-list-group-item>
</b-list-group>
</div>
</b-col>
<b-col>
</b-col>
</b-row>
</b-container>
h1-h5でインデントをCSSでつけている
.th1{
padding-left: 0.5rem !important;
}
.th2{
padding-left: 1.0rem !important;
}
.th3{
padding-left: 1.5rem !important;
}
.th4{
padding-left: 2.0rem !important;
}
.th5{
padding-left: 2.5rem !important;
}
やったぜ