検索バーをヘッダー ナビバー(navbar)に追加

vuePress 公開日: 2022-04-13 更新: 2022-05-18

プラグイン @vuepress/plugin-search@next をインストール

doc- plugin-search

npm i -D @vuepress/plugin-search@next

.vuepress/config.ts の plugins に追加

// docs/.vuepress/config.ts
// https://v2.vuepress.vuejs.org/guide/configuration.html
import { defineUserConfig, viteBundler } from 'vuepress'
// ...

export default defineUserConfig({
  // ...
  // === plugins === // https://v2.vuepress.vuejs.org/reference/config.html#plugin-config
  plugins: [
    registerComponentsPlugin({
      // このディレクトリのファイルは、自動的にVueコンポーネントとして登録
      componentsDir: path.resolve(__dirname, './components'),
    }),
    // 検索バー https://vuepress.github.io/reference/plugin/search.html#issearchable
    searchPlugin({
      // 検索バー オプション
    }),
  ],
})

これだけで、デフォルトテーマでは自動的にヘッダー ナビバーに検索窓が追加される

検索バー のオプション設定

doc- search options

デフォルトのままだと、タイトル & ヘッダー のテキストのみが検索の対象だったり、他諸々をオプション設定で追加（カスタマイズ）

placeholder を設定

// docs/.vuepress/config.ts
// ...
  // === plugins === // https://v2.vuepress.vuejs.org/reference/config.html#plugin-config
  plugins: [
    // ...
    // 検索バー https://vuepress.github.io/reference/plugin/search.html#issearchable
    searchPlugin({
      // 検索バー オプション
      locales: {'/': { placeholder: '検索' }},
    }),
  ],

検索バーにフォーカスを当てるショートカットキー hotKeys を設定

// docs/.vuepress/config.ts
// ...
  // === plugins === // https://v2.vuepress.vuejs.org/reference/config.html#plugin-config
  plugins: [
    // ...
    // 検索バー https://vuepress.github.io/reference/plugin/search.html#issearchable
    searchPlugin({
      // 検索バー オプション
      locales: {'/': { placeholder: '検索' }},
      hotKeys: ['k'], // 検索バーにフォーカスを当てるショートカットキー
    }),
  ],

検索結果の最大件数を 5->10件に変更 maxSuggestions

// docs/.vuepress/config.ts
// ...
  // === plugins === // https://v2.vuepress.vuejs.org/reference/config.html#plugin-config
  plugins: [
    // ...
    // 検索バー https://vuepress.github.io/reference/plugin/search.html#issearchable
    searchPlugin({
      // 検索バー オプション
      locales: {'/': { placeholder: '検索' }},
      hotKeys: ['k'], // 検索バーにフォーカスを当てるショートカットキー
      maxSuggestions: 10, // 検索結果 最大 （デフォルト 5）
    }),
  ],

TOPページを検索対象から除外 isSearchable

// docs/.vuepress/config.ts
// ...
  // === plugins === // https://v2.vuepress.vuejs.org/reference/config.html#plugin-config
  plugins: [
    // ...
    // 検索バー https://vuepress.github.io/reference/plugin/search.html#issearchable
    searchPlugin({
      // 検索バー オプション
      locales: {'/': { placeholder: '検索' }},
      hotKeys: ['k'], // 検索バーにフォーカスを当てるショートカットキー
      maxSuggestions: 10, // 検索結果 最大 （デフォルト 5）
      // TOPページを検索対象から除外
      // isSearchable: (page: { path: string }) => page.path !== '/',
      isSearchable: (page: Page) => page.path !== '/',
    }),
  ],

検索対象を タイトル & ヘッダー + mdファイルの frontmatter.tags で指定したタグに拡張 getExtraFields

// docs/.vuepress/config.ts
// ...
  // === plugins === // https://v2.vuepress.vuejs.org/reference/config.html#plugin-config
  plugins: [
    // ...
    // 検索バー https://vuepress.github.io/reference/plugin/search.html#issearchable
    searchPlugin({
      // 検索バー オプション
      locales: {'/': { placeholder: '検索' }},
      hotKeys: ['k'], // 検索バーにフォーカスを当てるショートカットキー
      maxSuggestions: 10, // 検索結果 最大 （デフォルト 5）
      // TOPページを検索対象から除外
      // isSearchable: (page: { path: string }) => page.path !== '/',
      isSearchable: (page: Page) => page.path !== '/',
      // 検索対象を タイトル & ヘッダー + mdファイルの frontmatter.tags で指定したタグに拡張
      getExtraFields: (page: Page) => page.frontmatter.tags ?? []
    }),
  ],

検索窓 コンポーネント <SearchBox /> のスタイルCSS カスタマイズ

Doc- search Styles

// docs/.vuepress/styles/index.scss
//カスタムCSS
:root {
  // plugin-search 検索バー
  .search-box {
    // --search-bg-color: #ffffff;
    // --search-accent-color: #3eaf7c;
    // --search-text-color: #502c31;
    // --search-border-color: #3eaf7c;

    --search-item-text-color: #6289b0;
    // --search-item-focus-bg-color: #f3f4f5;

    --search-input-width: 12rem; // デフォルト 8 rem
    --search-result-width: 22rem; // デフォルト 20 rem
  }

  // ...
}