簡易執行方式
1. 確定Program.cs有加上Su.Encryption.AesEncryptor.InitAesPaddingEncryptor(secret , iv , encKey , dataRoot)
2. 確定appsettings.json有設定變數，DataRoot、EnvironmentEncKey
3. 先執行一次，會報錯誤，在dataRoot位置會產生一組$"{encKey}.ps1，裡面會放設定環境變數的指令
4. 設定完，記得把 $"{encKey}.ps1檔案刪除
===以上，設定完環境變數===
1. 確定Program.cs有加上Dictionary<string, string> encSetting = Su.Encryption.GetDecryptedSetting
2. 確定appsettings.json有設定變數，DataRoot、EnvironmentEncKey , ShowEncSetting 設定為 false
3. 在 $"{dataRoot}\Config\XXXX_dec.json"設定DBC連線，要注意連線字串要加上  "TrustServerCertificate=true;"，因為.net Core一定要藥用SSL連線
4. 設定完之後，在執行一次，會自動產生XXXX.json
5. 刪除XXXX_dec.json
===以上，產生完加密DBC連線
備註，要取回解密連線字串，appsettings.json有設定變數 , ShowEncSetting 設定為 true

概念解說
原本  >> config大多是明文，駭客可以藉由偷到config來知道變數設定，例如  dbc連線資訊、某個APP Key
之後  >> 將重要資訊分成兩段，
appsettings.json  >>  放可公開資訊的設定，例如 DataRoot、EnvironmentEncKey

在環境變數加上一個 由本機產生的隨機變數
讓本機的所有


原理說明
1. .Net Core 啟動時最先執行檔案 Program.cs，在一開頭先檢查本機是否有設定環境變數
緯中用的function Su.Encryption.AesEncryptor.InitAesPaddingEncryptor(secret , iv , encKey , dataRoot)
進階加密標準（英語：Advanced Encryption Standard，縮寫：AES）

沒有的話，會在 dataRoot 這邊產生一個 encKey.ps1的檔案，裡面放有環境變數設定的指令
(encSecretAndIv = Su.Encryption.AesEncryptor.Encrypt(envSecret, envIv, Su.TextFns.GetRandomString(48));
var command = $"[Environment]::SetEnvironmentVariable('{variableName}', '{encSecretAndIv}', 'Machine')";)
(隨機產生48碼亂數，(前32碼為本機專用Secret、後16碼為iv)，進行aes加密)




 

A下拉霸
 <div class="col-md-6">
                                        <label for="contact:fromlan">Source Language <span class="red">*</span></label>
                                        <div class="bfh-selectbox" data-name="From_Language_Id" id="FromLanItemParent">
                                            <!--FromLanItem S-->
                                            <div data-value="{Id}"><img src="assets/images/_smarty/flags/{Image}" alt="{Abbreviation}"> {LanguageName}</div>
                                            <!--FromLanItem E-->
                                        </div>
                                    </div>

自動生成的下拉霸
1 name 要用 data-name=""來設定
2 完全沒有選擇的時候可能會回傳空值

套件來源
http://bootstrapformhelpers.com/select/

B電話號碼
<label for="contact_department">Your Phone Number </label>
                                        <div>
                                            <input id="phone" name="phone" type="tel">

                                        </div>
                                        <div style="display:none">
                                            <input id="PhoneCountry" name="PhoneCountry" type="">
                                        </div>


                                        <script src="/assets/build/js/intlTelInput.js"></script>
                                        <script>
                                            var input = document.querySelector("#phone");
                                            var iti1 = window.intlTelInput(input, {
                                                // allowDropdown: false,
                                                // autoHideDialCode: false,
                                                // autoPlaceholder: "off",
                                                // dropdownContainer: document.body,
                                                // excludeCountries: ["us"],
                                                // formatOnDisplay: false,
                                                // geoIpLookup: function(callback) {
                                                //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
                                                //     var countryCode = (resp && resp.country) ? resp.country : "";
                                                //     callback(countryCode);
                                                //   });
                                                // },
                                                // hiddenInput: "full_number",
                                                // initialCountry: "auto",
                                                // localizedCountries: { 'de': 'Deutschland' },
                                                // nationalMode: false,
                                                // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
                                                placeholderNumberType: "MOBILE",
                                                // preferredCountries: ['cn', 'jp'],
                                                separateDialCode: true,
                                                utilsScript: "/assets/build/js/utils.js",
                                            });
                                            input.addEventListener("countrychange", function () {
                                                $('#PhoneCountry').val(JSON.stringify(iti1.getSelectedCountryData()))
                                                // do something with iti.getSelectedCountryData()
                                            });
                                        </script>

需要用另一個欄位來記錄電話號碼的國家資料 

套件的來源
https://github.com/jackocnr/intl-tel-input
 

