標籤: json

如何在 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 , ,