QDM 雲端開店平台

「用語法方式嵌入部落格」

• 可依不同頁面，設計專屬輪播圖呈現優惠、熱銷品、品牌主張，吸引目光、聚焦重點

• 輪播圖具備節奏與節點，可輪流呈現多項訊息，提升頁面活性與用戶停留時間

✎ 重點拆解：

一、「嵌入部落格語法」設定步驟及語法

一、「嵌入部落格語法」設定步驟及語法

① 後台路徑：頁面>自訂頁面。

②新增一個「自訂頁面」。

③ 將語法貼入『原始碼』中。

將下列語法貼入『原始碼』中
<!-- 「部落格連結」請替換成自己的部落格網址 -->
<style type="text/css">#content-wrapper > .container { padding:0px; width: 100%; max-width:100%; }

#content-wrapper > .container > .container-inner { padding:0px; width: 100%; max-width:100%; }
</style>
<p><iframe frameborder="0" height="100%" id="idIframe" marginheight="0" marginwidth="0" onload="setIframeHeight(this);" scrolling="no" src="部落格連結" width="100%"></iframe></p>
<script>
function setIframeHeight(iframe) {
  if (iframe) {
    var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
    if (iframeWin.document.body) {
      headerArea = iframeWin.document.documentElement.querySelectorAll("header") || iframeWin.document.body.querySelectorAll("header");
      headerHeight = headerArea[0].offsetHeight;
      footerArea = iframeWin.document.documentElement.querySelectorAll("#footer") || iframeWin.document.body.querySelectorAll("#footer");
      footerHeight = footerArea[0].offsetHeight;
      mainArea = iframeWin.document.documentElement.querySelectorAll("main") || iframeWin.document.body.querySelectorAll("main");
      mainHeight = mainArea[0].offsetHeight;
      iframe.height = mainArea[0].offsetHeight+headerHeight+footerHeight+200;
      window.addEventListener('scroll', function() {
        let NowMain = mainArea[0].offsetHeight;
        if(mainHeight!=NowMain){
          iframe.height = NowMain+headerHeight+footerHeight+200;
          mainHeight = NowMain;
        }
      });
    }
  }
};
</script>

④ 再到後台：版面>自訂JS全站程式碼貼上以下程式碼。

if($('#idIframe').length){
    let iframeEle = document.getElementById('idIframe');
    $(iframeEle).load(function(){
        const linkScroll = iframeEle.offsetTop;
        const scrollLocation = document.documentElement.scrollTop;
        if(scrollLocation>500){
            $("html,body").animate({
                   scrollTop: linkScroll
             }, 500);
        }
        $(this).contents().find("#loadMoreButton .load-more").on('click', function() {
            setTimeout(function(){
                setIframeHeight(iframeEle);
            }, 300);
        });
        setTimeout(function(){
            setIframeHeight(iframeEle);
        }, 300);
    });
}

\ 注意 /

blog內文圖片必須保留原始寬高
＊影像屬性開啟方式：對圖片點兩下 or 點右鍵 > 影像屬性

⑤ 後台：商品>商店分類，新增一個『商店主選單』，並將自訂頁面綁定於選單上