转义 – 永夜

WordPress 经典编辑器代码块无损迁移：批量转换 SyntaxHighlighter 短代码为 Gutenberg 区块

永夜 — Wed, 03 Jun 2026 12:58:44 +0000

浏览量： 30

一、发现问题

最近我在使用 Polylang + AutoPoly 插件对博客进行多语言翻译时，发现一个奇怪的现象：

– 用 Gutenberg 编辑器插入的代码块（SyntaxHighlighter 区块），翻译后的英文文章中代码格式完好无损，缩进、尖括号等都正常。

– 而用经典编辑器通过短代码插入的代码块，例如 `php`，翻译后却出现了严重的问题：尖括号被转义成 `<` 和 `>`，缩进丢失，甚至代码结构被破坏。（如图1、图2）

`，缩进丢失，甚至代码结构被破坏。（如图1）" class="wp-image-15611" srcset="https://www.shuijingwanwq.com/wp-content/uploads/2026/06/1-11.png 1089w, https://www.shuijingwanwq.com/wp-content/uploads/2026/06/1-11-300x121.png 300w, https://www.shuijingwanwq.com/wp-content/uploads/2026/06/1-11-768x311.png 768w, https://www.shuijingwanwq.com/wp-content/uploads/2026/06/1-11-1024x415.png 1024w" sizes="(max-width: 1089px) 100vw, 1089px" />

`，缩进丢失，甚至代码结构被破坏。（如图2）" class="wp-image-15612" srcset="https://www.shuijingwanwq.com/wp-content/uploads/2026/06/2-8.png 1122w, https://www.shuijingwanwq.com/wp-content/uploads/2026/06/2-8-300x125.png 300w, https://www.shuijingwanwq.com/wp-content/uploads/2026/06/2-8-766x318.png 766w, https://www.shuijingwanwq.com/wp-content/uploads/2026/06/2-8-1024x425.png 1024w" sizes="(max-width: 1122px) 100vw, 1122px" />

经过对比分析，我找到了根本原因：AutoPoly 翻译插件在解析文章内容时，能够正确识别 Gutenberg 的区块标记（

wp:syntaxhighlighter/code

），从而不对其内部代码进行翻译或转义处理；但对于经典编辑器中的短代码（`php` 等），插件无法准确判断其边界，于是试图翻译短代码内的内容，导致代码被破坏。（如图3）

二、手动验证替换方案

为了确认解决方案是否可行，我决定先手动对一篇文章进行测试。我选择了一篇包含 `php` 代码块的中文文章，在代码编辑器中将短代码手动替换为 Gutenberg 区块标记。

原始短代码形式：（如图4）

替换后的 Gutenberg 区块标记：（如图5）

保存文章后，我删除了对应的英文文章，并让 AutoPoly 重新翻译。结果令人满意：新生成的英文文章中，代码块格式与中文完全一致，没有出现任何转义或错乱。（如图7、图9）

我又用 python、go、text 等短代码分别进行了同样的手动测试，结果全部通过。这证明：将短代码替换为 Gutenberg 区块标记，可以彻底解决翻译时代码块被破坏的问题。

然而，我有数百篇文章使用了经典编辑器，逐个手动替换显然不现实。于是我决定编写一个批量处理方案。经过研究，我实现了“PHP 函数 + WordPress 批量操作”的方法，可以在文章列表页手动勾选需要转换的文章，一键完成替换。

下面将完整方案分享给大家。

三、解决方案概述

将文章中所有 SyntaxHighlighter 短代码（如 php、python）批量转换为 Gutenberg 区块标记，然后让翻译插件重新生成英文文章。该方法支持 30+ 种编程语言，并能自动处理别名映射（如 golang → go、javascript → js）。

四、操作步骤

第一步：备份数据库（非常重要）

在进行任何批量操作前，请务必备份你的 WordPress 数据库。推荐使用 UpdraftPlus 插件，或在主机管理面板的 phpMyAdmin 中导出。

第二步：将以下代码添加到主题的 functions.php

标记，请把代码放在 ?> 之前）。（如图12）" class="wp-image-15618" srcset="https://www.shuijingwanwq.com/wp-content/uploads/2026/06/12-4.png 1920w, https://www.shuijingwanwq.com/wp-content/uploads/2026/06/12-4-300x149.png 300w, https://www.shuijingwanwq.com/wp-content/uploads/2026/06/12-4-768x381.png 768w, https://www.shuijingwanwq.com/wp-content/uploads/2026/06/12-4-1024x508.png 1024w, https://www.shuijingwanwq.com/wp-content/uploads/2026/06/12-4-1536x762.png 1536w" sizes="auto, (max-width: 1920px) 100vw, 1920px" />

// 添加批量操作选项
function add_bulk_operation_convert_shortcode( $bulk_actions ) {
    $bulk_actions['convert_shortcode_to_block'] = '转换短代码为区块';
    return $bulk_actions;
}
add_filter( 'bulk_actions-edit-post', 'add_bulk_operation_convert_shortcode' );

function handle_bulk_operation_convert_shortcode( $sendback, $action, $post_ids ) {
    if ( $action !== 'convert_shortcode_to_block' ) return $sendback;
    global $wpdb;
    
    $languages = ['bash','shell','cpp','c','css','go','golang','java','js','javascript','perl','pl','php','plain','text','ps','powershell','python','ruby','sql','xml','xhtml','html','yaml','lua'];
    $converted_count = 0;
    $skipped_count = 0;
    
    foreach ( $post_ids as $post_id ) {
        $post = get_post( $post_id );
        if ( ! $post ) continue;
        
        $old_content = $post->post_content;
        $new_content = $old_content;
        $changed = false;
        
        foreach ( $languages as $lang ) {
            $open  = '[' . $lang . ']';
            $close = '[/' . $lang . ']';
            $pos = 0;
            while ( ($open_pos = strpos( $new_content, $open, $pos )) !== false ) {
                $close_pos = strpos( $new_content, $close, $open_pos );
                if ( $close_pos === false ) break;
                
                $code_start = $open_pos + strlen( $open );
                $code = substr( $new_content, $code_start, $close_pos - $code_start );
                $code = html_entity_decode( $code, ENT_QUOTES | ENT_HTML5, 'UTF-8' );
                
                if ( in_array( $lang, ['text','plain'] ) ) {
                    $block = "\n\n{$code}\n
\n";
                } else {
                    $alias = $lang;
                    if ( $alias === 'golang' )    $alias = 'go';
                    if ( $alias === 'javascript' ) $alias = 'js';
                    if ( $alias === 'pl' )        $alias = 'perl';
                    $block = "\n\n{$code}\n
\n";
                }
                
                $new_content = substr_replace( $new_content, $block, $open_pos, $close_pos + strlen( $close ) - $open_pos );
                $changed = true;
                $pos = $open_pos + strlen( $block );
            }
        }
        
        if ( $changed ) {
            $wpdb->update( $wpdb->posts, ['post_content' => $new_content], ['ID' => $post_id], ['%s'], ['%d'] );
            $converted_count++;
        } else {
            $skipped_count++;
        }
    }
    
    $sendback = add_query_arg( ['converted_count' => $converted_count, 'skipped_count' => $skipped_count], $sendback );
    return $sendback;
}
add_filter( 'handle_bulk_actions-edit-post', 'handle_bulk_operation_convert_shortcode', 10, 3 );

