SearchResults概要

カスタマイズなしの状態

カスタムエレメントmf-search-resultsを利用する。

コード(html)

<mf-search-results></mf-search-results>

レンダリング結果

表示言語の設定

カスタムエレメントの上位のエレメント(bodyでもよい)またはカスタムエレメント自体に 属性langを設定する。

コード(css追加)

<style>
      /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-lang .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }</style>
      

コード(html)

        <mf-search-results
        class="my-lang"
        lang="ja"
        ></mf-search-results>

レンダリング結果

ページャーに表示するページ番号アイテムの最大数を5に変更

属性 :pager-item-countで指定する。

コード(css追加)

        <style>
          /* 変更箇所の背景色をピンクに(実際は不要) */
          .my-pager-item-count .mf_finder_pager_item_before_pages,
          .my-pager-item-count .mf_finder_pager_item_before_pages *,
          .my-pager-item-count .mf_finder_pager_item_current,
          .my-pager-item-count .mf_finder_pager_item_after_pages,
          .my-pager-item-count .mf_finder_pager_item_after_pages * {
            background-color: pink;
          }
          /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
          .my-pager-item-count .mf_finder_organic_doc:nth-child(n+4) {
            display: none;
          }
        </style>

コード(html)

          <mf-search-results
          class="my-pager-item-count"
          :pager-item-count=5
          ></mf-search-results>

レンダリング結果

検索結果のヘッダ部分を表示しない

属性 hide-headerで指定する。

コード(css追加)

        <style>
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-hide-header .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results
        hide-header
        ></mf-search-results>

レンダリング結果

検索結果下のページャーを表示しない

属性 hide-pagerで指定する。

コード(css追加)

        <style>
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-hide-pager .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results
        hide-pager
        ></mf-search-results>

レンダリング結果

検索結果下に関連検索語を表示する

属性 use-related-keywordsで指定する。

コード(css追加)

        <style>
        /* 変更箇所の背景色をピンクに(実際は不要) */
        .my-use-related-keywords .mf_finder_relatedkeywords {
          background-color: pink;
        }
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-use-related-keywords .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results
        class="my-use-related-keywords"
        use-related-keywords
        ></mf-search-results>

レンダリング結果

検索結果をクリックすると同一ウィンドウ内で画面遷移する

属性 target-selfで指定する。

コード(css追加)

        <style>
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-target-self .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results
          target-self
        ></mf-search-results>

レンダリング結果

ヘッダ部分をCSSでカスタマイズ

コード(css追加)

        <style>
          /* 変更箇所の背景色をピンクに(実際は不要) */
          .my-header-css .mf_finder_organic_header_wrapper {
            background-color: pink;
          }
          /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
          .my-header-css .mf_finder_organic_doc:nth-child(n+4) {
            display: none;
          }
          .my-header-css .mf_finder_organic_header_wrapper .mf_finder_query:before {
            content:"「";
          }
          .my-header-css .mf_finder_organic_header_wrapper .mf_finder_query:after {
            content:"」での検索で、";
          }
          .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_total:before {
            content:"";
            margin:0;
          }
          .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_total:after {
            content:"件がヒットしました。";
          }
          .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_range_from:before {
            content:"";
          }
          .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_range_from:after {
            content:"件目から";
          }
          .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_range_to:before {
            content:"";
          }
          .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_range_to:after {
            content:"件目までを表示しています。";
          }
          .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_header {
            display: flex;
            flex-direction: row-reverse;
            -ms-flex-direction: row-reverse;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
          }
          .my-header-css .mf_finder_organic_header_wrapper .mf_finder_organic_header .mf_finder_organic_nums {
            display: flex;
            flex-direction: row-reverse;
            -ms-flex-direction: row-reverse;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
          }
        </style>

html

        <mf-search-results
        class="my-header-css"
        ></mf-search-results>

レンダリング結果

検索結果のヘッダ部分のコンテンツをカスタマイズ

スロット headerでテンプレートをカスタマイズする。

