無定制化狀態態

使用自定義元素mf-search-results

代碼

html

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

渲染結果

設置顯示語言

將屬性lang設置到自訂元素的上層元素或自訂元素本身(也可以在body標籤設置)。

代碼

添加CSS

  <style>
  /* 為了作為樣本，限制搜索結果顯示項數(實際代碼中不需做次設定) */
  .my-lang .mf_finder_organic_doc:nth-child(n+4) {
    display: none;
  }
  </style>

html

  <mf-search-results
   class="my-lang"
   lang="zh-tw"
   ></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"
             @click.stop.prevent
             @mousedown.left="x.self.preClickDoc(doc,$event)"
             @mouseup.left="x.self.chkClickDoc(doc,$event)"
            >{{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"
           @click.stop.prevent
           @mousedown.left="x.self.preClickDoc(x.doc,$event)"
           @mouseup.left="x.self.chkClickDoc(x.doc,$event)"
          >{{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.imageUrls[x.i][0]"
          @error="x.self.imageError(x.self.imageUrls[x.i],$event)"
          @mouseover="x.self.showResultframe(x.doc,$event,true)"
          >
      </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">Footer部分{{x.i+1}}</div>
    </template>
  </mf-search-results>

渲染結果