function bulk_operation_convert_shortcode_notices() {
    if ( isset( $_REQUEST['converted_count'] ) || isset( $_REQUEST['skipped_count'] ) ) {
        $converted = intval( $_REQUEST['converted_count'] ?? 0 );
        $skipped   = intval( $_REQUEST['skipped_count'] ?? 0 );
        echo '' .
             sprintf( '转换完成！%d 篇文章已更新，%d 篇文章无需更新。', $converted, $skipped ) .
             '';
    }
}
add_action( 'admin_notices', 'bulk_operation_convert_shortcode_notices' );

更新文件。

第三步：在文章列表页执行批量转换

1. 刷新 WordPress 后台的“所有文章”页面。

2. 勾选你需要转换的文章（可以多选）。（如图13）

3. 在顶部的“批量操作”下拉菜单中，选择“转换短代码为区块”。

4. 点击“应用”按钮。

系统会自动处理，完成后会在页面顶部显示转换结果（例如：转换完成！1 篇文章已更新，0 篇文章无需更新。）。

第四步：排坑记录：反斜杠丢失与 `>` 双重转义

在实现批量转换的过程中，我遇到了三个典型的“陷阱”，花了不少时间才彻底解决。记录下来，希望能帮助遇到类似问题的读者。

坑一：反斜杠 `\` 神秘失踪

我的测试文章中有一段 PowerShell 路径：`PS E:\wwwroot\object> bash test.sh`。执行批量转换后，反斜杠全部消失了，变成了 `PS E:wwwrootobject> bash test.sh`。

经过反复排查，原因出在两个方面：

1. 正则表达式：使用 `preg_replace_callback` 配合 `(.*?)` 捕获代码内容时，PHP 的正则引擎会对反斜杠进行转义处理。如果原始内容中包含 `\w` 这类组合，可能会被解释为转义序列而丢失。

2. WordPress 自动转义：使用 `wp_update_post` 保存文章时，WordPress 会自动调用 `wp_slash` 对内容中的反斜杠再次转义，导致保存后变成双反斜杠或直接丢失。

解决方案：放弃正则表达式，改用 `strpos` + `substr_replace` 进行字符串查找替换。同时，使用 `$wpdb->update` 直接写入数据库，完全绕过 `wp_update_post` 的自动转义机制。

坑二：`>` 变成 `>`

代码块中常见的 `>`（表示大于号）在转换后变成了 `>`，浏览器显示为 `>` 文本而不是 `>`。

原因是：原始文章内容中的 `>` 是 HTML 实体，在保存到数据库时，WordPress 或浏览器会将 `&` 字符转义为 `&`，从而导致双重转义。

解决方案：在生成 Gutenberg 区块之前，对捕获到的代码内容执行一次 `html_entity_decode`，将所有 HTML 实体还原为原始字符。这样保存后，`>` 就变成了 `>`，浏览器能正确显示为 `>`。

最终代码要点：
– 字符串查找替换（避免正则反斜杠问题）
– `html_entity_decode`（解决实体双重转义）
– `$wpdb->update`（绕过 WordPress 自动斜杠处理）

经过以上修正，批量转换后的代码块格式完整，反斜杠和特殊符号均能正确保留。

坑三：批量转换后的代码块格式符合预期，但是在网页中的一些代码块中会显示 `wp-block-syntaxhighlighter-code`。在代码编辑器中查看，未发现问题。如图16

在可视化编辑器中查看。提示：区块包含未预料的或无效的内容。点击尝试恢复，恢复后的代码与原始代码不一致。

原始代码如下：

db->driverName === 'mysql') {
            // http://stackoverflow.com/questions/766809/whats-the-difference-between-utf8-general-ci-and-utf8-unicode-ci
            $tableOptions = 'CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci ENGINE=InnoDB';
            $this->execute('ALTER TABLE {{%user}} ROW_FORMAT=DYNAMIC');
            $this->execute('ALTER TABLE {{%user}} CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci');
            $this->execute('ALTER TABLE {{%log}} ROW_FORMAT=DYNAMIC');
            $this->execute('ALTER TABLE {{%log}} CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci');
        }
 
        $this->addCommentOnTable('{{%user}}', '用户', $tableOptions);
        $this->addCommentOnTable('{{%log}}', '日志', $tableOptions);
    }
 
    /**
     * {@inheritdoc}
     */
    public function safeDown()
    {
        echo "m180620_105204_update_table_options_to_log cannot be reverted.\n";
 
        return false;
    }
 
    /*
    // Use up()/down() to run migration code without a transaction.
    public function up()
    {
 
    }
 
    public function down()
    {
        echo "m180620_105204_update_table_options_to_log cannot be reverted.\n";
 
        return false;
    }
    */
}

恢复后的代码如下，一些代码丢失：


db->driverName === 'mysql') {
            // http://stackoverflow.com/questions/766809/whats-the-difference-between-utf8-general-ci-and-utf8-unicode-ci
            $tableOptions = 'CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci ENGINE=InnoDB';
            $this->execute('ALTER TABLE {{%user}} ROW_FORMAT=DYNAMIC');
            $this->execute('ALTER TABLE {{%user}} CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci');
            $this->execute('ALTER TABLE {{%log}} ROW_FORMAT=DYNAMIC');
            $this->execute('ALTER TABLE {{%log}} CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci');
        }

        $this->addCommentOnTable('{{%user}}', '用户', $tableOptions);
        $this->addCommentOnTable('{{%log}}', '日志', $tableOptions);
    }

    /**
     * {@inheritdoc}
     */
    public function safeDown()
    {
        echo "m180620_105204_update_table_options_to_log cannot be reverted.\n";

        return false;
    }

    /*
    // Use up()/down() to run migration code without a transaction.
    public function up()
    {

    }

    public function down()
    {
        echo "m180620_105204_update_table_options_to_log cannot be reverted.\n";

        return false;
    }
    */
}

临时解决方案为从网页源代码中复制原始代码至可视化编辑器中，保存。

第五步：移除临时代码

批量转换完成后，请务必回到 functions.php，删除刚才添加的所有代码。这样做有两个好处：

– 避免日后误操作；

– 保持主题文件的整洁。

第六步：重新生成翻译文章

如果你使用了 Polylang + AutoPoly：

1. 删除之前因短代码问题导致的英文文章（或将其移至回收站）。

2. 重新执行翻译（AutoPoly 会自动根据新的中文文章内容生成英文版本）。

3. 此时你会发现，英文文章中的代码块格式与中文完全一致，不会再出现转义或错乱问题。

五、支持的语言列表

代码中已包含以下语言（可根据需要自行增删）：

bash, shell, cpp, c, css, go, golang, java, js, javascript, perl, pl, php, plain, text, ps, powershell, python, ruby, sql, xml, xhtml, html, yaml, lua

注意：plain 和 text 会转换为不指定 language 属性的纯文本块；golang 自动映射为 go，javascript 映射为 js，pl 映射为 perl。

六、常见问题

Q1：执行批量操作后，文章内容没有变化？

可能文章本身没有使用短代码，或者短代码的语言标签不在支持列表中。可以检查代码中的 $languages 变量，确保已包含你使用的所有标签。

Q2：转换后代码块的语法高亮失效？

请确保你仍然安装了 SyntaxHighlighter Evolved 插件，并且版本支持 Gutenberg 区块。该插件从 3.x 版本开始已经兼容区块编辑器。

Q3：我的代码块是 code 这种无语言标签的形式，怎么办？

你可以将代码中的语言列表改为 code，然后在替换回调中统一处理为不带 language 属性的区块。

Q4：能不能只替换特定分类下的文章？

可以。在第三步“勾选文章”时，你可以先通过分类筛选，然后全选当前分页，再执行批量操作。

七、总结

通过 PHP 函数 + WordPress 原生批量操作，我们实现了对经典编辑器中 SyntaxHighlighter 短代码的精准、批量转换。整个过程无需安装额外插件，安全可控，完美解决了多语言翻译时代码块格式错乱的问题。

在 Excel 中处理 CSV 文件的某列的 URL 网址的字符串反转义

永夜 — Fri, 15 May 2026 03:04:52 +0000

浏览量： 75

1、CSV 文件的某列的 URL 网址，现在是字符串转义后的。示例：

http:\/\/www.jammerall.com\/product_images\/p\/035\/JMHigh_Sensitivity_and_Long_Range_From_0_to_6GHz_Drone_Alarmer_3__03159_zoom.jpg

2、由于计划将 CSV 文件导入至 WooCommerce 的产品中，网址映射为图片。如果是转义后的，导入后图片为空。决定反转义后，再次导入。

3、选择要替换的列，查找替换法，按 Ctrl+H 打开替换窗口，查找内容输入：\/ 替换为输入：/ 点击”全部替换”。如图1

告别低效！WordPress 代码块自动化处理方案：从手动调整到报错解决，一篇文章全搞定！

永夜 — Wed, 13 May 2026 09:56:49 +0000

浏览量： 75

在撰写技术博客时，代码块的正确显示至关重要。近期，我在使用 WordPress Gutenberg 编辑器处理代码块时遇到了效率低下的问题，并苦苦寻找更优解法。经过反复摸索，我终于总结出一套「从手动到自动」的完整方案，既能解决报错问题，又能大幅提升效率。现将我的经验和解决方案分享出来，如果你也在为代码块处理烦恼，不妨一试！以前的方案：解决 WordPress Gutenberg 多 Shortcode 解析不稳定问题的实践记录

一、当前方案：低效但可行的“手动三步法”

目前，我处理代码块的流程是：

1. 第一步：粘贴

[go][/go]

简码
在可视化编辑器中，先粘贴

[go]你的代码块内容[/go]

。编辑器会自动将其转换为预定义的简码块（如块）。
2. 第二步：手动删除简码块（如图1），替换为 SyntaxHighlighter 块

找到刚刚转换的块，手动删除它，然后替换为（如图2）：





你的代码块内容

3. 第三步：调整语言属性

如果需要语法高亮，不是默认的 Plain Text，还需手动添加 {"language":"go"} 等属性。

问题：效率极低，尤其当文章包含多个代码块时

如果一篇文章有 10 个以上代码块，重复执行上述三步操作将耗费大量时间，且容易出错。我急需更高效的方法。

二、探索与挫折：直接粘贴代码却遭遇报错

为了提升效率，我尝试参考代码编辑器中的块（如图3）。例如：

块（如图3）" class="wp-image-10351" srcset="https://www.shuijingwanwq.com/wp-content/uploads/2026/05/3-4.png 1140w, https://www.shuijingwanwq.com/wp-content/uploads/2026/05/3-4-300x207.png 300w, https://www.shuijingwanwq.com/wp-content/uploads/2026/05/3-4-767x528.png 767w, https://www.shuijingwanwq.com/wp-content/uploads/2026/05/3-4-1024x705.png 1024w" sizes="auto, (max-width: 1140px) 100vw, 1140px" />


// Walk 中序遍历树 t
func Walk(t *tree.Tree, ch chan int) {
    ch <- t.Value // 这里包含 < 符号！
}

然而，当代码中包含未转义的 `<` 或 `>` 符号（如 `ch <- t.Value` 中的 `<`）时，编辑器会报错：

区块包含未预料的或无效的内容（如图4）
原因：WordPress 将 `<` 或 `>` 误判为 HTML 标签，导致解析失败。

` 符号（如 `ch <- t.Value` 中的 `<`）时，编辑器会报错：区块包含未预料的或无效的内容（如图4）" class="wp-image-10352" srcset="https://www.shuijingwanwq.com/wp-content/uploads/2026/05/4-3.png 954w, https://www.shuijingwanwq.com/wp-content/uploads/2026/05/4-3-300x100.png 300w, https://www.shuijingwanwq.com/wp-content/uploads/2026/05/4-3-767x255.png 767w" sizes="auto, (max-width: 954px) 100vw, 954px" />

