コンテンツにスキップ

MkdocsとLaravelの連携

MkdocsとLaravelの連携のお話です＾＾

悩み

Mkdocsのみでは静的ページなので動的な機能を実装するのは骨が折れます。
なので動的部分を何かしらで実装しないといけないですが、さてどうしたものか・・・🤔

実現したいこと

なぜ動的機能が欲しいかというと、例えば商品リンクなどを貼る際に時間がたつとリンク切れなどを起こしたりします。 それを起こさないためにAPI経由で新鮮な情報を取得できればリンク切れなどの保守対応がなくなって違うことに時間を使えるからです。
また、今後コメントなどの機能を実装するなどもあるかもしれないので慣れているLaravelを使いたかったのもあります。

実現方法

簡単に書くと、Mkdocsの出力htmlファイルをテンプレートとしてLaravelで使うという感じです。
でもテンプレートにバインド(アサイン)できないじゃん！と思われる方もいるかもしれません。
しかしLivewireを使えば実装可能なのでこちらを使っていきます。

sequenceDiagram Mkdocs ->> Laraavel View Directory: mkdocs build Laraavel ->>+ Laraavel View Directory : 読み込み Laraavel View Directory -->>- Livewire : 読み出し

ディレクトリ構成

私は複数作りたいのでディレクトリをわけてますが、一つでも問題ないです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
└─views
    ├─livewire
    └─mkdocs
        └─car
            ├─docs
            │  ├─WEB
            │  │  └─Mkdocs
            │  ├─...
            │  ├─...
            │  └─...
            └─site
                └─WEB
                    └─Mkdocs

私の場合はmkdocs作業場所は resources\views\mkdocs\car\ にしています。

mkdocs buildを実行してsiteに出来上がると思いますが、これをLaravelのテンプレートとして使用します。

Livewire連携

動的機能はLivewireで実現するので、組み込みます。

Mkdocsで動的機能を入れたいか所で@livewire('hogehoge')これを入れればOK。

あとはLaravel側で実装していけば大丈夫です。

自動でテンプレートを読み込む

超適当にやっているのでエラーなども普通に出ますｗ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
Route::get('/', function () {
    View::addExtension('html', 'blade');
    return view('mkdocs.car.site.index');
    return View::file(resource_path('\views\mkdocs\car\site\index.html'));
});



Route::get('/{hoge}.js', function ($hoge) {
    View::addExtension('js', 'file');
    return response()->file(resource_path('\views\mkdocs\car\site\\' . $hoge . '.js'), ['Content-Type' => 'text/javascript']);
})->where(['hoge' => '.*']);


Route::get('/{hoge}.css', function ($hoge) {
    View::addExtension('css', 'file');
    return response()->file(resource_path('\views\mkdocs\car\site\\' . $hoge . '.css'), ['Content-Type' => 'text/css']);
})->where(['hoge' => '.*']);

Route::get('/{hoge}.png', function ($hoge) {
    View::addExtension('png', 'file');
    return response()->file(resource_path('\views\mkdocs\car\site\\' . $hoge . '.png'), ['Content-Type' => 'image/png']);
})->where(['hoge' => '.*']);

Route::get('/{hoge}.jpg', function ($hoge) {
    View::addExtension('jpg', 'file');
    return response()->file(resource_path('\views\mkdocs\car\site\\' . $hoge . '.jpg'), ['Content-Type' => 'image/jpg']);
})->where(['hoge' => '.*']);

Route::get('/{hoge}.woff2', function ($hoge) {
    View::addExtension('woff2', 'file');
    return response()->file(resource_path('\views\mkdocs\car\site\\' . $hoge . '.woff2'), ['Content-Type' => 'application/octet-stream']);
})->where(['hoge' => '.*']);


Route::get('/{hoge}.json', function ($hoge) {
    View::addExtension('json', 'file');
    return response()->file(resource_path('\views\mkdocs\car\site\\' . $hoge . '.json'), ['Content-Type' => 'application/json']);
})->where(['hoge' => '.*']);


Route::get('/{hoge?}', function ($hoge) {
    View::addExtension('html', 'blade');
    View::addExtension('ico', 'file');
    return View::file(resource_path('\views\mkdocs\car\site\\'. $hoge ?? 'index.html'));
})->where(['hoge' => '.*']);

これでBlade経由でLivewireを使用できます。

Rakuten Web Service Center