image.png 修改文件都是用的同级覆盖方式,没有修改themes里面的文件 上面图片占用的面积太大了,需要调整一下放在右侧 修改文件layouts => _default => list.html 定位到关键代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
  <article class="{{ $class }}">
    {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}
    {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}
    <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) }}
    <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>
  </article>

修改页面dom结构

 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
  <article class="{{ $class }} list-container">
    <div>
      <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) }}
      <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>
    <div>
      {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}
      {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}
    </div>
  </article>

在blank.css中添加

1
2
3
4
5
6
7
8
9
.list-container{
  display: flex;
  align-items: center;

}

.list-container > div:nth-child(1){
  min-width: 60%;
}

完成! image.png