三、核心解决方案：自动化转义工作流

经过多次测试，我找到了一个 “零手动转义”的自动化方案，完美解决了报错和效率问题。核心思路是：使用记事本（EditPlus）批量替换代码中的特殊字符，同时保持块注释语法不变。

四、详细操作步骤（全程在记事本中完成）

1. 步骤 1：在记事本中编写原始内容

使用自定义标记（如 text、go）分隔代码块，保持原始代码格式：

我正在学习 Go 语言的并发编程。

[text]
# 检查ufw是否在运行
root@wireguard-2026-0509:~# ufw status
Status: inactive
[/text]

[go]
// Walk 中序遍历树 t
func Walk(t *tree.Tree, ch chan int) {
    ch <- t.Value // 这里包含 < 符号！
}
[/go]

2. 步骤 2：批量替换标记为代码块模板
替换 `[text]` 为：





替换 `[/text]` 为：

替换 `[go]` 为：





替换 `[/go]` 为：

3. 步骤 3：精准转义代码内容中的特殊字符（如图5）

– 关键技巧：仅选中





标签内的代码内容（不包含块注释），执行以下替换：

查找：`<` → 替换为：`<`

查找：`>` → 替换为：`>`

查找：`&` → 替换为：`&`


    – （注意：勾选“区分大小写”，避免误转义块注释中的字符）

五、替换后效果对比

替换前（报错）：





func Walk(t *tree.Tree, ch chan int) {
    ch <- t.Value // 报错！
}






替换后（正确显示）（如图6）：








func Walk(t *tree.Tree, ch chan int) {
    ch <- t.Value // 转义后正确解析
}






六、重要注意事项



1. 仅转义代码内容，不转义块注释！（即不要转义 






标签中的任何字符）




2. 前端显示正常： 虽然代码中显示为 <，但发布后浏览器会自动渲染为 <，读者看到的是正确代码。 



3. 效率提升： 相比手动调整每个代码块（5-10 分钟/10 个块），本方案仅需 30 秒/10 个块。



七、总结与建议 



1. 从手动到自动的质变： 通过记事本批量替换，彻底解决了报错问题，同时大幅提升了处理效率。 



2. 推荐工作流： 建议保存替换模板到记事本中，每次写博客时直接粘贴模板，按步骤操作即可。 



3. 适用场景： 特别适合技术博主撰写包含大量代码块的文章。 希望这个方案能帮你摆脱繁琐的手动操作，让博客写作更高效！

解决 WordPress Gutenberg 多 Shortcode 解析不稳定问题的实践记录

永夜 — Wed, 15 Apr 2026 08:10:45 +0000

浏览量： 309

一、背景

在使用 WordPress 区块编辑器（Gutenberg）编写技术博客时，我经常需要在一篇文章中同时包含多种代码块，例如：

