Featured image of post Wie man Bildgröße und -platzierung im Hugo PaperMod-Theme mit CSS anpasst

Wie man Bildgröße und -platzierung im Hugo PaperMod-Theme mit CSS anpasst

Erklärt, wie man Bildgröße und -platzierung in Artikeln des Hugo PaperMod-Themes anpasst. Stellt konkrete Bearbeitungsschritte für CSS (blank.css und post-entry.css) vor, um von der standardmäßigen 100%-Breite und Zentrierung zu Textumfluss und Bildverkleinerung zu wechseln.

Das Standardlayout zentriert das Bild mit einer Breite von 100 %, aber da es mir manchmal etwas zu groß vorkam, habe ich versucht, das Bild unter dem Titel umfließen zu lassen, und die Breite auf etwa 150px geändert.

Die Änderungen an den Dateien sind wie folgt.

blank.css

Um Ränder, Bildgröße und Textanzeigezeilen zu ändern, fügen Sie die folgende Beschreibung in blank.css hinzu.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.entry-content {
    -webkit-line-clamp: 4;
}

.entry-footer {
	text-align: right;
}

.entry-cover {
    margin-bottom: initial;
    text-align: center;
}

.entry-cover img {
    border-radius: 4px;
    display: inline;
    max-width: 100%;
}

.post-meta {
    display: block;
    text-align: right;
}

post-entry.css

Da ich die Definition in blank.css nicht löschen konnte, habe ich 1 Zeile an der folgenden Stelle in post-entry.css gelöscht.

1
2
3
4
5
6
.entry-cover img {
    border-radius: var(--radius);
    pointer-events: none;
    /* width: 100%; */  Diese Zeile löschen
    height: auto;
}

list.html

Um das Bildlayout zu ändern, habe ich die folgende Stelle in list.html geändert.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<article class="{{ $class }}">
  <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- Nach unten verschoben -->
  <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- Nach unten verschoben -->
  <header class="entry-header">
    <h2>
      {{- .Title }}
      {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
    </h2>
  </header>
  <div style="display:flex;"><!-- Hinzugefügt -->
    <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- Hinzugefügt -->
      {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- Von oben verschoben -->
      {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- Von oben verschoben -->
    </div><!-- Hinzugefügt -->
    <div style="width:100%;"><!-- Hinzugefügt -->
      {{- if (ne (.Param "hideSummary") true) }}
      <div class="entry-content">
        <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
      </div>
      {{- end }}
      {{- if not (.Param "hideMeta") }}
      <footer class="entry-footer">
        {{- partial "post_meta.html" . -}}
      </footer>
      {{- end }}
      <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
    </div><!-- Hinzugefügt -->
  </div><!-- Hinzugefügt -->
</article>

Es scheint, dass es nicht wenige ähnliche Anfragen gibt.

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

Es wäre toll, wenn die offiziellen Entwickler dies ebenfalls unterstützen könnten.

comments powered by Disqus
Erstellt mit Hugo
Theme Stack gestaltet von Jimmy