Hugo博客文章封面图片缩小并移到侧边 | PaperMod主题

素履coder

发布于 2022-03-31 17:01:40

5830

发布于 2022-03-31 17:01:40

文章被收录于专栏：素履coder

1. 添加class标识

定位到目录 layouts/_default/list.html，添加一个class标识，命名为post-info，把entry-header和entry-content和entry-footer都包裹进去，如下代码

<div class="post-info">  <!--新添加的行-->
    <header class="entry-header">
        <h2>
            {{- .Title }}
            {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
        </h2>
    </header>
    {{- if (ne (.Param "hideSummary") true) }}
    <section class="entry-content">
        <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
    </section>
    {{- end }}
    {{- if not (.Param "hideMeta") }}
    <footer class="entry-footer">
        {{- partial "post_meta.html" . -}}
    </footer>
    {{- end }}
</div>  <!--新添加的行-->

<!--
下面这两行本来是在<article class="{{ $class }}">和<header class="entry-header">之间的，
但是我喜欢把图片展示在右边，所以把这两行代码移了下来
-->
{{- $isHidden := (.Site.Params.cover.hidden | default .Site.Params.cover.hiddenInList) }}
{{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}

2. 修改css

定位到目录 assets/extended/blank.css，添加如下代码

.post-entry {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.entry-cover {
    overflow: hidden;
    padding-left: 18px;
    height: 100%;
    width: 50%;
    margin-bottom: unset;
}

.post-info {
    display: inline-block;
    overflow: hidden;
    width: 90%;
}

3. 解决冲突

为什么会说有冲突呢，因为上面对文章封面图片进行了调整，会影响到文章里面顶部的图片展示，所以我给出的解决方案是：

① 定位到目录 layouts/partials/cover.html，在相同目录下创建一个名字为cover1.html的文件，并把cover.html里的文件复制一份一样的到cover1.html下，
② 把cover1.html文件里的<figure class="entry-cover">修改为<figure class="entry-cover1">
③ 定位到 layouts/_default/single.html，把{{- partial "cover.html" (dict "cxt" . "IsHome" false "isHidden"

这样文章封面调用的是经过修改的图片，而文章里面顶部的图片调用的是未经修改的图片