SQL 查询（SQL）
Go 示例代码（Go）
PHP 代码（PHP）
说明文本（Text）

通常一篇文章中会包含 10 个左右的代码块混合使用。

早期使用经典编辑器时，这类内容是非常稳定的，但在 Gutenberg 中，我遇到了一个比较典型的问题：

多个 sql / go / php shortcode 在“整篇粘贴”时偶尔解析异常

二、问题现象

在使用 SyntaxHighlighter Evolved 时，我的写作方式通常是：

在本地 txt 文件中写完整文章
包含多个 sql、go、php 块
直接 Ctrl + V 粘贴到 WordPress

但在 Gutenberg 中会出现以下现象：

❌ 异常情况
第一次发布后：
部分 SQL 块被解析成 code 或 部分 shortcode 未正确渲染再次编辑文章后重新粘贴：又恢复正常


这种“第一次异常、第二次正常”的行为非常困扰批量写作。
三、根本原因分析
问题本质不在插件，而在 Gutenberg 的自动解析机制：
Gutenberg 行为特点：
当你：
一次性粘贴整篇包含多个 shortcode 的内容
系统会：
自动识别 sql、go 等 shortcode

自动拆分为多个区块

同时尝试解析 HTML / inline code

在某些情况下误判反引号（`）为 inline code
导致：
orders → orders

再被转义 → orders
四、稳定写作方案（核心）
经过多次测试，最稳定的方法是：
❗不要让 Gutenberg “猜区块结构”，而是提前固定结构
五、兼容方案（用于旧写法或批量粘贴）
在仍使用 sql / go / php shortcode 的情况下（例如历史文章或本地 txt 模板），可以采用以下方式：
Step 1：创建 Shortcode 区块
在 WordPress Gutenberg 编辑器中：
点击「+ 添加区块」

选择 Shortcode（简码）区块

Step 2：粘贴整篇文章
将本地 txt 中的完整内容一次性粘贴，例如：
select count(*) from orders;

说明文字……
fmt.Println("hello")

select * from users;

Step 3：发布或预览验证
检查：
shortcode 是否正确解析

是否出现 code 污染

SQL / Go 是否正常渲染

⚠️ 注意事项
该方式属于：
兼容旧 shortcode 写作方式
不建议用于新文章长期使用。
六、（新增）现代推荐方案（强烈推荐）

Step 1：使用 SyntaxHighlighter Code Block
/syntax
插入：
SyntaxHighlighter Evolved Code Block
Step 2：粘贴代码
例如：
fmt.Println(“hello”)
Step 3：选择语言

SQL

Go

PHP

优点

无 shortcode 解析问题

不会出现 code 污染

完全 Gutenberg 原生支持

更稳定
七、推荐写作规范（长期使用）
为了保证技术博客在 Gutenberg 环境下的稳定性，建议统一以下规范。
1.代码块规范（推荐新标准）
所有新文章统一使用 SyntaxHighlighter Evolved 的 Code Block（Gutenberg 版本）：
| 类型  | 写法                                 |

| — | ———————————- |

| SQL | SyntaxHighlighter Code Block + SQL |

| Go  | SyntaxHighlighter Code Block + Go  |

| PHP | SyntaxHighlighter Code Block + PHP |
不再作为主要方式使用：
...
...
仅用于历史文章兼容。
2.粘贴规范
推荐统一使用：
Ctrl + Shift + V（纯文本粘贴）

或使用 Visual Studio Code 作为中转编辑器
3.区块规范（新版）
| 操作                           | 推荐        |

| —————————- | ——— |

| SyntaxHighlighter Code Block | ✅ 推荐（主方式） |

| Shortcode 区块（）          | ⚠️ 仅兼容用途  |

| Paragraph 粘贴                 | ❌ 避免      |
八、为什么这个方案更稳定
核心原因是：
1.不再依赖 Gutenberg 自动解析
避免：
shortcode 自动拆分错误

首次渲染异常
2.代码结构由 Block 控制
WordPress Gutenberg 直接使用：
Code Block

SyntaxHighlighter Block
而不是 shortcode 推断
3.避免 HTML 污染
彻底解决：
code 误解析



反引号污染

九、总结（新版）
在 Gutenberg 环境下编写技术博客（SQL / Go / PHP 混合内容）时，核心原则升级为：
🧠 新核心原则：
先用 Block 结构保证渲染稳定，再粘贴内容
推荐流程（最终版）
1.使用 SyntaxHighlighter Code Block（/syntax）

2.一次性粘贴整篇文章（txt）

3.删除自动生成的 Shortcode 区块

4.保留 Code Block 渲染代码

5.发布前预览检查
十、延伸优化（可选）
如果后续希望进一步优化体验，可以考虑：
Prism 高亮（更现代）

代码复制按钮

行号显示优化

主题统一代码样式
十一、发布前预览与兜底检查（重要）
在完成文章编辑后，即使已经按照规范使用 SyntaxHighlighter Code 区块（SQL / Go / PHP 等），仍然建议增加一个“发布前预览步骤”，用于最终兜底检查。
在 WordPress 的 Gutenberg 编辑器中，可以通过以下方式进行预览验证：
1.使用预览功能
在发布前点击：
「预览（Preview）」

或「在新标签页中预览」
确认页面渲染效果是否正常。
重点检查：
SQL 是否仍然保持完整结构

是否出现 code 或  污染

多个 sql / go / php 是否正确渲染

2.快速滚动检查所有代码块
对于一篇包含约 10 个代码块的技术文章，建议在预览页快速检查：
SQL 查询块是否完整

Go 示例是否正常换行

PHP 代码是否未被截断

文本说明是否错位
这个过程通常只需要 10～20 秒，但可以有效避免发布后返工。
3.发现问题的处理方式
如果在预览中发现问题：
不要直接整篇重新粘贴

只针对异常的 shortcode 区块重新粘贴内容

再次预览确认修复结果
4.最终发布原则
只有在预览确认以下条件后，才进行发布：
所有代码块渲染正常

无 code 或 HTML 转义污染

多语言代码块结构一致

页面整体排版正常
5.这一步骤的意义
这一预览步骤的核心作用是：
在发布前拦截 Gutenberg 自动解析带来的偶发问题
相比“发布后再修复”，可以显著减少返工次数，提高整体写作效率与稳定性。



在 Laravel 9 中使用原生表达查询时，报错：SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax;
永夜 — Tue, 02 Apr 2024 01:31:08 +0000

				 浏览量： 76
			1、在 Laravel 9 中使用原生表达查询时，报错：SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax;。原因应该与 Hannah O’ Conno 有关。其中存在 ‘ 。如图1

图1



{
    "status_code": 500,
    "code": "42000",
    "message": "SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'Conno','444451@163.com'),('\u738b\u67d0\u4eba','444451@163.com'),('\u738b\u67d0\u67d0','44445@163.' at line 1 (SQL: select `id`, `name`, `email`, `type` from `customers` where (name,email) in (('\"Hannah O' Conno','444451@163.com'),('\u738b\u67d0\u4eba','444451@163.com'),('\u738b\u67d0\u67d0','44445@163.com'),('\u738b\u67d0\u4eba1','444451@163.com'),('\u5ba2\u6237\u59d3\u540d','44445@163.com'),('\u738b\u67d0\u67d0','4444@163.com'),('\u5ba2\u6237\u59d3\u540d100','2222200@qq.com'),('\u5ba2\u6237\u59d3\u540d200','3333300@qq.com'),('\u738b\u67d0\u4eba','44445@163.com'),('\u674e\u67d0\u67d0','4444@163.com'),('\u5ba2\u6237\u59d3\u540d','4444@163.com'),('\u738b\u67d0\u4eba','4444@163.com'),('\u5ba2\u6237\u59d3\u540d2','444444442@163.com'),('\u5ba2\u6237\u59d3\u540d1','44444@163.com'),('\u738b\u67d0\u4eba2','4444@163.com'),('Person-nl Person-nl','customer+denied@email.nl'),('zhuo lynn','zhuolynn881219@gmail.com'),('Harry Potter','fanyan154@gmail.com'),('Test Person-us','customer@email.us'),('1','18345038699@163.com'),('HF','123456@qa.com'),('Daly Siennaa','heodloklrs@iubridge.com'),('ying guo','18345038699@163.com'),('\u90ed\u5f71','425233655@qq.com')) order by `id` desc)",
    "trace": {
        "line": 759,
        "file": "E:\\wwwroot\\object\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Connection.php",
        "class": "Illuminate\\Database\\QueryException",
        "trace": {
            "previous": [
                "#0 E:\\wwwroot\\object\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Connection.php(413): PDO->prepare('select `id`, `n...')",
                "#1 E:\\wwwroot\\object\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Connection.php(752): Illuminate\\Database\\Connection->Illuminate\\Database\\{closure}('select `id`, `n...', Array)",
                "#2 E:\\wwwroot\\object\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Connection.php(719): Illuminate\\Database\\Connection->runQueryCallback('select `id`, `n...', Array, Object(Closure))",
                "#3 E:\\wwwroot\\object\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Connection.php(421): Illuminate\\Database\\Connection->run('select `id`, `n...', Array, Object(Closure))",
                "#4 E:\\wwwroot\\object\\vendor\\laravel\\framework\\src\\Illuminate\\Database\\Query\\Builder.php(2636): Illuminate\\Database\\Connection->select('select `id`, `n...', Array, true)",
                "#5 
            ]
        }
    }
}




