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;
}
やったぜ
Google Analytics Reporting API v4からGoogle Analytics Data API(GA4)に切り替えた
2023年2月5日(日) 19時3分45秒 | 407 viewグリグリリック 開発秘話
2020年12月8日(火) 4時30分37秒 | 145 viewLIFF(LINE)ブラウザでwindow.prompt()が期待する動作をしない
2021年10月16日(土) 14時22分50秒 | 81 view埋め込み要素(iframe / embed)をいい加減対応させたい
2021年6月9日(水) 1時2分54秒 | 60 view目次をデフォルトで開いたり、開いたり閉じたりを検出したい
2020年10月30日(金) 9時52分28秒 | 18 view