mf-x SearchResults

无定制化状态態

代码

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"
   ></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>

无定制化状态態

代码

html

渲染结果

设置显示语言

代码

添加CSS

html

渲染结果

将分页器上显示的页码项目的最大数量更改为5

代码

添加CSS

html

渲染结果

検隐藏搜索结果的标题部分

代码

添加CSS

html

渲染结果

隐藏搜索结果下显示的分页器

代码

添加CSS

html

渲染结果

在搜索结果下显示相关搜索词元素

代码

添加CSS

html

渲染结果

点击搜索结果时，在同一窗口内转移

代码

添加CSS

html

渲染结果

使用CSS自定义标题部分

代码

添加CSS

html

渲染结果

自定义搜索结果的标题总结部分的内容

代码

添加CSS

html

渲染结果

自定义搜索结果的文档列表显示

代码

添加CSS

html

渲染结果

自定义搜索结果中的每个文档

代码

添加CSS

html

渲染结果

为每个文档自定义图像显示区域

代码

添加CSS

html

渲染结果

将内容添加到每个文档的信息的顶部

代码

添加CSS

html

渲染结果

在每个文档的标题之前添加内容

代码

添加CSS

html

渲染结果

在每个文档的标题之后添加内容

代码

添加CSS

html

渲染结果

在每个文档的描述性文本之前添加内容

代码

添加CSS

html

渲染结果

在每个文档的描述之后添加内容