2、参考：在 Laravel 9 中使用原生表达查询时，in 条件用于多个字段

3、决定在 whereRaw 中采用绑定参数的形式，以转义 ‘ 字符。第二个参数是可选项，值是一个绑定参数的数组。调整如下




	// $builder->whereRaw('(' . $criteria['whereRawIn'][0] . ') in (' . $str . ')');
	$builder->whereRaw('(?) in (?)', [$criteria['whereRawIn'][0], $str]);




4、不再报错，生成的 SQL 如下。符合预期。Hannah O\’ Conno 已经自动转义。如图2

图2



select
  `id`,
  `name`,
  `email`,
  `type`
from
  `customers`
where
  ('name,email') in (
    '(\'\"Hannah O\' Conno\',\'444451@163.com\'),(\'王某人\',\'444451@163.com\'),(\'王某某\',\'44445@163.com\'),(\'王某人1\',\'444451@163.com\'),(\'客户姓名\',\'44445@163.com\'),(\'王某某\',\'4444@163.com\'),(\'客户姓名100\',\'2222200@qq.com\'),(\'客户姓名200\',\'3333300@qq.com\'),(\'王某人\',\'44445@163.com\'),(\'李某某\',\'4444@163.com\'),(\'客户姓名\',\'4444@163.com\'),(\'王某人\',\'4444@163.com\'),(\'客户姓名2\',\'444444442@163.com\'),(\'客户姓名1\',\'44444@163.com\'),(\'王某人2\',\'4444@163.com\'),(\'Person-nl Person-nl\',\'customer+denied@email.nl\'),(\'zhuo lynn\',\'zhuolynn881219@gmail.com\'),(\'Harry Potter\',\'fanyan154@gmail.com\'),(\'Test Person-us\',\'customer@email.us\'),(\'1\',\'18345038699@163.com\'),(\'HF\',\'123456@qa.com\'),(\'Daly Siennaa\',\'heodloklrs@iubridge.com\'),(\'ying guo\',\'18345038699@163.com\'),(\'郭影\',\'425233655@qq.com\')'
  )
order by
  `id` desc






显示 Blade 视图中的 JSON 数据，定制转义规则(取消将 ” (双引号) 转换为 HTML 实体)，以便于前端解析
永夜 — Thu, 29 Sep 2022 01:18:31 +0000

				 浏览量： 88
			1、现有代码实现如下



"url": "{{ json_encode($item['url_object']) }}",




2、最终生成的 JSON 数据结构如下：



"url": "{"ID":18,"title":"summer","object":"product_cat","object_id":18,"children":[],"url":"/collections/summer","key":3991}",




3、Blade {{ }} 语句是自动经过 PHP 的 htmlspecialchars 函数传递来防范 XSS 攻击的。因此，需要 {!! !!}，防止将 ” (双引号) 转换为 HTML 实体。



"url": "{!! htmlspecialchars(json_encode($item['url_object']), ENT_NOQUOTES | ENT_HTML401) !!}",




4、但是，生成的 JSON 结构错误。原因在于 url 的值未转义。如图1

图1



{
	"image": "",
	"mobile_image": "",
	"url": "{"ID":18,"title":"summer","object":"product_cat","object_id":18,"children":[],"url":"\/collections\/summer","key":3991}",
	"title": "summer"
}




5、使用addcslashes — 以 C 语言风格使用反斜线转义字符串中的字符。



"url": "{!! htmlspecialchars(addcslashes(json_encode($item['url_object']), "\f\n\r\t\\\""), ENT_NOQUOTES | ENT_HTML401) !!}",




6、生成的 JSON 结构正确。如图2

图2



{
	"url": "{\"ID\":18,\"title\":\"summer\",\"object\":\"product_cat\",\"object_id\":18,\"children\":[],\"url\":\"\\/collections\\/summer\",\"key\":3991}",
	"image": "",
	"title": "summer",
	"mobile_image": ""
}






执行生成的 SQL ，在本地 Windows 10 中可以，在 Liunx 容器中，未查询到记录(与 DIRECTORY_SEPARATOR 有关)
永夜 — Sat, 20 Aug 2022 07:24:25 +0000

				 浏览量： 71
			1、执行生成的 SQL ，在本地 Windows 10 中可以，在 Liunx 容器中，未查询到记录。在 Windows 10 下打印记录。如图1

图1



$rawSchema = ThemeAssetEntity::select('schema')
	->where('theme_id', '=', $this->getThemeId())
	->where('category', '=', ThemeAssetEntity::CATEGORY_PAGE)
	->where('asset_key', 'regexp', $this->themeLayout->getTemplateExtensionsPattern($basename))
	->first();
var_dump($rawSchema);
exit;




2、在 Liunx 容器 下打印记录。其结果为 NULL。如图2

图2

3、决定打印生成的 SQL，需要删除 ->first() 。进行一下对比。Windows 10 与 Linux 的分别如下，然后在 MySQL 中执行 Linux 下的 SQL ，查询结果为 NULL。区别在于 pages/\ 与 pages//。如图3

