simple Tableを使って進捗管理やマークダウン記法での表を作ろう
simple tableがAPIに追加されました。
即効アルパカ先生にメンション付けてツイート(*^^*)♫
easy-notion-blogに1/10(日)追加されました＼(^o^)／
https://github.com/otoyo/easy-notion-blog/pull/21
simple tableの呼び出し方
【Table】を選ぶ
使うとこんな感じ
▼Notion内での見え方
▼ブログ上での見え方
| A列 | B列 | |
| 1行 | A1 | B1 |
| 2行 | A2 | B2 |
列名や行名の部分を塗る
Optionsをクリック
【Header column】【Header row】をONにする
▼ Norion内での見え方
▼ ブログ上での見え方
| A列 | B列 | |
|---|---|---|
| 1行 | A1 | B1 |
| 2行 | A2 | B2 |
実際に使ってみる①
Next.js Learnで学んだことをGitHubにまとめた目次
https://github.com/herohoro/next.js_learn
これ、実はNotionで下書きをしてました。。。
👆
この表をブログで公開すればわざわざリポジトリのREADMEを経由せずにアクセスできる！
やってみよう＼(^o^)／
| Learn_section名 | Learn_lesson名 | 概要 | 対応commit |
|---|---|---|---|
| Create a Next.js App | Setup | 準備 | first |
| Create a Next.js App | Editing the Page | 見出し文字を編集 | Edit page_h1 |
| Navigate Between Pages | Pages in Next.js | ページ作成 | Add posts/first-post |
| Navigate Between Pages | Link Component | ページ間リンク設置 | Add link_pages |
| Assets, Metadata, and CSS | Assets | 画像追加 | Add profile.jpg |
| Assets, Metadata, and CSS | Metadata | タブ名変更 | Add tabName |
| Assets, Metadata, and CSS | Third-Party JavaScript | ログ仮設置 | Add script_console-log |
| Assets, Metadata, and CSS | Layout Component | Layoutで装飾 | Add first-post_CSS |
| Assets, Metadata, and CSS | Global Styles | global cssで<a>文字色変更 | global.css <a>color |
| Assets, Metadata, and CSS | Polishing Layout | 条件分岐でLayoutや文字回り(utils)の装飾 | Add 条件分岐でLayout_CSS |
| Pre-rendering and Data Fetching | Implement getStaticProps | mdデータの取得後一覧表示 | Add mdデータを収集して一覧表示にする |
| Dynamic Routes | Implement getStaticProps,Implement getStaticPaths | 本文の一部を表示 | Add 本文表示 |
| Dynamic Routes | Render Markdown | 本文全内容を表示 | Add 本文内容表示 |
| Dynamic Routes | Polishing the Post Page | 本文タイトル・日付の装飾 | CSS 本文と日付 |
| Dynamic Routes | Polishing the Index Page | ページ間リンク | Add homeから各ページリンク |
| API Routes | Creating API Routes | APIを使って簡単表示 | Add api |
※ 「Next.js Learn で作ったコード【まとめ】」にも表を追記しました〜〜〜
実際に使ってみる②
今までsupport確認用ページをNotion上で公開してました。
このページの中にsimple tableを埋め込んで進捗報告をしてました。
simple tableが使えるようになったので
公開pageを経由しなくても確認できるようになった＼(^o^)／
埋め込んでみると・・・・
↓
ブログではこんな感じ
https://herohoro.com/blog/support_check
Notionのtable小ワザ
simple tableをコピーしてマークダウンで記入するような場所に貼り付けると
普通にマークダウン版の表に変換してくれます。
- VSCode
テキストにリンクを埋め込んだ状態で貼り付けるとテキストのみになってしまう。
貼り付けた後、リンク埋め込みの修正が必要😅
- GitHub comment
↓
マークダウンで記入するのは個人的に苦手なので
他の部分もNotionでの下書きを経由してから作成していたりしますm(_ _)m
Notion便利(*´ω｀*)
下書きした表をそのままブログに活用できてしまうのは画期的＼(^o^)／
今回追加された機能に関するコードはこちら
▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね
新着記事を通知したい？？
RSSリーダーにatomのリンクを登録すると通知が行くよ🐌
https://herohoro.com/atomやってみてね(*´ω`*)(*´ω`*)
Posts in the same tag
Tag List
Latest posts
Twitter Timeline
フォロー大歓迎＼(^o^)／
Posts in the same tag
Latest posts
Tag List
Twitter Timeline
フォロー大歓迎＼(^o^)／