プロジェクトドキュメント構築向け静的サイトジェネレータ「Material for MkDocs」の色々な設定を試してみる(フッター編)

#MkDocs

しんや

2021.05.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

下記エントリで紹介したプロジェクトドキュメント構築向け静的サイトジェネレータ「Material for MkDocs」。日々アップデートが行われており、便利な機能や設定が利用出来るようになっています。

このエントリでは「現時点での最新バージョンではどんなことが出来るのか」という観点で、Material for MkDocsの「フッター」に関する項目を色々試してみた内容を紹介します。

初期環境設定とコンテンツの準備

初期環境設定とコンテンツの準備については、下記エントリの同見出し部分の内容をご参照ください。

プロジェクトドキュメント構築向け静的サイトジェネレータ「Material for MkDocs」の色々な設定を試してみる(ナビゲーション編) | DevelopersIO

「Material for MkDocs」で利用可能な主な設定

ここからは、下記ドキュメントの内容のものを検証してみます。

Setting up the footer - Material for MkDocs

ソーシャルリンクの追加

この設定を追加すると、ヘッダー部分にソーシャルなリンクをアイコン付きで著作権情報の横に表示出来ます。iconで表示させるソーシャルメディアのアイコンを、linkで参照リンクをせていすることが出来ます。

extra:
  social:
    - icon: fontawesome/brands/twitter
      link: https://twitter.com/classmethod
    - icon: fontawesome/brands/facebook
      link: https://www.facebook.com/classmethod

設定可能なアイコンは下記githubのページで確認することが出来ます。

mkdocs-material/material/.icons/fontawesome at master · squidfunk/mkdocs-material · GitHub

上記設定の内容を確認してみます。リンク付きでSNSアイコンを表示させることが出来ました。

著作権に関する記載

フッター部分にコピーライトに関する記述を載せることが出来ます。copyright:のあとに文字列を設定するだけでOKです。

copyright: Copyright © 2011 - 2021 Classmethod, Inc.

以下のような形で著作権情報が表示されます。

mkdocs.ymlテンプレートファイル(設定追記済)

このエントリで紹介した設定内容を追記したmkdocs.ymlファイルの記載例は以下の通りです。個人的な好みから有効化したもの、コメントアウトしたものがありますが、実際にご利用される際はカスタマイズして頂けますと幸いです。

注)設定内容は下記エントリの内容を経たものとなっています。

site_name: "DevelopersIO Mkdocs Site."


## Contents Navigation
nav:

- はじめに:
    - はじめに: index.md
    - 環境設定: settings.md
- 概要:
    - DevelopersIOについて: overview/overview.md
- ジョインブログ執筆:
    - ログイン: join-blog-flow/login.md
    - アカウントの確認と設定: join-blog-flow/account.md
    - ジョインブログに書く内容: join-blog-flow/topics.md
    - 記法: join-blog-flow/notation.md
    - 執筆フロー: join-blog-flow/writing-flow.md

theme:

  name: material      # Material for MkDocsを利用
  custom_dir: overrides

  features:           # 各種機能
    - navigation.instant     ## mkdocs for MaterialのSPA対応
    - navigation.tabs        ## トップレベル項目を画面上部メニューにタブ表示
    ##- navigation.sections  ## 項目のセクション表示 
    ##- navigation.expand    ## 初期表示で全てのページ展開を有効化
    - navigation.top       ## ページTOP遷移ボタンを有効化
    - toc.integrate        ## 画面左右のメニューを統合

    - header.autohide



  palette:            # 色に関する設定
    scheme: default  ## カラースキーム設定(default:ライトモード、slate:ダークモード)
    ##primary: orange  ## プライマリーカラー設定(ヘッダー背景色、サイドバー背景色、テキストリンク等)
    ##accent: green    ## アクセントカラー設定(ホバーされたリンクやボタン、スクロールバー等)

    ##- scheme: default   ## カラースキーム切替設定(ライトモード時)
    ##  primary: yellow
    ##  accent: red
    ##  toggle:
    ##    icon: material/weather-sunny
    ##    name: Switch to dark mode
    ##- scheme: slate     ## カラースキーム切替設定(ダークモード時)
    ##  primary: cyan
    ##  accent: light green
    ##  toggle:
    ##    icon: material/weather-night
    ##    name: Switch to light mode



extra_css:  ## CSS追加設定定
    ##- stylesheets/extra.css


extra:
  social:  ## ソーシャルリンク設定
    - icon: fontawesome/brands/twitter
      link: https://twitter.com/classmethod
    - icon: fontawesome/brands/facebook
      link: https://www.facebook.com/classmethod 


copyright: Copyright © 2011 - 2021 Classmethod, Inc.  ## 著作権情報