.

layout/includes/_partials/post_list/post_item.pug

@@ -0,0 +1,16 @@
+mixin post_item(title, cover_url, post_date, post_summary, post_time, link)
+  .post-item
+    - const hasCover = cover_url !== undefined
+    img.post-cover.lazy(
+      src=hasCover ? cover_url : "/img/no_image.svg"
+      class=hasCover ? '' : 'no-cover'
+    )
+    .post-info
+      .post-title-box
+        .left
+          .icon
+          span.title-text= title
+        span.post-date= post_date
+      .post-summary-box
+        span.post-summary= post_summary
+        span.post-time= 'Time: ' + post_time

source/css/_partials/post_list/post_item.styl

@@ -0,0 +1,77 @@
+.post-item
+  & > *
+    user-select: none
+  display: flex
+  flex-direction: row
+  gap: 16px
+  height: fit-content
+  transition: all 0.2s linear 0s
+  padding: 8px 8px
+  margin: 4px 4px
+  min-height: 128px;
+  &:hover
+    background-color: $light
+    .no-cover
+      filter: invert(100%)
+      background-color: rgb(181, 184, 193)
+    .post-cover:not(.no-cover)
+      filter: opacity(0.7)
+    .post-title-box
+      background-color: rgb(74, 71, 62)
+      color: $light;
+      .left .icon
+        background-color: $light
+
+  .post-info
+    display: flex
+    flex-direction: column
+    width:100%
+
+  .post-title-box
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    gap: 8px
+    padding: 3px 6px
+    color: rgb(74, 71, 62)
+    background-color: rgb(180, 175, 154)
+    transition: all 0.2s linear 0s
+    cursor: default
+    font-size: 18px
+    font-weight: bold
+    min-height: 1.3em
+
+    .left
+      display: flex
+      flex-direction: row
+      justify-content: left
+      gap: 8px
+      align-items: center
+      .icon
+        width: 16px
+        height: 16px
+        min-width: 16px
+        min-height: 16px
+        background-color: rgb(74, 71, 62)
+        transition: all 0.2s linear 0s
+
+  .post-cover
+    width: 256px
+    height 144px
+    min-width: 256px
+    min-height 144px
+    max-width: 256px
+    max-height 144px
+    object-fit: scale-down
+    transition: all 0.2s linear 0s
+
+  .post-summary-box
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    padding: 2px 6px
+    .post-summary
+      max-width: 80%
+    .post-summary, .post-time
+      color: $dark
+      font-size: 16px

source/img/no_image.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="256mm"
+   height="144mm"
+   viewBox="0 0 256 144"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
+   sodipodi:docname="no_image.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.74564394"
+     inkscape:cx="562.60097"
+     inkscape:cy="337.96292"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <linearGradient
+       id="linearGradient931"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop929" />
+    </linearGradient>
+  </defs>
+  <g
+     inkscape:label="图层 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:2.022;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;opacity:0.5"
+       id="rect111"
+       width="253.97806"
+       height="141.97804"
+       x="1.0109739"
+       y="1.0109739" />
+    <path
+       style="opacity:0.5;fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:2.04771;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="M 254.89616,0.89401565 0.49901404,142.89125"
+       id="path4014" />
+    <path
+       style="opacity:0.5;fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:1.99762;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="M 0.48750591,0.8717565 112.5778,63.555181"
+       id="path7722" />
+    <path
+       style="opacity:0.5;fill:#ffffff;fill-opacity:0;stroke:#000000;stroke-width:2.01587;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+       d="M 142.22553,79.979049 255.49906,143.12286"
+       id="path7722-8" />
+  </g>
+</svg>