實裝範例

搜尋框範例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x page</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>

    <!-- ↓ 在此分支中加入客製化元件-->
    <div class="mf_finder_container">

        <!-- ↓搜尋框用客製化元件 -->
        <mf-search-box
           submit-text=""
           ajax-url="//mfx-sample.marsflag.com/x_search.x"
           serp-url="minimum.html#/"
           doctype-hidden
           options-hidden
        ></mf-search-box>

    </div>

    <!-- ↓MF搜尋框用js -->
    <script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script>

  </body>
</html>

搜尋框操作範例

搜尋結果頁面範例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x minimum</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <!-- ↓ 在此分支中加入客製化元件 -->
    <div class="mf_finder_container">

        <!-- ↓搜尋框用客製化元件-->
        <mf-search-box
           submit-text=""
           ajax-url="//mfx-sample.marsflag.com/x_search.x"
           doctype-csv="html,pdf"
        ></mf-search-box>

        <!-- ↓一覽縮圖用客製化元件 -->
        <mf-zubaken></mf-zubaken>

        <!-- ↓自然搜尋用元件 -->
        <mf-search-results></mf-search-results>

    </div>

    <!-- ↓MF搜尋結果頁面用js -->
    <script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>

  </body>
</html>

搜尋結果頁面操作範例

製作方法

基本規則

根據目的使用script標籤載入以下必要的js
.mf_finder_container 的下屬中設置MarsFinder用的客製化元件。
設定合適的css。

搜尋框的架設方法

<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script> 放入body的最後。

搜尋框用的客製化元件 `<mf-search-box></mf-search-box>`

.mf_finder_container 設置於下屬。
在網頁中共通的標章中設置搜尋框時、若設置.mf_finder_container下屬出現困難時請在共通標章或其下屬中追加.mf_finder_header。

搜尋框客製化元件API檔案

搜尋結果頁面製作方法

在body最後加入<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>。

搜尋框客製化元件 `<mf-search-box></mf-search-box>`

設置於.mf_finder_container之下屬。

搜尋框客製化元件API檔案

搜尋結果用客製化元件`<mf-search-results></mf-search-results>`

設置於.mf_finder_container 之下屬。

搜尋結果用客製化元件API檔案

預設CSS

搜尋框用

//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css

搜尋框、搜尋結果兼用

//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css

響應式網頁設計用

在加載完上述CSS之後，加載下麵CSS。

//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp-resp.css

對應語言

客製化元件上位的元件(body亦可)亦或於客製化元件本體中以 lang屬性切換語言碼。

欲切換顯示語言須以先前提及之預設CSS執行。可客製化在頁面內追加不同用途之CSS。

目前可支援以下語言。

語言	語言碼
英語	`en` 或者 `en-US` 或者預設
日語	`ja` 或者 `ja-JP`
中文(簡體字)	`zh` 或者 `zh-CN`
中文(繁體字)	`zh-tw`
韓國語	`kr`
西班牙語	`es`
葡萄牙語	`pt` 或者 `pt-BR`
阿拉伯語	`ar`
泰國語	`th`
意大利語	`it`
印度尼西亞語	`id`
荷蘭語	`nl`
希臘語	`el`
德語	`de`
土耳其語	`tr`
法語	`fr`
越南語	`vi`
波蘭語	`pl`
拉脫維亞語	`lv`
立陶宛語	`lt`
俄語	`ru`
波斯語	`fa`

操作要求

Supported Browsers

應用版

遷移至歷史搜尋結果頁面的搜尋框

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x page_classic</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>

    <!-- ↓ 在此分支中加入客製化元件 -->
    <div class="mf_finder_container">

        <!-- ↓搜尋框用客製化元件 -->
        <mf-search-box
           submit-text=""
           ajax-url="//mfx-sample.marsflag.com/x_search.x"
           doctype-hidden
           options-hidden
           use-std-serp
        ></mf-search-box>
    </div>

    <!-- ↓MF搜尋框用js -->
    <script type="text/javascript" src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script>

  </body>
</html>

遷移至歷史搜尋結果頁面的搜尋框操作範例

不使用hash雜湊、藉由querystring查詢字串收放參數的結果頁面

由此轉換Google Custom Search用的搜尋結果頁面，可直接沿用搜尋框。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x minimum_nohash</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>

    <!-- ↓ 在此分支中加入客製化元件 -->
    <div class="mf_finder_container">

      <!-- ↓搜尋框用客製化元件 -->
      <mf-search-box
         submit-text=""
         ajax-url="//mfx-sample.marsflag.com/x_search.x"
         doctype-csv="html,pdf"
         ></mf-search-box>

      <!-- ↓一覽縮圖用客製化元件 -->
      <mf-zubaken></mf-zubaken>

      <!-- ↓自然搜尋用客製化元件-->
      <mf-search-results></mf-search-results>

    </div>

    <!-- ↓不使用hash、藉由querystring管理參數時之記錄 -->
    <script type="text/javascript">
    !function(){
      var G = GALFSRAM = window.GALFSRAM || {}
      G.mfx = G.mfx || {}
      G.mfx.router_mode = 'history'
    }();
    </script>

      <!-- ↓MF搜尋結果頁面用js -->
    <script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>

  </body>
</html>