カスタマイズ

基本的に既存のプラグインでほとんどのことがカスタマイズできると思います。ただ、バージョンの依存関係の問題なのかうまく動かないものも散見されました。

プラグイン

npm - https://www.npmjs.com/
基本的には上記のnpmのサイトでgitbook-pluginまたはhonkit-pluginで検索してVScode(ターミナル)からインストールすることになります。

プラグイン名をbook.jsonのpluginsに登録することで有効になります。
さらにそのプラグインに設定ができる場合はpluginsConfigに記載します。そのプラグインのnpmのページか製作者のGithubのページに記載されていることが多いです。
そのプラグインを自分で編集してしまうのも一つの手です。

実際にプラグインをインストールしてみる

試しにbottom-navigationを入れてみましょう。

まずはVSCodeのターミナルからnpmでインストールします。

npm i gitbook-plugin-bottom-navigation --save-dev

package.jsonをみるとgitbook-plugin-bottom-navigationが増えているのがわかるはずです。

次にbook.jsonを開いてpluginsに下記を追加します。

"bottom-navigation",

さらにpluginsConfigに下記を追加します。
nullの所に Hex でお好みのカラーコード(ネームもおｋ)を入れてください。何も入れなければデフォルトカラーになります。
おぬぬめツール - ここは他にも便利ツールがあります。

"bottom-navigation": {
    "iconColor": "null",
    "titleColor": "null",
    "borderColor": "#3884FE"
}

結果的には下記みたいになります。

{
    "root": "./source",
    "plugins": [
        "theme-default",
～　中略　～
        "bottom-navigation",
        "insert-logo-link-style",
        "toggle-chapters"
    ],

    "pluginsConfig": {
        "bottom-navigation": {
            "iconColor": "red",
            "titleColor": "777777",
            "borderColor": "#3884FE"
        }
    }
}

ローカルで確認してみる

ここで一度どうなっているか見てみましょう。
ターミナルで下記を実行してみてください。

npx honkit serve

ブラウザから http://localhost:4000 にアクセスして、一番下を見るとプラグインの機能が追加されているはずです。 Ctrl+C で停止します。
ついでにブラウザの右下を見ると [報告するる] というボタンがある事を確認しておいてください。

スタイルシート

ヘッダーなどのデザインを変更したい時にはその方法はいくつかあります。上述のプラグインを利用したり、あるいは自ら作ってしまうのもひとつです。

HonKitの公式サイトによると「ソースから直接テーマのテンプレートを拡張できる」とあります。しかし「さくさくっと」いきたいのでココではスタイルシートの拡張についてのみ軽く紹介するだけにします。

まずbook.jsonに拡張スタイルシートの指定をします。
※サンプルをコピペした方はすでに入っています

"styles": {
    "website": "styles/website.css",
}

次にディレクトリとファイルを作成します。

mkdir ./source/styles && type nul > ./source/styles/website.css

このwebsite.cssに別ページのサンプルをコピペしてください。
再度npx honkit serveを実行してみてください。

まずタイトルに下線が増えました。
さらに先ほど確認した [報告するる] のデザインがJsprimerと同じになりました。
このようにデザインの変更が可能です。興味がある方は、project/node_modules/@honkit/honkit-plugin-theme-default/_assets/website/style.cssを見ていじってみてください。

ただスマホで見るとJsprimerでは非表示になっているのですが、そこまでやるのはめんどいのでぼくは根本的に消しました。下記を実行すれば消せます。

npm r gitbook-plugin-github-issue-feedback

プラグインを使わずにfaviconを変更する

結論だけ言うとproject/node_modules/@honkit/honkit-plugin-theme-default/_assets/website/imagesの画像を同じ名前にして入れ替えるだけです。

ちなみに、デフォルトのapple-touch-icon-precomposed-152.png は 180x180-96dpi
favicon.ico は 48x48-96dpi になっていました。

そのほかのデザイン変更

正攻法なのかどうかよくわかりませんが、このサイトで実際にやった変更を記載しておきます。

テーマのデフォルトカラーを変更

Nightカラーが気に入ったのでコレがデフォルトになるように変更しました。
project/node_modules/gitbook-plugin-fontsettings/assets/fontsettings.jsの168行目を次のようになるように付け足して変更すればできます。

theme:  configTheme || 2

toc-button-backの色を変更

Nightモードの時の色が変だったので変更しました。
project/node_modules/@dogatana/honkit-plugin-page-toc-button/assets/plugin.css の84行目のrgbの数値を38, 40, 56, 0.9に変更しました。

リンク付きのロゴ画像を追加する

これはinsert-logo-link-styleプラグインを使っています。
ファルダを作成して、そこにロゴの画像を置きます。

mkdir ./source/assets

linkにはLINEのオープンチャットやDiscordなど好きなURLを入力してください。不要なら空にすればいいです。