VuePressを拡張する
検索ボックスの位置を変更する
VuePressのオリジナルのレイアウト・機能でも十分な品質を提供されていますが、オリジナルサイトを構築する場合はある程度レイアウトや機能を拡張する必要があります。ここでは拡張の例として検索ボックスの位置をデフォルトから変更します。
- コマンドラインツール（Windowsであればコマンドプロンプト、Macであればターミナル）を開く。
- 本プロジェクトのルートフォルダに移動する。
- 下記のコマンドを実行する。
$ vuepress eject
DONE Copied default theme into /Users/yonekurayuuki/jamstack/.vuepress/theme.
2
3
.vuepress/theme/componentsフォルダのNavbar.vueファイルをVisual Studio Codeで開く。<NavLinks class="can-hide"/>と書かれた行を<AlgoliaSearchBoxの上の行に移動する。.search-boxと書かれた行の下行にmargin-left 1remを追加する。
.search-box
margin-left 1rem //この行を追加する。
flex: 0 0 auto
2
3
- GitHubにデータをプッシュする。
- 公開サイト上の検索ボックスの位置が右端に変更されていることを確認する。
ヒント
VuePressはVue.jsと呼ばれるJavaScriptフレームワークを利用して作成されています。VuePressのレイアウトや機能を拡張する場合は、Vue.jsの知識が必要になります。 Vue.jsについて詳しく知りたい場合は下記をご参照ください。
デザインを変更する
スタイルシートを拡張して自由にデザインを変更できます。
.vuepressフォルダ内にstylesフォルダを作成する。
注意
.vuepress/themeフォルダ内のstylesフォルダとは別に、.vuepressフォルダの直下にstylesフォルダを作成します。
- 作成した
stylesフォルダにindex.stylファイルを作成し、Visual Studio Codeで開く。 - 下記のコードを記載して保存する。
.sidebar
background-color #eef
2
ヒント
style.stylは、Stylus記法と呼ばれる拡張CSSを使用します。 Stylus記法の知識がない場合、通常のCSSでも表現できます。
.vuepress/stylesフォルダにpalette.stylファイルを作成し、Visual Studio Codeで開く。- 下記のコードを記載して保存する。
$accentColor = blue
GitHubにデータをプッシュする。
サイドメニューの背景色とアクセントカラーが変更されたことを確認する。
その他の拡張の可能性
ここでは詳細を避けますが、VuePressを使ったドキュメントサイトはさらに多様な拡張が可能です。 下記に主だった拡張の選択肢を羅列します。
全文検索エンジンの設定
VuePressの標準設定では、検索ボックスはタイトル部分しか検索できません。Webマニュアルとして公開するためには、最低限全文検索の仕組みを実装する必要があります。 幸いなことにVuePressは標準でAlgolia Searchと呼ばれるSaaSを利用するように設計されています。 ここでは詳細を避けますが、Algoliaを利用すれば、高速な全文検索機能を実現できます。
PWAの設定
PWAはGoogleが提唱したWebサイトをモバイルアプリのように動作させるための仕組みです。最近はAndroidだけでなくiOSにも対応されているため、ほぼ全てのスマートフォンで活用できます。 PWAを利用することで、Webサイト全体をクライアント端末側にインストールできます。VuePressを使って生成したHTMLはSPA機能によって十分に高速化できていますが、PWAは端末上にインストールしたファイル群を表示するために更なる高速化を期待できます。 また、Firebase上のコンテンツを更新した場合、PWAサイトを見ているユーザーにサイトの更新を促すようなメッセージを表示されることもできます。 VuePressはPWA化の仕組みも標準で持っているため、簡易にPWA化を実現できます。
Markdown記法の拡張
標準のMarkdownを拡張し、絵文字や、FontAwesomeなどのアイコン、数式、UML、グラフなどを表現できます。VuePressのMarkdown記法拡張用の各種プラグインがすでに多くの開発者の手による提供されているため、プラグインを導入すれば簡易にMarkdownの表現を拡張できます。
CSSフレームワークの導入
デザインを変更するで説明したように、VuePressではStylus記法でデザインを拡張できますが、簡易に高品質なデザインを実現するためにCSSフレームワークを利用することもできます。
tailwindcssと呼ばれるCSSフレームワークなどを使うことで、下記のように複雑なコンポーネントを簡易に実装できます。
アクセス解析ツールの導入
Googleアナリティクスなどのアクセス解析ツールも専用のプラグインをインストールすることで簡単に導入できます。
JAMStackシステムの導入支援、拡張サポート
株式会社ヒューマンサイエンスでは、JAMStackを利用した高速で、かつ低価格のWebマニュアル制作基盤構築のお手伝いをしております。
ご要件に応じてご提供するシステム基盤を拡張することもできます。
ご興味ございましたら弊社お問い合わせフォームでお問い合わせ内容をその他に選択し、「JAMStack」や「Markdown」、「GitHub」等と記載したうえで、ぜひお問い合わせください。