如何在 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 ,最後載入失敗。

Spring Boot 3.5+OpenAPI 3.1 加上 Selenium 踩坑

原本我在公司寫好的 Spring Boot 3.1.5+OpenAPI 3.1+selenium 4.21 都很正常,直到 Spring AI 1.0 橫空出世,我想 Spring Boot 也應該升級到Spring boot 3.5.0 ,才能用上 Spring AI 1.0 MCP 功能,也才能接上未來的 n8n。

但很可惜還沒來得及加上 Spring AI 1.0 外掛,就出現執行階段錯誤

02:29:19,730 |-INFO in ch.qos.logback.classic.util.ContextInitializer@4218d6a3 - ch.qos.logback.classic.util.DefaultJoranConfigurator.configure() call lasted 70 milliseconds. ExecutionStatus=DO_NOT_INVOKE_NEXT_IF_ANY

02:29:19,942 |-ERROR in ch.qos.logback.core.joran.spi.SaxEventInterpretationContext@663411de - No 'converterClass' attribute in <conversionRule>
02:29:19,942 |-ERROR in ch.qos.logback.core.joran.spi.SaxEventInterpretationContext@663411de - No 'converterClass' attribute in <conversionRule>
02:29:19,942 |-ERROR in ch.qos.logback.core.joran.spi.SaxEventInterpretationContext@663411de - No 'converterClass' attribute in <conversionRule>
02:29:19,942 |-ERROR in ch.qos.logback.core.joran.spi.SaxEventInterpretationContext@663411de - No 'converterClass' attribute in <conversionRule>
02:29:19,942 |-ERROR in ch.qos.logback.core.joran.spi.SaxEventInterpretationContext@663411de - No 'converterClass' attribute in <conversionRule>
02:29:19,942 |-ERROR in ch.qos.logback.core.joran.spi.SaxEventInterpretationContext@663411de - No 'converterClass' attribute in <conversionRule>
Logging system failed to initialize using configuration from 'null'
java.lang.NoSuchMethodError: 'void ch.qos.logback.core.model.processor.ModelInterpretationContext.setConfiguratorSupplier(java.util.function.Supplier)'
	at org.springframework.boot.logging.logback.SpringBootJoranConfigurator.buildModelInterpretationContext(SpringBootJoranConfigurator.java:117)

踩坑好久好久,後來才發現原本 selenium 使用 webdrivermanager.jar (5.8.0) 內建的 logback,與 spring-boot 3.5.0 內建的 logback 函式庫相衝突,需要升級到最新的 webdrivermanager 6.1.0 才可以匹配,且我有額外排除 webdrivermanager 6.1.0 內建的 logback。

我的設定檔案是 build.gradle,非 maven,重點如下

plugins {
	id 'java'
	id 'org.springframework.boot' version '3.5.0'	
	id 'io.spring.dependency-management' version '1.1.7'
...
}

dependencies {
 implementation("org.springframework.boot:spring-boot-starter-web:3.5.0")
 implementation 'org.seleniumhq.selenium:selenium-java:4.33.0'
 implementation("io.github.bonigarcia:webdrivermanager:6.1.0"){
  exclude group: 'ch.qos.logback', module: 'logback-classic'
 }
...
}

當然 src/main/resources 目錄也要新增 logback.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">
        <encoder>
            <pattern>[%-4level] %msg%n</pattern>
        </encoder>
    </appender>

    <logger name="io.github.bonigarcia" level="DEBUG" />
    <logger name="io" level="WARN" />
    <logger name="org" level="WARN" />
    <logger name="com" level="WARN" />

    <root level="INFO">
        <appender-ref ref="STDOUT" />
    </root>

</configuration>

這樣就能成功從 Spring Boot 3.1.5 升級到 Spring Boot 3.5.0 了

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();

docker安裝apache tika 文件辨識系統與N8N整合

現在主流文件辨識,應該都交由vision功能的AI模型處裡,辨識度高;若不想花錢使用AI,可以用apache tika頂著用。


docker 安裝 apache tika

docker run -d -p 9998:9998 --name tika-server-ocr apache/tika:latest-full
# 目前是3.1.0

安裝完畢,進入容器,安裝中文語言套件

docker exec -u root -it tika-server-ocr bash
###
apt update
apt-get install tesseract-ocr-chi-sim tesseract-ocr-chi-tra
###

測試

# Linux
# 中文圖檔 test.png
curl -T test.png http://127.0.0.1:9998/tika --header "X-Tika-OCRLanguage: eng+chi_tra+chi_sim"

N8N(nodemation)設定

前一個節點要把檔案準備好,再新增以下節點,丟給tika處理,回傳設定為text

為了n8n能用mcp,我得改用 Nginx Proxy Manager (docker)

我這種老派工程師,一直以來都用apache httpd 做反向代理,也沒用docker安裝,直到為了n8n能用mcp,果斷改用docker 安裝 nginx proxy manager。

nginx proxy manager 安裝方式請參考官方文件,安裝完畢反向對應到本地端的n8n(docker),此時需要額外設定,避開gzip壓縮問題,才能順利搭上n8n上的mcp server。

# disable gzip and proxy buffering for both /mcp/ and /mcp-test/
location ~* ^/(?:mcp|mcp-test)/ {
    gzip                       off;
    proxy_buffering            off;
    chunked_transfer_encoding  off;

    # prevent upstream compression
    proxy_set_header           Connection "";
    proxy_set_header           Accept-Encoding "";

    # re‑declare NPM’s proxy headers using built‑in variables
    proxy_http_version         1.1;
    proxy_set_header           Host                 $host;
    proxy_set_header           X-Real-IP            $remote_addr;
    proxy_set_header           X-Forwarded-For      $proxy_add_x_forwarded_for;
    proxy_set_header           X-Forwarded-Proto    $scheme;

    # send to your upstream based on NPM’s variables
    proxy_pass                 $forward_scheme://$server:$port;
}

解法出處