Foundation for Emails 2：如何在邮件内联后插入自定义代码？

Great question! I've run into this exact issue before—inline styling tools like Juice can wreak havoc on custom code snippets that don't need to be touched by the inlining process. Let's walk through a few solid solutions, from Panini-based approaches to Node/Gulp task tweaks, plus the optimal path for most cases:

一、直接修改Gulp任务（最简洁的全局插入方案） #

Foundation for Emails 2 uses Gulp under the hood, so we can tweak the build pipeline to insert your code after the inline styling step. Here's how:

1. Install the necessary dependency
   We'll use gulp-replace to inject our code into the final rendered HTML. Run this in your project root:

   npm install gulp-replace --save-dev
   

2. Update your Gulpfile.js
   Locate the task that handles email compilation (usually named pages or email). Look for the juice() step—this is where the inline styling happens. Add the replace() step right after it:

   const replace = require('gulp-replace');
   
   // ... existing task code ...
   .pipe(juice({
     preserveMediaQueries: true,
     removeStyleTags: true
   }))
   // Inject your custom code right before the closing </body> tag
   .pipe(replace('</body>', `
     <script type="text/javascript">
       // Your custom code here—this won't be touched by inlining!
       function trackEmailOpen() {
         // Example tracking logic
       }
     </script>
   </body>`))
   .pipe(gulp.dest('dist'))
   

   This works because we're modifying the HTML after Juice has finished inlining styles. Your code stays intact, no matter what the inliner does.

二、Panini + Gulp（灵活的个性化插入） #

If you need to insert different code snippets for specific emails, you can combine Panini's templating system with a Gulp replacement step:

1. Add a placeholder to your Panini layout
   Open your main layout file (usually src/layouts/default.html) and add a unique placeholder right before </body>:

   <!--POST_INLINE_CUSTOM_CODE-->
   

   You can also use Panini's global data to define this placeholder for consistency—just add it to src/data/global.json:

   {
     "post_inline_placeholder": "<!--POST_INLINE_CUSTOM_CODE-->"
   }
   

   Then reference it in your layout: {{post_inline_placeholder}}

2. Replace the placeholder in Gulp
   Use the same gulp-replace setup from the first solution, but target the placeholder instead of </body>. For global code, it's identical to the first method. For per-email code, you can use Panini's page-specific data to set unique placeholders, then map them to different code snippets in Gulp.

三、Juice Exclude Selectors（保护现有代码） #

If you already have code in your templates that's getting broken by inlining, you can tell Juice to leave it alone using the excludeSelectors option:

1. Wrap your code in a tagged container
   Add a unique class to the element holding your code:

   <div class="skip-inline">
     <script>/* Your fragile code here */</script>
   </div>
   

2. Update Juice's configuration
   Modify the juice() call in your Gulpfile to exclude this selector:

   .pipe(juice({
     preserveMediaQueries: true,
     removeStyleTags: true,
     excludeSelectors: ['.skip-inline']
   }))
   

   Juice will skip processing any elements matching this class, so your code stays untouched.

Optimal Recommendation #

• For global, uniform code insertion (like tracking scripts), go with Solution 1—it's the simplest and requires zero template changes.
• For per-email custom code, use Solution 2 to leverage Panini's data system for flexibility.
• For protecting existing code snippets in your templates, Solution 3 is the quickest fix.

I've used Solution 1 extensively for adding email tracking pixels and scripts, and it's never failed to keep the code intact post-inlining.

内容的提问来源于stack exchange，提问作者Stephen Jeffrey