无定制化状态时

使用自定义元素mf-related-keywords

代码

html

  <mf-related-keywords></mf-related-keywords>

渲染结果

设置显示语言

将属性lang设置到自定义元素的上层元素或自定义元素本身(也可以在body标签设置)。

代码

html

  <mf-related-keywords lang="zh"></mf-related-keywords>

渲染结果

用CSS自定义标题

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .head-bycss .mf_finder_relatedkeywords_head {
    background-color: pink;
  }
  /* 将标题内容从默认值(Related Keywords)更改为“关键词” */
  .head-bycss .mf_finder_relatedkeywords_head:before {
    content: "关键词";
  }
  </style>

html

  <mf-related-keywords class="head-bycss"></mf-related-keywords>

渲染结果

用属性“head-text”指定标题文本

用属性 head-text指定标题文本

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .my-head-text .mf_finder_relatedkeywords_head {
    background-color: pink;
  }
  /* 设置标题content为空 */
  .my-head-text .mf_finder_relatedkeywords_head:before {
    content: "";
  }
  </style>

html

  <mf-related-keywords class="my-head-text" head-text="有关关键词"></mf-related-keywords>

渲染结果

自定义标题的内容

用插槽 head自定义模板。

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .my-head-slot .my-dd-head {
    background-color: pink;
  }
  </style>

html

  <mf-related-keywords class="my-head-slot">
    <template slot="head">
      <!-- 给header前面加icon -->
      <header class="my-dd-head">
        <img src="//c.marsflag.com/mf/img/mf_pwdb.gif">相关关键词
      </header>
    </template>
  </mf-related-keywords>

渲染结果