コード(css追加)

        <style>
        /* 変更箇所の背景色をピンクに(実際は不要) */
        .my-header-slot .mf_finder_organic_header_wrapper {
          background-color: pink;
        }
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-header-slot .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        .my-header-slot .mf_finder_organic_header_wrapper span {
          font-weight: bold;
        }
        </style>

コード(html)

        <mf-search-results class="my-header-slot">
          <template slot="header" scope="x">
            <div class="my-header">
              <div>
                「<span>{{x.params.q}}</span>」での検索結果を<span>{{x.params.pagemax}}</span>件ごとに表示
              </div>
              <div>
                <span>{{x.params.page}}</span>ページ目
                (<span>{{x.organic.range[0]}}</span>件目から<span>{{x.organic.range[1]}}</span>件目)
              </div>
            </div>
          </template>
        </mf-search-results>

レンダリング結果

検索結果のドキュメントリスト表示をカスタマイズ

スロット docsでテンプレートをカスタマイズする。

コード(css追加)

        <style>
        /* 変更箇所の背景色をピンクに(実際は不要) */
        .my-docs-slot .my_finder_organic_docs {
          background-color: pink;
        }
        </style>

コード(html)

        <mf-search-results class="my-docs-slot">
          <template slot="docs" scope="x">
            <div class="my_finder_organic_docs">ページタイトル一覧
              <ul>
                <li v-for="(doc,i) in x.docs">
                  <a :href="doc.uri"
                  target="_bank"
                  >{{doc.title}}</a>
                </li>
              </ul>
            </div>
          </template>
        </mf-search-results>

レンダリング結果

検索結果のドキュメント毎のカスタマイズ

スロット docでテンプレートをカスタマイズする。

コード(css追加)

        <style>
        /* 変更箇所の背景色をピンクに(実際は不要) */
        .my-doc-slot .my_finder_organic_doc {
          background-color: pink;
        }
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-doc-slot .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results class="my-doc-slot">
          <template slot="doc" scope="x">
            <div class="my_finder_organic_doc">
                <a :href="x.doc.uri"
                target="_bank"
                >{{x.doc.title}}</a>
            </div>
          </template>
        </mf-search-results>

レンダリング結果

ドキュメント毎の画像表示エリアのカスタマイズ

スロット doc_imageでテンプレートをカスタマイズする。

