標籤: javascript

如何在 WordPress 中預覽 n8n 流程範本

技術

n8n 有很多好用的範本可以使用。如果我們也有很棒的流程要告訴大家，官方很貼心提供「n8n 流程預覽網頁元件」，可以在自己網站分享。我實作時遇到顯示失敗問題，也一併奉上解決方法。

wordpress 該如何安裝使用，有兩個方式：

方法(一)：安裝外掛

我們可以借助外掛「WPCode Insert Headers and Footers 」，將 n8n 流程預覽網頁元件的 javascript 加上去，這樣以後發文，就可以直接引用該元件不用每次都加。

　

　

　

<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.0/webcomponents-loader.js"></script>
<script src="https://www.unpkg.com/lit@2.0.0-rc.2/polyfill-support.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@n8n_io/n8n-demo-component/n8n-demo.bundled.js"></script>

寫文章的時候，選擇自訂HTML

　

# 輸入 n8n 語法
<n8n-demo workflow='n8n的節點json字串' frame=true></n8n-demo>

　

方法(二)：不安裝外掛，直接貼上 n8n javascript 與 n8n 語法


<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.0/webcomponents-loader.js"></script>
<script src="https://www.unpkg.com/lit@2.0.0-rc.2/polyfill-support.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@n8n_io/n8n-demo-component/n8n-demo.bundled.js"></script>

<n8n-demo workflow='n8n的節點json字串' frame=true></n8n-demo>

實際上我實作的時候，一直出現 json 錯誤

　

　

最後在 這個地方 發現有個神人做了一個 n8n 流程，其功能為：

將"流程 json 字串"，轉化成一個可用的 "Encoded URL" 字串

我們將 Encoded URL 取代 json，這樣就可以解決 Invalid JSON 的問題了。

　

該神人做好的 n8n 流程，我放在下面，我們只要修改其第二節點的內容，改成自己的 json 字串，第三節點產出的就是我們要的 Encoded URL。

題外話

