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;
}
やったぜ
【Web表現チェンジャー】PlayCanvasに追加された3Diframeサンプルが控えめに言ってヤバい
2021年1月13日(水) 15時21分41秒 | 91 viewPlayCanvasを使用してLooking Glassアプリを作成する:Looking Glass WebXR SDKの利用ガイド
2023年6月9日(金) 23時55分47秒 | 55 viewncmbのREST APIでエラー{"error":"12.16.1 is invalid version","status":400,"code":"E400001"}が出る
2022年10月9日(日) 12時41分30秒 | 22 viewパスワード付き記事を作った
2021年9月24日(金) 7時12分55秒 | 21 view健康生活
2020年11月5日(木) 14時57分32秒 | 6 view