Search by

    markdownのfrontmattrerから、htmlテーブルを作る

    gatsbyで.mdファイルからhtmlテーブルを作成する方法

    • gatsbyのgatsby-transformer-remark を使うと.mdファイルの中身をHTMLにして読み込むことができる。その際、メタ情報をfront-matterとしてファイルのヘッダーに書き込むことができる。
    • この時、front-matterは.yaml形式になる模様。
    • この特性を利用すると、.mdのファイルから、reactにymalの中身を柔軟に流し込むことができる。
    • yamlでテーブル形式のデータを作成し、reactに流し込むコードをメモしておく。

    下記の様にデータを用意する。

    foo.md
    ---
    foo:
      - category: talk
        level: itsok
        description: prefer to read
    ---

    graphqlでデータを呼び出して下記の様にmapする。

    bar.js
    <table>
        {post.foo.map(( foo ) => (
        <tbody key={foo.category}>
        <tr>
            <th>{ foo.category }</th>
            <td>{ foo.level }</td>
            <td>{ foo.description }</td>              
        </tr>
        </tbody>
        ))}
    </table>

    もちろん、普通にmarkdownでテーブルを書いてもいいのですが、上記の方法は、レイアウトを柔軟にできると言う利点があります。

    例えば商品の個別ページとか作る時に、テーブルデータを好きな位置に置いてちょっとデコりたい、とか言う場合に使えるテクニックではないでしょうか。 DBいらずで、情報更新しやすいページを作成できると思います!

    Tags