Hugo问题：如何将{{ .Content }}与前置链接置于同一行

Got it, let's work through this problem. You want that [i] link to sit right next to the start of {{ .Content }} on the same line, but you need to keep all the line breaks inside {{ .Content }} intact—since Playnify strips those out entirely, it's not a viable option. Here are three reliable approaches tailored to this scenario:

1. CSS Flexbox (Best for HTML Content) #

This is the most straightforward method if {{ .Content }} includes HTML elements like <p> or <br>. We'll use a flex container to align the [i] link and content on the same line, without modifying the content's internal structure:

First, add this CSS:

.content-container {
  display: flex;
  align-items: flex-start; /* Aligns the [i] with the top of your content */
  gap: 0.5rem; /* Adds a small space between [i] and content */
}

Then structure your template like this:

<div class="content-container">
  <a href="" class="content-icon">[i]</a>
  {{ .Content }}
</div>

The flex container ensures the [i] stays on the same line as the first element of {{ .Content }}, while all line breaks or block elements inside your content remain exactly as they are.

2. Inline-Block for Simple Text/Inline Content #

If {{ .Content }} is mostly inline text or spans, you can just style the [i] link as inline-block to avoid forcing a line break:

CSS:

.content-icon {
  display: inline-block;
  margin-right: 0.5rem;
}

Template:

<a href="" class="content-icon">[i]</a>
{{ .Content }}

This works because inline-block elements don't break the flow of surrounding inline content, so the [i] will sit right next to the start of your content, and any line breaks in {{ .Content }} (like <br> tags or newline characters rendered as breaks) will still show up as intended.

3. Template-Level Line Manipulation (For Plain Text Content) #

If {{ .Content }} is plain text with raw newline characters, you can split the content into lines, attach the [i] to the first line, and rejoin the rest while preserving breaks. Using Go template syntax (matching your {{ .Content }} usage), it would look like this:

{{/* Split content into individual lines */}}
{{ $lines := split .Content "\n" }}
{{/* Attach [i] to the first line */}}
<a href="">[i]</a>{{ index $lines 0 }}
{{/* Print remaining lines with line breaks */}}
{{ range after 1 $lines }}
  <br>{{ . }}
{{ end }}

This method gives you precise control over the first line, ensuring it stays paired with the [i], while every subsequent line is rendered with a break to match the original content's structure.

Key Notes #

• The core issue with Playnify is that it modifies the content itself—our solutions focus on layout adjustments instead, so your content's line breaks stay completely untouched.
• If your {{ .Content }} includes block-level HTML elements (like <p>), stick with the flexbox method—it won't disrupt the existing HTML structure at all.

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