first() 。进行一下对比。Windows 10 与 Linux 的分别如下，然后在 MySQL 中执行 Linux 下的 SQL ，查询结果为 NULL。区别在于 pages/\ 与 pages//" width="1463" height="166" srcset="https://www.shuijingwanwq.com/wp-content/uploads/2022/08/3-5.png 1463w, https://www.shuijingwanwq.com/wp-content/uploads/2022/08/3-5-300x34.png 300w, https://www.shuijingwanwq.com/wp-content/uploads/2022/08/3-5-1024x116.png 1024w, https://www.shuijingwanwq.com/wp-content/uploads/2022/08/3-5-768x87.png 768w" sizes="auto, (max-width: 1463px) 100vw, 1463px" />图3



$rawSchema = ThemeAssetEntity::select('schema')
	->where('theme_id', '=', $this->getThemeId())
	->where('category', '=', ThemeAssetEntity::CATEGORY_PAGE)
	->where('asset_key', 'regexp', $this->themeLayout->getTemplateExtensionsPattern($basename));
$query = str_replace(array('?'), array('\'%s\''), $rawSchema->toSql());
$query = vsprintf($query, $rawSchema->getBindings());
dump($query);
exit;







select `schema` from `theme_asset` where `theme_id` = '96b1c8b9-5b18-4760-9e26-50ab009ac011' and `category` = 'page' and `asset_key` regexp '^pages/\product_detail(\.blade\.php|\.liquid|\.json)'







select `schema` from `theme_asset` where `theme_id` = '96dcab33-3e1d-4279-ab96-39693f03515f' and `category` = 'page' and `asset_key` regexp '^pages//product_detail(\.blade\.php|\.liquid|\.json)'




4、分析生成正则表达式的函数。打印 DIRECTORY_SEPARATOR，两个环境的结果是不一致的。分别为 \ 与 /



    public function getTemplateExtensionsPattern($basename)
    {
        $escapeDot = array_map(function($extension){
            return str_replace('.', '\\.' ,$extension);
        }, $this->getTemplateExtensions());
        print_r(DIRECTORY_SEPARATOR);
        exit;
       return sprintf('^%s%s%s%s', $this->getPageDir(), '/'.DIRECTORY_SEPARATOR, $basename, '('.join('|', $escapeDot) .')');
    }







\







/




5、删除掉 .DIRECTORY_SEPARATOR，因为其在两个操作系统中不一致。且因为在表中仅使用 /，无需要再转义。最终生成的 SQL 在两个操作系统中一致。且能够查询到结果。如图4

图4



public function getTemplateExtensionsPattern($basename)
{
	$escapeDot = array_map(function($extension){
		return str_replace('.', '\\.' ,$extension);
	}, $this->getTemplateExtensions());

   return sprintf('^%s%s%s%s', $this->getPageDir(), '/', $basename, '('.join('|', $escapeDot) .')');
}







"select `schema` from `theme_asset` where `theme_id` = '96dcab33-3e1d-4279-ab96-39693f03515f' and `category` = 'page' and `asset_key` regexp '^pages/product_detail(\.blade\.php|\.liquid|\.json)'"






在 Laravel 6 中打印 SQL，复制至 MySQL 5.7 中执行，执行结果与程序执行结果不一致
永夜 — Wed, 22 Jun 2022 01:10:21 +0000

				 浏览量： 101
			1、打印程序执行的 SQL 语句，结果如下。如图1

图1



       $builder = ThemeAsset::select('updated_at', 'asset_key')
           ->where('theme_id', '=', $this->dbViewStorage->getThemeId())
           ->whereRaw('LOWER(asset_key) regexp ?', [strtolower($this->targetToRegex($target))]);

       $query = str_replace(array('?'), array('\'%s\''), $builder->toSql());
       $query = vsprintf($query, $builder->getBindings());
       dump($query);
       exit;







"select `updated_at`, `asset_key` from `theme_asset` where `theme_id` = 'theme' and LOWER(asset_key) regexp '^(assets|apps\.+\.+\assets)'"




2、打印程序执行的 SQL 语句结果，其数量为 79 条。数组元素从 0 开始。如图2

图2

3、将打印 SQL，复制至 MySQL 5.7 中执行。其数量为 81 条。如图3

图3

4、决定将 whereRaw 中的 ? 取消，调整为原生 SQL。打印程序执行的 SQL 语句结果，其数量为 81 条。如图4

图4



$builder = ThemeAsset::select('updated_at', 'asset_key')
           ->where('theme_id', '=', $this->dbViewStorage->getThemeId())
           ->whereRaw('LOWER(asset_key) regexp \'^(assets|apps\.+\.+\assets)\'')




5、保留 whereRaw 中的 ?，需要使用 addslashes 转义 \。打印程序执行的 SQL 语句结果，其数量为 81 条。符合预期。



$assets = ThemeAsset::select('updated_at', 'asset_key')
            ->where('theme_id', '=', $this->dbViewStorage->getThemeId())
            ->whereRaw('LOWER(asset_key) regexp ?', [strtolower(addslashes($this->targetToRegex($target)))])
            ->get();






在 MySQL 5.7 中搜索反斜杠(\)，对于 Like 时的转义，需要使用 \\\\
永夜 — Mon, 21 Mar 2022 10:10:03 +0000

				 浏览量： 109
			1、表中数据如下


INSERT INTO `object_store`.`theme_asset`(`id`, `theme_id`, `version`, `asset_key`, `mime_type`, `category`, `schema`, `created_at`, `updated_at`) VALUES (63, 'vogue', '', 'layouts\\basic.blade.php', 'text/html', 'unknown', NULL, '2022-02-15 09:59:41', '2022-02-15 09:59:41');





2、当在执行 where like 查询时，使用 like ‘layouts\\%’ 试图查询出以 layouts\ 开头的数据行。结果为空。如图1

图1


select
  `id`,
  `theme_id`,
  `version`,
  `asset_key`,
  `mime_type`,
  `category`,
  `schema`,
  `created_at`,
  `updated_at`
from
  `theme_asset`
where
  (
    `theme_id` = 'vogue'
    and `asset_key` like 'layouts\\%'
  )




3、当在执行 where like 查询时，使用 like ‘layouts\\\\%’ 试图查询出以 layouts\ 开头的数据行。才真正搜索出相应的结果。如图2

图2


select
  `id`,
  `theme_id`,
  `version`,
  `asset_key`,
  `mime_type`,
  `category`,
  `schema`,
  `created_at`,
  `updated_at`
from
  `theme_asset`
where
  (
    `theme_id` = 'vogue'
    and `asset_key` like 'layouts\\%'
  )




4、参考：https://dev.mysql.com/doc/refman/5.7/en/string-comparison-functions.html 。MySQL 在字符串中使用 C 转义语法（例如，\n 表示换行符）。如果您希望 LIKE 字符串包含文字 \，则必须将其加倍。（除非启用了 NO_BACKSLASH_ESCAPES SQL 模式，在这种情况下不使用转义字符。）例如，要搜索 \n，请将其指定为 \\n。 要搜索 \，请将其指定为 \\\\; 这是因为反斜杠被解析器剥离一次，并且在进行模式匹配时再次剥离，留下一个反斜杠进行匹配。如图3

图3


被转义的 JSON 字符的格式化
永夜 — Wed, 22 Sep 2021 03:08:00 +0000

				 浏览量： 93
			1、一段 JSON 结构的且被转义的字符。如图1

图1