由於「n8n 流程預覽網頁元件」只能顯示出英文，因此我請 gemini pro 改寫能顯示中文的版本(檔案在這），只是我不懂 npm ，最後載入失敗。

Leave a comment , , ,

n8n 新增code節點，跳脫json字串

技術

json字串有些特殊字元，需要跳脫後才能正常使用。因此有必要在n8n加上code節點寫javascript 跳脫。

const chars = {
  "\"": "\\\"",
  "\\": "\\\\",
  "\/": "\\/",
  "\u0000": "\\u0000",
  "\u0001": "\\u0001",
  "\u0002": "\\u0002",
  "\u0003": "\\u0003",
  "\u0004": "\\u0004",
  "\u0005": "\\u0005",
  "\u0006": "\\u0006",
  "\u0007": "\\u0007",
  "\u0008": "\\u0008",
  "\u0009": "\\u0009",
  "\u000A": "\\u000A",
  "\u000B": "\\u000B",
  "\u000C": "\\u000C",
  "\u000D": "\\u000D",
  "\u000E": "\\u000E",
  "\u000F": "\\u000F",
  "\u0010": "\\u0010",
  "\u0011": "\\u0011",
  "\u0012": "\\u0012",
  "\u0013": "\\u0013",
  "\u0014": "\\u0014",
  "\u0015": "\\u0015",
  "\u0016": "\\u0016",
  "\u0017": "\\u0017",
  "\u0018": "\\u0018",
  "\u0019": "\\u0019",
  "\u001A": "\\u001A",
  "\u001B": "\\u001B",
  "\u001C": "\\u001C",
  "\u001D": "\\u001D",
  "\u001E": "\\u001E",
  "\u001F": "\\u001F",
  "\u007F": "\\u007F",
  "\u0080": "\\u0080",
  "\u0081": "\\u0081",
  "\u0082": "\\u0082",
  "\u0083": "\\u0083",
  "\u0084": "\\u0084",
  "\u0085": "\\u0085",
  "\u0086": "\\u0086",
  "\u0087": "\\u0087",
  "\u0088": "\\u0088",
  "\u0089": "\\u0089",
  "\u008A": "\\u008A",
  "\u008B": "\\u008B",
  "\u008C": "\\u008C",
  "\u008D": "\\u008D",
  "\u008E": "\\u008E",
  "\u008F": "\\u008F",
  "\u0090": "\\u0090",
  "\u0091": "\\u0091",
  "\u0092": "\\u0092",
  "\u0093": "\\u0093",
  "\u0094": "\\u0094",
  "\u0095": "\\u0095",
  "\u0096": "\\u0096",
  "\u0097": "\\u0097",
  "\u0098": "\\u0098",
  "\u0099": "\\u0099",
  "\u009A": "\\u009A",
  "\u009B": "\\u009B",
  "\u009C": "\\u009C",
  "\u009D": "\\u009D",
  "\u009E": "\\u009E",
  "\u009F": "\\u009F"
};
$json.output = $input.first().json.output.replace(/[\"\\\/\u0000-\u001F\u007F\u0080-\u009F]/g, match=>chars[match]);
return $input.all();
Leave a comment , ,

讓Content-Disposition解決非英文檔案，下載亂碼問題

技術

這是老問題了，很多老外都忽略這個，我在協助teedy翻譯時，發現下載中文檔案中文會出現空白，看一下程式原來是忘了進行編碼導致，就順手提交一下解法。

#以下為java虛擬碼
CONTENT_DISPOSITION, "inline; filename*=utf-8''" + filenameEncode( "檔名" )

private String filenameEncode(String name) {
    try {
        return java.net.URLEncoder.encode(name, "UTF-8").replace("+", "%20");
    } catch (java.io.UnsupportedEncodingException e) {
        e.printStackTrace();
        return name;
    }
}

參考 ：

解決HTTP Header Content-Disposition檔案名稱不能輸入中文、日文、韓文等Unicode字元

Leave a comment , , , ,

google翻譯 與 隱私權宣告

技術

最近遇到android app若要正式上架, 得製作隱私權宣告頁面

而這隱私權又要弄很多語系怎辦, 這時候就要在宣告中加上翻譯功能了

  • 加上java script function
<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  • 頁面插入一段div
<div id="google_translate_element"></div>
  • 若需要限定語系, 請於javascript 的 pageLanguage: ‘en’, 底下, 加上 語系限定

includedLanguages: 'zh-CN,zh-TW',
Leave a comment ,

JQuery不熟真的很麻煩,光是傳資料到後端就一堆要強記的

技術
  • 傳單一資料
$.when(
  $.getJSON("yyyServlet", {"FlowID" : "doQuery"})
).done( function(returnData){
   alert(returnData)  // 不用加上[0]即可取得回傳資料
})
  • 傳多資料到多個後端
$.when(
  $.getJSON("xxxServlet", {"FlowID" : "getJsGridSelectOptions"}),
  $.getJSON("yyyServlet", {"FlowID" : "doQuery"})
).done( function(returnData1,returnData2){
  alert(returnData1[0])  // 第一個json回傳值,要加上[0]才能抓到資料
  alert(returnData2[0])  // 第二個json回傳值,要加上[0]才能抓到資料
})

人不能太貪心, 又是前端, 後端, 又是mobile app, 又是k8s,docker容器, 領域差太多,很容易忘東忘西

Leave a comment

javascript 將form輸入的資料轉成json

技術 
function getFormDataAsJson(sFormId) {

    var form = $('#' + sFormId);
    if (form != null) {
        var json = {};

        var inputs = $('input', form);

        for (i = 0; i < inputs.length; ++i) {
            var next = inputs[i];
            var key = $(next).attr('id');
            var val = $(next).val();

            if (val != null && key != null)
                json[key] = val;
        }

        var selects = $('select', form);

        for (i = 0; i < selects.length; ++i) {
            var next = selects[i];
            var key = $(next).attr('id');
            var val = $(next).val();

            if (val != null && key != null)
                json[key] = val;
        }
        console.log(json);
        return json;
    }
}
Leave a comment