コード(css追加)

        <style>
        /* 変更箇所の背景色をピンクに(実際は不要) */
        .my-doc_image-slot .my_finder_organic_doc_img {
          background-color: pink;
        }
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-doc_image-slot .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results class="my-doc_image-slot">
          <template slot="doc_image" scope="x">
            <div class="my_finder_organic_doc_img">
              <div>{x.doc.uri.replace{(/.*\/([^$])/,'$1')}</div>
              <img alt="custom image"
                :src="x.self.captureImageUrls[x.i][0]"
                @error="x.self.onCaptureImageError(x.self.imageUrls[x.i],$event)"
                @mouseover="x.self.showResultframe(x.doc,$event,true)"
                class="mf_finder_organic_doc_img"
                >
            </div>
          </template>
        </mf-search-results>

レンダリング結果

ドキュメント毎の情報の最上部にコンテンツを追加

スロット doc_headでテンプレートをカスタマイズする。

コード(css追加)

        <style>
        /* 変更箇所の背景色をピンクに(実際は不要) */
        .my-doc_head-slot .my_finder_organic_doc_head {
          background-color: pink;
        }
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-doc_head-slot .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results class="my-doc_head-slot">
          <template slot="doc_head" scope="x">
              <div class="my_finder_organic_doc_head">ヘッダ部分{{x.i+1}}</div>
          </template>
        </mf-search-results>

レンダリング結果

ドキュメント毎のタイトルの前にコンテンツを追加

スロット doc_title_prevでテンプレートをカスタマイズする。

コード(css追加)

        <style>
        /* 変更箇所の背景色をピンクに(実際は不要) */
        .my-doc_title_prev-slot .my_finder_organic_doc_title_prev {
          background-color: pink;
        }
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-doc_title_prev-slot .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results class="my-doc_title_prev-slot">
          <template slot="doc_title_prev" scope="x">
              <span class="my_finder_organic_doc_title_prev">◆{{x.i+1}}◆</span>
          </template>
        </mf-search-results>

レンダリング結果

ドキュメント毎のタイトルの後にコンテンツを追加

スロット doc_title_postでテンプレートをカスタマイズする。

コード(css追加)

        <style>
        /* 変更箇所の背景色をピンクに(実際は不要) */
        .my-doc_title_post-slot .my_finder_organic_doc_title_post {
          background-color: pink;
        }
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-doc_title_post-slot .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results class="my-doc_title_post-slot">
          <template slot="doc_title_post" scope="x">
              <span class="my_finder_organic_doc_title_post">◆{{x.i+1}}◆</span>
          </template>
        </mf-search-results>

レンダリング結果

ドキュメント毎の説明文の前にコンテンツを追加

スロット doc_body_prevでテンプレートをカスタマイズする。

コード(css追加)

        <style>
        /* 変更箇所の背景色をピンクに(実際は不要) */
        .my-doc_body_prev-slot .my_finder_organic_doc_body_prev {
          background-color: pink;
        }
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-doc_body_prev-slot .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results class="my-doc_body_prev-slot">
          <template slot="doc_body_prev" scope="x">
            <div class="my_finder_organic_doc_body_prev">◆ここから説明{{x.i+1}}◆</div>
          </template>
        </mf-search-results>

レンダリング結果

ドキュメント毎の説明文の後にコンテンツを追加

スロット doc_body_postでテンプレートをカスタマイズする。

コード(css追加)

        <style>
        /* 変更箇所の背景色をピンクに(実際は不要) */
        .my-doc_body_post-slot .my_finder_organic_doc_body_post {
          background-color: pink;
        }
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-doc_body_post-slot .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results class="my-doc_body_post-slot">
          <template slot="doc_body_post" scope="x">
            <div class="my_finder_organic_doc_body_post">◆説明ここまで{{x.i+1}}◆</div>
          </template>
        </mf-search-results>

レンダリング結果

ドキュメント毎のURLの前にコンテンツを追加

スロット doc_url_prevでテンプレートをカスタマイズする。

コード(css追加)

        <style>
        /* 変更箇所の背景色をピンクに(実際は不要) */
        .my-doc_url_prev-slot .my_finder_organic_doc_url_prev {
          background-color: pink;
        }
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-doc_url_prev-slot .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results class="my-doc_url_prev-slot">
          <template slot="doc_url_prev" scope="x">
              <span class="my_finder_organic_doc_url_prev">◆{{x.i+1}}◆</span>
          </template>
        </mf-search-results>

レンダリング結果

ドキュメント毎のURLの後にコンテンツを追加

スロット doc_url_postでテンプレートをカスタマイズする。

コード(css追加)

        <style>
        /* 変更箇所の背景色をピンクに(実際は不要) */
        .my-doc_url_post-slot .my_finder_organic_doc_url_post {
          background-color: pink;
        }
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-doc_url_post-slot .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results class="my-doc_url_post-slot">
          <template slot="doc_url_post" scope="x">
              <span class="my_finder_organic_doc_url_post">◆{{x.i+1}}◆</span>
          </template>
        </mf-search-results>

レンダリング結果

ドキュメント毎の情報の最下部にコンテンツを追加

スロット doc_footでテンプレートをカスタマイズする。

コード(css追加)

        <style>
        /* 変更箇所の背景色をピンクに(実際は不要) */
        .my-doc_foot-slot .my_finder_organic_doc_foot {
          background-color: pink;
        }
        /* サンプル用に検索結果の表示件数を制限する(実際は不要) */
        .my-doc_foot-slot .mf_finder_organic_doc:nth-child(n+4) {
          display: none;
        }
        </style>

コード(html)

        <mf-search-results class="my-doc_foot-slot">
          <template slot="doc_foot" scope="x">
              <div class="my_finder_organic_doc_foot">フッタ部分{{x.i+1}}</div>
          </template>
        </mf-search-results>

レンダリング結果