# 融媒體產品開箱公版

[dc看樣](https://dc.udn.com/weichun/TEK2208IT016_newmedia_product_example/)
檔案下載：(網址待補)

## html 基本架構

+ 可用 ctrl+F 輸入關鍵字查找各區塊位置
+ 以下僅顯示各區塊外層標籤作為示意用，內容省略

<!-- 導覽列 -->
<header id="header" class="c-header"></header>

<!-- 主視覺 區塊 -->
<section id="kv" class="c-kv"></section>

<!-- Product introduce 區塊 -->
<section id="introduce" class="c-introduce"></section>

<!-- 橘編開箱 區塊 -->
<section id="review" class="c-review"></section>

<!-- 視差滾動 區塊 -->
<div id="parallaxScrolling" class="l-virtual-box">

    <div class="l-virtual-box__bg">
        <!-- 視差滾動底圖 -->
        <picture></picture>
    </div>

    <!-- kol專家開箱 區塊 -->
    <section id="kol" class="c-kol"></section>

</div>

<!-- 試用開箱 區塊 -->
<section id="feedback" class="c-feedback"></section>

<!-- 製作群相關資訊 區塊 -->
<section class="c-producer"></section>

<!-- 融媒體 footer 公版 -->
<footer class="l-footer"></footer>

## 編輯 Meta

    <title>標題</title>
  
    <meta name="description" content="描述">

    <meta property="og:title" content="標題">
    <meta property="og:url" content="本站網址">
    <meta property="og:image" content="分享圖位置">
    <meta property="og:image:width" content="1200"/>
    <meta property="og:image:height" content="630"/>
    <meta property="og:type" content="website">
    <meta property="og:description" content="描述">
    <meta property="fb:app_id" content="fb app id"/>
    <link rel="canonical" href="本站網址"/>

## 客製化功能設定

+ 編輯 jsoncostermizedData.json 檔案
+ 檔案位於 static/json 資料夾之下

{
  "kvOverlayWidth": "36%", //主視覺文字區塊寬度
  "kvOverlayPaddingLeft": "min(80px, 4.2vw)", //主視覺標題跟左邊的距離

  "isVideoOpen": true, //開箱影片開關
  "isParallaxScrollOpen": true //視差滾動開關(kol區塊)
}

## 字型

+ 字型列表：
+ 預設字型 NotoSansTC
+ 中文特殊字型
+ 字型名稱 SourceHanSerif
+ css classname： ```u-text__source-han-serif```
+ 英文特殊字型
+ 字型名稱 GenWanMinSB
+ css classname： ```u-text__gen-wan-min-sb```

+ 更改字型：在需要更改的```<p><span><h1><h2><h3><h4><h5><h6>```標籤加上欲使用的特殊字型 classname，沒有加上皆為預設字型

## 社群分享

+ 社群分享有兩處：
+ 主視覺標題下方
+ 製作群相關資訊下方

+ 需要修改分享網址，分別位於：
+ facebook 在 data-href 屬性
+ line 在 data-url 屬性

+ 如果分享資訊沒更新：改好後先確認 meta 修改完成，接著到下列網頁工具讓頁面重抓 meta
+ [fb 的偵錯工具](https://developers.facebook.com/tools/debug/)
+ [line 的 page poker](https://poker.line.naver.jp/)

+ 社群分享結構

<!-- 社群分享 -->
<div class="c-bnt-social">

    <!-- Facebook -->
    <div>
        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v7.0" nonce="iRXuMYHS"></script>
        <div class="fb-like" data-href="{{本站網址}}" data-width="" data-layout="button_count" data-action="like" data-size="small" data-share="true"></div>
    </div>

    <!-- Line -->
    <a>
        <div class="line-it-button" data-lang="zh_Hant" data-type="share-a" data-ver="3" data-url="{{本站網址}}" data-color="default" data-size="small" data-count="false" style="display: none;"></div>
        <script src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>
    </a>

</div>

## 各區塊編輯說明

### 主視覺區塊

+ 主視覺圖：依下列說明命名，放入 static/images 資料夾中
+ 桌機圖 - kv_desktop.jpg
+ 平板圖 - kv_pad.jpg
+ 手機圖 - kv_mobile.jpg

+ 社群分享：參照「社群分享」
+ 黃色遮罩寬度：調整參照「客製化功能設定」

### Product introduce 區塊

+ 產品說明圖：依下列說明命名，放入 static/images 資料夾中
+ 圖片1 - product_introduce_1.jpg
+ 圖片2 - product_introduce_2.jpg
+ 圖片3 - product_introduce_3.jpg

### 橘編開箱 區塊

+ 開箱圖：依下列說明命名，放入 static/images 資料夾中
+ 橘編圖 - author.jpg
(使用方形圖，圓角已由 css 處理)
+ 開箱圖片1 - review_1.jpg
+ 開箱圖片2(有圓角) - review_2.jpg
(使用方形圖，圓角已由 css 處理)

+ 閱讀更多：按鈕連結，將網址放入 href 屬性中
+ 例：```<a href="{{網址}}">閱讀更多</a>```

+ 開箱影片：開關參照「客製化功能設定」

### 視差滾動 區塊

+ 底圖：依下列說明命名，放入 static/images 資料夾中
+ 底圖 - review_3.jpg

+ 視差滾動：開關參照「客製化功能設定」

### kol專家開箱 區塊

:::warning
:warning: 若視差滾動關閉此區塊會隱藏
:::

+ kol專家圖：依下列說明命名，放入 static/images 資料夾中
+ kol專家圖 - author_kol.jpg

+ 閱讀更多：按鈕連結，將網址放入 href 屬性中
+ 例：```<a href="{{網址}}">閱讀更多</a>```

### 試用開箱 區塊
+ 建議另開文件編輯完後，再貼過去 index.html ，避免標籤錯亂造成破版
+ 每個試用者的完整 html 結構如下，有幾個試用者就要複製貼上幾份：

<!-- 回饋單元 開始 -->
<div class="c-feedback__list">

    <picture>
        <source data-srcset="{{pgw + 圖片網址 + 轉 webp}}&nt=1" type="image/webp">
        <source data-srcset="{{pgw + 圖片網址}}" type="image/jpeg">
        <img class="lazyload" data-src="{{pgw + 圖片網址}}" alt="{{圖片說明}}">
    </picture>

    <!-- 內容 -->
    <!-- 燈箱所需資訊(標題、內容、燈箱圖片數量、圖片網址) -->
    <div
        class="c-feedback__list--description"
        data-title="{{ 標題 }}"
        data-img-count="{{ 燈箱圖片數量 }}"
        data-img-1="{{ 圖片位址，不要加https:// }}" 
        data-img-2="{{ 圖片位址，不要加https:// }}" 
        data-img-3="{{ 圖片位址，不要加https:// }}"
    >
        <p>{{ 文字 }}</p>
        <p>{{ 文字 }}</p>
        <p>{{ 文字 }}</p>
        <p>{{ 文字 }}</p>
        <p>{{ 文字 }}</p>
    </div>

    <p>
        <span>{{ 人名 }}</span>
        <span class="c-feedback__list--age">{{ 年齡 }}</span>
    </p>

    <a class="e-btn-more">See More</a>

</div>
<!-- 回饋單元 結束 -->

+ 試用者資訊編輯
+ 標題、內容、燈箱圖片數量、圖片網址

    <!-- 內容 -->
    <!-- 燈箱所需資訊(標題、內容、燈箱圖片數量、圖片網址) -->
    <div
        class="c-feedback__list--description"
        data-title="{{ 標題 }}"
        data-img-count="{{ 燈箱圖片數量 }}"
        data-img-1="{{ 圖片位址，不要加https:// }}" 
        data-img-2="{{ 圖片位址，不要加https:// }}" 
        data-img-3="{{ 圖片位址，不要加https:// }}"
    >
        <p>{{ 文字 }}</p>
        <p>{{ 文字 }}</p>
        <p>{{ 文字 }}</p>
        <p>{{ 文字 }}</p>
        <p>{{ 文字 }}</p>
    </div>

:::warning
:warning: 注意
+ 燈箱圖片數量 = 圖片網址數量
+ 例：
+ data-img-count="2"
data-img-1="{{ 圖片位址，不要加https:// }}"
data-img-2="{{ 圖片位址，不要加https:// }}"
+ data-img-count="n"
data-img-1="{{ 圖片位址，不要加https:// }}"
data-img-2="{{ 圖片位址，不要加https:// }}"
.
.
.
data-img-n="{{ 圖片位址，不要加https:// }}"
:::
+ 人名、年齡

    <p>
        <span>{{ 人名 }}</span>
        <span class="c-feedback__list--age">{{ 年齡 }}</span>
    </p>

### 製作群相關資訊 區塊

+ logo圖：放入 static/images 資料夾中
+ 可使用各種圖檔，建議使用 svg 避免失真
+ 圖片高度固定為 91px
+ 例：

    <a href="{{連結}}" target="_blank">
        <img class="lazyload" data-src="{{圖片網址}}" alt="{{圖片說明}}">
    </a>

+ 社群分享：參照「社群分享」