Middleman静态站YAML文件多行文本换行失效问题求助

Hey there! I totally get the frustration—you set up your YAML with the | block scalar to preserve line breaks, but when it renders in your Middleman site, it's all one big chunk of text. Let's break down why this happens and how to fix it.

The Root Cause #

Your YAML is actually working correctly! The | symbol does preserve the line breaks in the data. The problem is that HTML ignores line breaks by default—it treats newlines as regular whitespace, so your browser collapses everything into a single paragraph.

Solutions to Try #

1. Use Middleman's simple_format Helper

Middleman includes Rails view helpers, and simple_format is perfect for this. It converts line breaks into <br> tags and wraps blocks of text in <p> tags automatically.

In your ERB template, instead of rendering the text directly:

<%= data.your_file.day_1 %>

Use:

<%= simple_format(data.your_file.day_1) %>

This will respect the line breaks you set in your YAML and render them properly in the browser.

2. Manually Replace Newlines with <br> Tags

If you want more control, you can use Ruby's gsub method to swap out newlines for HTML line break tags:

<%= data.your_file.day_1.gsub("\n", "<br>") %>

Note: This will replace every single newline with a <br>, so if you have blank lines between paragraphs, you'll get double line breaks. Adjust as needed for your content.

3. Use CSS to Preserve Line Breaks

If you prefer not to modify the HTML output, you can use CSS to tell the browser to respect line breaks. Add this style to your site's CSS:

.trip-content {
  white-space: pre-line;
}

Then wrap your rendered text in an element with that class:

<div class="trip-content"><%= data.your_file.day_1 %></div>

pre-line will preserve line breaks but collapse multiple spaces into one, which is usually the most natural-looking result for body text.

Quick Check #

Just to confirm your YAML is correct, here's how your block should look (you already have this right, but it's good to double-check):

day_1: |
  Marrakech-tizi n’tichka-teloute kasbah-ait ben haddou kasbah-ourazazate-agdz
  We will collect you from your Marrakech accommadation (Riad or hotel) at 9 am with a private and air-conditioned transportation then start your desert tour by heading towards the high atlas and crossing Tizi n’tichka Pass 2260m. We follow the one thousand kasbahs road via ounila valley till arriving to the Kasbah of teloute, an ancient gathering of old trading caravans coming from the large sahara desert. Afterwards we visit The earthen Kasbah Of Ait ben Haddou classified as UNSECO world Heritage Site and a backdrop of films location as well. We take a break to have lunch in Ait ben Haddou Site, we continue our journey crossing the Mountains of Anti-atlas and Ourazazate site Or the Hollywood of Africa. Arriving to Agdz, which is a small town located among palmtree groves, you spend the overnight in one of well-selected accommadation with evening and morning meals included.

The indentation under day_1: is consistent, and the | is properly placed—so your YAML isn't the issue here.

内容的提问来源于stack exchange，提问作者Antoine Quellier