はじめに
いいわいいわ！ nikkieです。
Python Boot Camp（a.k.a. pycamp）のライディングページをSphinxで作って得た知見をアウトプットするシリーズ1です。
ランディングページをぜひご覧になっていただきたいのですが、ボタンやカードの並びがあるんです。
これを実現したsphinx-designというライブラリについて、ランディングページに関わる範囲で紹介しちゃいます！
目次
- はじめに
- 目次
- sphinx-design
- ボタン：button-linkディレクティブ
- カード：cardディレクティブ
- グリッド：gridディレクティブとitem用のディレクティブ
- アイコン（FontAwesome）
- 終わりに
sphinx-design
A sphinx extension for designing beautiful, view size responsive web components.
11月時点ではv0.3.0が最新です2。
pip install sphinx_designでインストールし、conf.pyのextensionsに加えます。
extensions = [
"sphinx_design",
]
これだけで、Sphinxのドキュメンテーションではあまり見ないかもしれないですが、Webページでは頻繁に見かけるパーツたちが使えるようになります！
sphinx-designのドキュメントはオシャレ
複数のテーマをサポートしていることを示すために、ドキュメントに複数の見た目があるんです！3
テーマ（見た目）が異なるだけで内容は同じだと思っています。
私はfuroテーマのドキュメントを見ることが多いです♨️
なお、pycampランディングページはalabasterテーマでsphinx-designを使っています。
では、パーツたちを見ていきましょう！
この記事ではreSTでの書き方を紹介していきますが、sphinx-designはMarkdownにも対応していて、ドキュメントにはMarkdown記法も掲載されています。
ボタン：button-linkディレクティブ
外部へのリファレンスのボタンはbutton-linkディレクティブで実現できます！
（内部へのリファレンスのボタンの場合はbutton-refみたいです）
pycampランディングページの例はこちら：
.. button-link:: https://docs.google.com/forms/d/1IANh21fievi_lyyQyL8II66RSxlVuHBdAhr05C1qv9c/viewform
:align: center
:class: sd-rounded-pill sd-px-4
問い合わせる
中央揃えにし、横方向のパディングとボタンの角丸をクラスで指定しました。
他にもパラメタを指定できますので、ドキュメントをご確認ください。
カード：cardディレクティブ
SphinxでビルドしたHTMLでカードも使えます。
カードにもヘッダーとフッターがあり、デリミタで指定します。
^^^より上がカードのヘッダー、+++より下がカードのフッターです。
.. card:: Card Title
Header
^^^
Card content
+++
Footer
カードには画像を含めることができ、:img-top:や:img-bottom:で指定します。
ランディングページではグリッドに並べるために、grid-item-cardディレクティブ（後述）を使いました。
これはcardディレクティブのパラメタ全てにグリッド用のパラメタを加えたディレクティブです。
なので、ここで紹介したカードの記法は、grid-item-cardでも使えます。
グリッド：gridディレクティブとitem用のディレクティブ
12カラム分割に基づいたグリッドが使えます。
画面サイズに応じたカラム数をgridディレクティブに指定します。
pycampランディングページでは
.. grid:: 1 1 2 3
- extra-small (<576px) で1カラム
- small (768px) で1カラム
- medium (992px) で2カラム
- large (>1200px) で3カラム
と指定しています。
ブラウザの横幅を変えるとカラム数が変わるので、試してみてください！4
gridディレクティブの中にはgrid-itemディレクティブ、またはgrid-item-cardディレクティブを置けます。
pycampランディングページの例：
.. grid:: 1 1 2 3
.. grid-item-card:: `@pyohei <https://github.com/pyohei>`__
:img-top: _static/impressions/pyohei.jpg
:class-header: sd-text-center
:class-title: sd-text-center sd-fs-3
運営スタッフ
^^^
運営スタッフとしてPythonを学ぶ方たちのサポートができ、やりがいと充実感を感じました。
.. 以降のgrid-item-cardは省略します（見たい方はGitHubリポジトリ https://github.com/pyconjp/pycamp.landing_page をどうぞ！）
さらにドキュメントには、グリッドの行ごとの列幅の調整や、グリッドのネストなども紹介されています。
アイコン（FontAwesome）
FontAwesomeのアイコンも使えます！
使うにはconf.pyでhtml_css_files5にFontAwesomeのCSSの読み込みを指定する必要があります。
sphinx-designのインストールによりfa*ロールが有効になっていて、CSSが指定されていれば、ビルドされたHTMLではFontAwesomeのアイコンが表示されます。
（ランディングページではなく）sphinx-revealjs製のスライドで使った例がこちら：
* :fab:`twitter` `@ftnext <https://twitter.com/ftnext>`__ ／ :fab:`github` `@ftnext <https://github.com/ftnext>`__
終わりに
pycampのランディングページで使った範囲でsphinx-designを紹介しました。
Sphinxのドキュメントとしては必須ではないと思われますが、Webページとしてはあると嬉しいパーツのディレクティブやロールが提供されます。
グリッドレイアウトはSphinxのドキュメントでも2カラム併記といった使いどころはあるかもしれませんね。
ランディングページ作成では大いに助けていただきました。
開発者の方々、ありがとうございます！👏
いいなと思った方はぜひ使ってみてください！