{
  "timestamp": 1631780119.542232,
  "url": "http://apimerge.chinamcloud.com?&com_id=1&tenantid=59b8833e28c267350c8c0fa5d890c4a4&cms_app_id=268&number=10&page=1&host=",
  "param": [],
  "header": [
    "x-request-id:30922c2548c2b85ee201b1e8cc7639e7"
  ],
  "result": "{\"contentList\":[{\"id\":\"4228588d-06ba-4587-b234-28414db8f860\",\"title\":\"\\u522e\\u522e\\u522e\",\"shortTitle\":\"\",\"shareTitle\":\"\",\"summary\":\"\",\"shareImage\":\"\",\"shareOpen\":false,\"showNum\":0,\"model\":\"9\",\"modelName\":\"scratch\",\"isComment\":0,\"pulishDate\":1625673600,\"slidePic\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/\",\"listPic\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/\",\"htmlUrl\":\"http:\\/\\/morefun.chinamcloud.com\\/act\\/scratch\\/index.html?act_id=4228588d-06ba-4587-b234-28414db8f860&group_id=59b8833e28c267350c8c0fa5d890c4a4\",\"wechatUrl\":\"\",\"startTime\":1625673600,\"endTime\":1637769600,\"contentSummary\":\"\",\"tag\":2},{\"id\":\"649b79cb-fd65-4d4f-8b6c-349131f8a5ff\",\"title\":\"\\u7b2c\\u4e8c\\u4e2a\\u6d3b\\u52a8\",\"shortTitle\":\"\",\"shareTitle\":\"aaaa\",\"summary\":\"aa\",\"shareImage\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/tmp\\/20210708\\/09\\/20210708094246136048.png\",\"shareOpen\":true,\"showNum\":0,\"model\":\"9\",\"modelName\":\"vote\",\"isComment\":0,\"pulishDate\":1625673600,\"slidePic\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/20210708\\/09\\/20210708094307567894.png\",\"listPic\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/20210708\\/09\\/20210708094307567894.png\",\"htmlUrl\":\"http:\\/\\/morefun.chinamcloud.com\\/act\\/custom-built-vote-screen\\/index.html?act_id=649b79cb-fd65-4d4f-8b6c-349131f8a5ff&group_id=59b8833e28c267350c8c0fa5d890c4a4\",\"wechatUrl\":\"\",\"startTime\":1625673600,\"endTime\":1628092800,\"contentSummary\":\"\",\"tag\":2},{\"id\":\"b0463ff2-3429-4a7c-9aad-bc1bddc3bf81\",\"title\":\"\\u7b2c\\u4e00\\u4e2a\\u6d3b\\u52a8\",\"shortTitle\":\"\",\"shareTitle\":\"\\u6ca1\\u6709\\u63cf\\u8ff0\\u624d\\u662f\\u771f\\u6b63\\u7684\\u63cf\\u8ff0\",\"summary\":\"\\u6ca1\\u6709\\u63cf\\u8ff0\\u624d\\u662f\\u771f\\u6b63\\u7684\\u63cf\\u8ff0\",\"shareImage\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/tmp\\/20210707\\/10\\/20210707105510041579.png\",\"shareOpen\":true,\"showNum\":0,\"model\":\"9\",\"modelName\":\"vote\",\"isComment\":0,\"pulishDate\":1625587200,\"slidePic\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/20210707\\/10\\/20210707105550856930.jpg\",\"listPic\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/20210707\\/10\\/20210707105550856930.jpg\",\"htmlUrl\":\"http:\\/\\/morefun.chinamcloud.com\\/act\\/vote-screen\\/index.html?act_id=b0463ff2-3429-4a7c-9aad-bc1bddc3bf81&group_id=59b8833e28c267350c8c0fa5d890c4a4\",\"wechatUrl\":\"\",\"startTime\":1625587200,\"endTime\":1632499200,\"contentSummary\":\"\",\"tag\":2}],\"returnCode\":100,\"number\":10,\"currentPage\":1,\"totalPage\":0,\"total\":0,\"com_id\":1,\"serverTime\":1631780097,\"returnDesc\":\"\\u6210\\u529f\"}"
}




2、想将 result 字段的值进行 JSON 格式化。打开网址：https://www.bejson.com/ 。复制内容至在线工具中，然后点击 去除转义。如图2

图2
去除转义前：