在 CKEditor 中, 預設 Div 不能包在 A 裡面, 如果要改變, 需加上這一段:

CKEDITOR.dtd.a.div = 1;


不要讓 CKEditor 亂改 HTML:

CKEDITOR.config.allowedContent = true;

HTML:

<ul class="aaa">

<li><img src="http://placehold.it/150x150" /></li>

</ul>



<ul class="bbb">

<li><div><img src="http://placehold.it/150x150" /></div></li>

</ul>

CSS:

.aaa li{

display: inline-block;

width: 160px;

}



.aaa li img{

width: 150px;

border: 5px solid #ececec;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

}

CSS:

.bbb li{

display: inline-block;

width: 160px;

}

​.bbb li div{

width: 150px;

padding: 5px;

background: #ececec;

overflow: hidden;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

}

.bbb li img{

width: 150px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

-o-border-radius: 50%;

border-radius: 50%;

}

​

Safari OUTPUT:

aaa:



bbb:




 

​

有的時候jquery會用到取代標籤的方式
<div id="testId">我是原本文字</div>

以下兩個都是innerHTML

document.getElementById('testId').innerHTML = "我是之後文字";

$('#testId').html("我是之後文字");

以下兩個都是outerHTML

document.getElementById('testId').outerHTML = "<div id="我是原本Id">我是原本文字</div>";

$('#testId').replaceWith("<div id="我是原本Id">我是原本文字</div>");

但是有時候～我們並不是要取代～而是想單純得到html含標籤的內容～

$('#testId').clone().wrap('<div>').parent().html()

 

一般正常來說 如果要網頁的表單(Form) 做資料清除的動作
只要下 reset() 指令就可

document.getElementById("form1").reset();

但是對於 hidden field

<input type='hidden' name='txtId' value='xxx' />

這個方法是沒有作用的 資料還是在

兩個方法解決:
1. reset 之後再各自去清掉 hidden field 的 value (有點笨)
2. 不要用 hidden field 改用 display:none 的 DIV 去包要隱藏的 field
 

一般在崁入youtube影片時，影片的寬高是固定的

隨著螢幕大小自動調整寬高的方式：


CSS：
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


HTML：
<div class="video-container">
    <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

 .mobile-share_fb{ display:block; background:url("http://www.shopunt.com/css/mobile/images/mobile-s9398562778.png") no-repeat; background-position: 0 -1648px; height: 80px; width: 80px;} 

 .shrink-attr{ background-size: 152px 2104px; width: 40px; height: 40px; background-position: 0 -824px;} 

 .fb-test{ display:block; background:url("http://www.shopunt.com/images/logo_welcome.jpg") no-repeat; background-size:50% 50%; width: 105px; height: 105px;} 

 

這個活動頁左邊 menu 要固定位置 但是不能跑出框框外面
http://www.shopunt.com/tch/event/2014-naked-truth-cc-cream/

所以需要處理scroll物件

<div id="menuContainer">

  <div id="menu">

    <ul>

      <li>menu1</li>

      <li>menu2</li>

    </ul>

  </div>

  <div> ...長內容.... </div>

</div>

js

        var __ContainerHeight = 5000;

        var __ContainerTop = 160;

        var __MenuHeight = 550;

        var __FixedTop = 20;



        $(window).load(function () {



            __ContainerHeight = $("#menuContainer").height();

            __ContainerTop = $("#menuContainer").offset().top;

            __MenuHeight = $("#menu").height();



            $("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });

            $(window).scroll(function () {

                var scrolls = $(this).scrollTop();

                //console.log(scrolls);

                if (scrolls < __ContainerTop) {

                    $("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });

                }

                else if ((scrolls + __MenuHeight + __FixedTop) > (__ContainerHeight + __ContainerTop)) {

                    $("#menu").css({ "top": (__ContainerHeight - __MenuHeight) + "px", "position": "absolute" });

                }

                else {

                    $("#menu").css({ "top": __FixedTop + "px", "position": "fixed" });

                }

            });



        });

 

由於偶爾會有需要在 <body> 最上方塞入一些 html
例如塞入一個要置頂的 div 區塊
目前這個區塊只有 {DebugMessage}

所以在 master.html 增加一個新的項目 叫做 <!--BodyTop--> 

<body>
    <!--BodyTop-->
    {DebugMessage}
    <a id="anchorGoTop" href="#gotop" class="gotop" style="display: none;"><span><em></em></span></a>

UW.TBase 增加一個 Public 變數  strBodyTop

如此一般網頁使用時 就可以置入置頂的內容 注意:是塞入html
使用上 於 PreRender 時

        '購物button區塊置於 <body> 正下方
        Me.strBodyTop = Me.otContent.SubTemplate("BuyButtonArea").Result

就可以了