{\"contentList\":[{\"id\":\"4228588d-06ba-4587-b234-28414db8f860\",\"title\":\"\\u522e\\u522e\\u522e\",\"shortTitle\":\"\",\"shareTitle\":\"\",\"summary\":\"\",\"shareImage\":\"\",\"shareOpen\":false,\"showNum\":0,\"model\":\"9\",\"modelName\":\"scratch\",\"isComment\":0,\"pulishDate\":1625673600,\"slidePic\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/\",\"listPic\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/\",\"htmlUrl\":\"http:\\/\\/morefun.chinamcloud.com\\/act\\/scratch\\/index.html?act_id=4228588d-06ba-4587-b234-28414db8f860&group_id=59b8833e28c267350c8c0fa5d890c4a4\",\"wechatUrl\":\"\",\"startTime\":1625673600,\"endTime\":1637769600,\"contentSummary\":\"\",\"tag\":2},{\"id\":\"649b79cb-fd65-4d4f-8b6c-349131f8a5ff\",\"title\":\"\\u7b2c\\u4e8c\\u4e2a\\u6d3b\\u52a8\",\"shortTitle\":\"\",\"shareTitle\":\"aaaa\",\"summary\":\"aa\",\"shareImage\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/tmp\\/20210708\\/09\\/20210708094246136048.png\",\"shareOpen\":true,\"showNum\":0,\"model\":\"9\",\"modelName\":\"vote\",\"isComment\":0,\"pulishDate\":1625673600,\"slidePic\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/20210708\\/09\\/20210708094307567894.png\",\"listPic\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/20210708\\/09\\/20210708094307567894.png\",\"htmlUrl\":\"http:\\/\\/morefun.chinamcloud.com\\/act\\/custom-built-vote-screen\\/index.html?act_id=649b79cb-fd65-4d4f-8b6c-349131f8a5ff&group_id=59b8833e28c267350c8c0fa5d890c4a4\",\"wechatUrl\":\"\",\"startTime\":1625673600,\"endTime\":1628092800,\"contentSummary\":\"\",\"tag\":2},{\"id\":\"b0463ff2-3429-4a7c-9aad-bc1bddc3bf81\",\"title\":\"\\u7b2c\\u4e00\\u4e2a\\u6d3b\\u52a8\",\"shortTitle\":\"\",\"shareTitle\":\"\\u6ca1\\u6709\\u63cf\\u8ff0\\u624d\\u662f\\u771f\\u6b63\\u7684\\u63cf\\u8ff0\",\"summary\":\"\\u6ca1\\u6709\\u63cf\\u8ff0\\u624d\\u662f\\u771f\\u6b63\\u7684\\u63cf\\u8ff0\",\"shareImage\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/tmp\\/20210707\\/10\\/20210707105510041579.png\",\"shareOpen\":true,\"showNum\":0,\"model\":\"9\",\"modelName\":\"vote\",\"isComment\":0,\"pulishDate\":1625587200,\"slidePic\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/20210707\\/10\\/20210707105550856930.jpg\",\"listPic\":\"https:\\/\\/morefan.oss-cn-beijing.aliyuncs.com\\/20210707\\/10\\/20210707105550856930.jpg\",\"htmlUrl\":\"http:\\/\\/morefun.chinamcloud.com\\/act\\/vote-screen\\/index.html?act_id=b0463ff2-3429-4a7c-9aad-bc1bddc3bf81&group_id=59b8833e28c267350c8c0fa5d890c4a4\",\"wechatUrl\":\"\",\"startTime\":1625587200,\"endTime\":1632499200,\"contentSummary\":\"\",\"tag\":2}],\"returnCode\":100,\"number\":10,\"currentPage\":1,\"totalPage\":0,\"total\":0,\"com_id\":1,\"serverTime\":1631780097,\"returnDesc\":\"\\u6210\\u529f\"}




去除转义后：


{"contentList":[{"id":"4228588d-06ba-4587-b234-28414db8f860","title":"\u522e\u522e\u522e","shortTitle":"","shareTitle":"","summary":"","shareImage":"","shareOpen":false,"showNum":0,"model":"9","modelName":"scratch","isComment":0,"pulishDate":1625673600,"slidePic":"https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/","listPic":"https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/","htmlUrl":"http:\/\/morefun.chinamcloud.com\/act\/scratch\/index.html?act_id=4228588d-06ba-4587-b234-28414db8f860&group_id=59b8833e28c267350c8c0fa5d890c4a4","wechatUrl":"","startTime":1625673600,"endTime":1637769600,"contentSummary":"","tag":2},{"id":"649b79cb-fd65-4d4f-8b6c-349131f8a5ff","title":"\u7b2c\u4e8c\u4e2a\u6d3b\u52a8","shortTitle":"","shareTitle":"aaaa","summary":"aa","shareImage":"https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/tmp\/20210708\/09\/20210708094246136048.png","shareOpen":true,"showNum":0,"model":"9","modelName":"vote","isComment":0,"pulishDate":1625673600,"slidePic":"https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/20210708\/09\/20210708094307567894.png","listPic":"https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/20210708\/09\/20210708094307567894.png","htmlUrl":"http:\/\/morefun.chinamcloud.com\/act\/custom-built-vote-screen\/index.html?act_id=649b79cb-fd65-4d4f-8b6c-349131f8a5ff&group_id=59b8833e28c267350c8c0fa5d890c4a4","wechatUrl":"","startTime":1625673600,"endTime":1628092800,"contentSummary":"","tag":2},{"id":"b0463ff2-3429-4a7c-9aad-bc1bddc3bf81","title":"\u7b2c\u4e00\u4e2a\u6d3b\u52a8","shortTitle":"","shareTitle":"\u6ca1\u6709\u63cf\u8ff0\u624d\u662f\u771f\u6b63\u7684\u63cf\u8ff0","summary":"\u6ca1\u6709\u63cf\u8ff0\u624d\u662f\u771f\u6b63\u7684\u63cf\u8ff0","shareImage":"https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/tmp\/20210707\/10\/20210707105510041579.png","shareOpen":true,"showNum":0,"model":"9","modelName":"vote","isComment":0,"pulishDate":1625587200,"slidePic":"https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/20210707\/10\/20210707105550856930.jpg","listPic":"https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/20210707\/10\/20210707105550856930.jpg","htmlUrl":"http:\/\/morefun.chinamcloud.com\/act\/vote-screen\/index.html?act_id=b0463ff2-3429-4a7c-9aad-bc1bddc3bf81&group_id=59b8833e28c267350c8c0fa5d890c4a4","wechatUrl":"","startTime":1625587200,"endTime":1632499200,"contentSummary":"","tag":2}],"returnCode":100,"number":10,"currentPage":1,"totalPage":0,"total":0,"com_id":1,"serverTime":1631780097,"returnDesc":"\u6210\u529f"}




3、去除转义后，点击 格式化校验，得到查看友好的 JSON 内容。如图3

图3


{
	"contentList": [{
		"id": "4228588d-06ba-4587-b234-28414db8f860",
		"title": "\u522e\u522e\u522e",
		"shortTitle": "",
		"shareTitle": "",
		"summary": "",
		"shareImage": "",
		"shareOpen": false,
		"showNum": 0,
		"model": "9",
		"modelName": "scratch",
		"isComment": 0,
		"pulishDate": 1625673600,
		"slidePic": "https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/",
		"listPic": "https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/",
		"htmlUrl": "http:\/\/morefun.chinamcloud.com\/act\/scratch\/index.html?act_id=4228588d-06ba-4587-b234-28414db8f860&group_id=59b8833e28c267350c8c0fa5d890c4a4",
		"wechatUrl": "",
		"startTime": 1625673600,
		"endTime": 1637769600,
		"contentSummary": "",
		"tag": 2
	}, {
		"id": "649b79cb-fd65-4d4f-8b6c-349131f8a5ff",
		"title": "\u7b2c\u4e8c\u4e2a\u6d3b\u52a8",
		"shortTitle": "",
		"shareTitle": "aaaa",
		"summary": "aa",
		"shareImage": "https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/tmp\/20210708\/09\/20210708094246136048.png",
		"shareOpen": true,
		"showNum": 0,
		"model": "9",
		"modelName": "vote",
		"isComment": 0,
		"pulishDate": 1625673600,
		"slidePic": "https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/20210708\/09\/20210708094307567894.png",
		"listPic": "https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/20210708\/09\/20210708094307567894.png",
		"htmlUrl": "http:\/\/morefun.chinamcloud.com\/act\/custom-built-vote-screen\/index.html?act_id=649b79cb-fd65-4d4f-8b6c-349131f8a5ff&group_id=59b8833e28c267350c8c0fa5d890c4a4",
		"wechatUrl": "",
		"startTime": 1625673600,
		"endTime": 1628092800,
		"contentSummary": "",
		"tag": 2
	}, {
		"id": "b0463ff2-3429-4a7c-9aad-bc1bddc3bf81",
		"title": "\u7b2c\u4e00\u4e2a\u6d3b\u52a8",
		"shortTitle": "",
		"shareTitle": "\u6ca1\u6709\u63cf\u8ff0\u624d\u662f\u771f\u6b63\u7684\u63cf\u8ff0",
		"summary": "\u6ca1\u6709\u63cf\u8ff0\u624d\u662f\u771f\u6b63\u7684\u63cf\u8ff0",
		"shareImage": "https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/tmp\/20210707\/10\/20210707105510041579.png",
		"shareOpen": true,
		"showNum": 0,
		"model": "9",
		"modelName": "vote",
		"isComment": 0,
		"pulishDate": 1625587200,
		"slidePic": "https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/20210707\/10\/20210707105550856930.jpg",
		"listPic": "https:\/\/morefan.oss-cn-beijing.aliyuncs.com\/20210707\/10\/20210707105550856930.jpg",
		"htmlUrl": "http:\/\/morefun.chinamcloud.com\/act\/vote-screen\/index.html?act_id=b0463ff2-3429-4a7c-9aad-bc1bddc3bf81&group_id=59b8833e28c267350c8c0fa5d890c4a4",
		"wechatUrl": "",
		"startTime": 1625587200,
		"endTime": 1632499200,
		"contentSummary": "",
		"tag": 2
	}],
	"returnCode": 100,
	"number": 10,
	"currentPage": 1,
	"totalPage": 0,
	"total": 0,
	"com_id": 1,
	"serverTime": 1631780097,
	"returnDesc": "\u6210\u529f"
}