asdfasdf

layout/includes/layout.pug

@@ -7,6 +7,8 @@
 - if (is_year()) pageTitle += ': ' + page.year
 - pageTitle += ' [ ' + config.title + ' ]'
 
+include _partials/information_card.pug
+
 doctype html
 html(lang=config.language)
   head
@@ -28,8 +30,9 @@ html(lang=config.language)
           .bottom-declaration-dotted
 
       main#main.main
-        #content.content 
+        block content
-          block content
+        .right-content
+          +information_card({name: '全站总字数', value: totalcount(site)})
 
       footer#footer.footer
         include ./_partials/footer.pug 

layout/index.pug

@@ -1,10 +1,6 @@
 extends includes/layout.pug
-include includes/_partials/information_card.pug
 
 block content
   .index-content
-    .left-content
       include includes/_partials/left_declaration.pug
       include includes/_partials/post_list/post_list.pug
-    .right-content
-      +information_card({name: '全站总字数', value: totalcount(site)})

layout/page.pug

@@ -3,13 +3,33 @@ include includes/_partials/information_card.pug
 
 block content
   .markdown-container
-    .content
+    include includes/_partials/left_declaration.pug
-      include includes/_partials/left_declaration.pug
     
-      .article-container
+    .article-container
-        h1.article-title= (page.title === undefined || page.title === '') ? 'NO TITLE' : page.title
+      .article-header
-        hr
+        - const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '')
-        != page.content      
+        img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
+
+        .v-line
 
-    .side-information
+        .article-info
-      +information_card({name: '全站总字数', value: totalcount(site)})
+          span.article-title= page.title
+          - const publishTime = moment(page.date).format("YYYY-MM-DD HH:mm:SS");
+          - const updateTime = moment(page.updated).format("YYYY-MM-DD HH:mm:SS");
+          - const word_count = wordcount(page.content);
+          - const read_cost = min2read(page.content);
+          - const author = page.author === undefined ? config.author : page.author;
+          .h-line
+          .info-box
+            span.time-info.
+              发表于 #{publishTime}，更新于 #{updateTime}
+            br
+            span.stat-info.
+              总字数 #{word_count}， 阅读时长 约#{read_cost}分钟， 阅读量 100
+            br
+            span.big publish by 
+            span.author #{author}
+
+      hr
+      .main-content
+        != page.content

layout/post.pug

@@ -3,29 +3,33 @@ include includes/_partials/information_card.pug
 
 block content
   .markdown-container
-    .content
+    include includes/_partials/left_declaration.pug
-      include includes/_partials/left_declaration.pug
-      .article-container
-        .article-header
-          h1.article-title= page.title
-          hr
     
+    .article-container
+      .article-header
+        - const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '')
+        img.post-cover(src=has_cover ? page.cover : "/img/no_image.svg")
+
+        .v-line
+
+        .article-info
+          span.article-title= page.title
           - const publishTime = moment(page.date).format("YYYY-MM-DD HH:mm:SS");
           - const updateTime = moment(page.updated).format("YYYY-MM-DD HH:mm:SS");
           - const word_count = wordcount(page.content);
           - const read_cost = min2read(page.content);
           - const author = page.author === undefined ? config.author : page.author;
+          .h-line
           .info-box
             span.time-info.
-              发表于 #{publishTime}，  更新于 #{updateTime}
+              发表于 #{publishTime}，更新于 #{updateTime}
             br
             span.stat-info.
               总字数 #{word_count}， 阅读时长 约#{read_cost}分钟， 阅读量 100
             br
             span.big publish by 
             span.author #{author}
-          hr
-          != page.content      
 
-    .side-information
+      hr
-      +information_card({name: '全站总字数', value: totalcount(site)})
+      .main-content
+        != page.content

source/css/_partials/data_row.styl

@@ -1,6 +1,7 @@
 .data-row
   display: flex
   flex-direction: row
+  gap: 10px
   .data-value a
     text-decoration: none
     color: rgb(74, 71, 62)

source/css/_partials/footer/footer.styl

@@ -7,15 +7,13 @@
   width: 100%
   background-color: rgba(231, 225, 199, 0.75)
   color: rgb(74, 71, 62)
+
   .footer-info
     padding: 8px 0
     display: flex
     flex-direction: row
     gap: 24px
     justify-content: left
-    .v-line
-      margin-top: 2px
-      margin-bottom: 2px
     a
       text-decoration: none
       color: rgb(74, 71, 62)

source/css/_partials/index.styl

@@ -1,10 +1,5 @@
 .index-content
-  display: flex
+    width: 98%;
-  flex-direction: row
-  justify-content: space-between
-  gap: 16px
-  .left-content
-    width: 73%;
     display: flex;
     flex-direction: row;
     gap: 12px
@@ -19,9 +14,3 @@
       // overflow-y: scroll
       overflow-x: hidden
       justify-content: space-between
-      
-  .right-content
-    width: 24%
-    position: sticky
-    top: 16px
-    align-self: flex-start

source/css/_partials/information_card.styl

@@ -2,6 +2,7 @@
   display: flex
   flex-direction: column
   gap: 2px
+  overflow: hidden
   // filter: drop-shadow(0.8px 0.8px 0.8px);
   .avatar-box
     display: flex

source/css/_partials/post_page/markdown_content.styl

@@ -1,16 +1,13 @@
-.article-container
+.main-content
   word-wrap: break-word
   overflow-wrap: break-word
   color: #4a473e
   
+  h1
+    margin-block-start: 0.4em
+    font-size: 2.25em
   h1, h2, h3, h4, h5, h6
     color: black
-    margin-left: -0.6em
-
-  hr
-    border: 1.3px solid rgba(0,0,0,0.16)
-    width: 108%
-    margin-left: -4%
 
   figure
     margin: 0
@@ -87,6 +84,7 @@
     margin: 0
 
   ol, ul
+    // 二级列表
     ol, ul
       padding-left: 20px
     li
@@ -95,6 +93,8 @@
     p
       margin: 4px 0 4px
       line-height: 1.5em
+    figure
+      line-height: normal
 
   > :last-child
     margin-bottom: 0 !important

source/css/_partials/post_page/post_page.styl

@@ -5,37 +5,67 @@
   flex-direction: row
   justify-content: space-between
   gap: 16px
-  .article-title
+  flex: 1
-    font-size: 3em
+  overflow: auto
-  .content
+  width: 97%
-    width: 73%;
+  
-    display: flex;
+  .article-container
-    flex-direction: row;
+    background-color: rgb(231, 225, 199)
-    gap: 12px
+    height: fit-content
-    .article-container
+    padding: 1em 40px
-      background-color: rgb(231, 225, 199)
+    display: flex
-      height: fit-content
+    flex-direction: column
-      padding: 4px 64px
+    width: 100%
+    overflow-x: hidden
+    justify-content: space-between
+    font-size: 18px
+
+  .article-header
+    display: flex
+    flex-direction: row
+    margin: 1em 0 1em
+    gap: 2em
+
+    $post-width = 384px
+    $post-heigth = 216px
+    img.post-cover
+      width: $post-width
+      height $post-heigth
+      min-width: $post-width
+      min-height $post-heigth
+      max-width: $post-width
+      max-height $post-heigth
+      object-fit: cover
+      transition: all 0.2s linear 0s
+
+    .article-info
       display: flex
       flex-direction: column
-      gap: 16px
+      gap: 1em
       width: 100%
-      // overflow-y: scroll
+      .h-line
-      overflow-x: hidden
+        margin-left: -2%
-      justify-content: space-between
+      .article-title
-      font-size: 18px
+        font-size: 2.3em
+        font-weight: bold
+      .info-box
+        line-height: 1.6em
+        font-family: 'Consolas'
+        .time-info, .stat-info
+          font-size: 14px
+        .big, bold
+          font-size: 16px
+        .author
+          font-size: 16px
+          font-weight: bold
+
+  hr
+    border: 1.3px solid rgba(0,0,0,0.16)
+    width: 104%
+    margin-left: -2%
+
   .side-information
     width: 24%
     position: sticky
     top: 16px
     align-self: flex-start
-  .info-box
-    margin-left: -1.6em
-    line-height: 1.6em
-    .time-info, .stat-info
-      font-size: 14px
-    .big
-      font-size: 16px
-    .author
-      font-size: 16px
-      font-weight: bold

source/css/common.styl

@@ -3,6 +3,9 @@ $backgroundColor=rgb(197, 194, 165)
 $light=rgb(231, 225, 199)
 $dark=rgb(74, 71, 62)
 
+html, body
+  height: 100%
+
 body
   background-color: rgb(197, 194, 165)
   background-image:
@@ -17,17 +20,32 @@ body > * ::selection
   color: rgb(231, 225, 199)
 
 #container
-  padding: 1.5% 2% 1% 2%
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+  padding: 0 2% 0 2%
   min-height: 100%
-  // position: relative
-
 // footer
 //   position: absolute
 //   bottom: 0
 //   width: 100%
 
+#header
+  margin-top: 1%
 #main
+  flex: 1
   margin: 2em 0
+  display: flex
+  flex-direction: row
+  gap: 4em
+  .right-content
+    width: 24%
+    position: sticky
+    top: 16px
+    align-self: flex-start
+    flex-shrink: 0
+#footer
+  margin-bottom: 1%
 
 span::selection
   background-color: rgb(74, 71, 62)
@@ -74,6 +92,15 @@ img
   width: 1.3px;
   height: auto;
   background: rgba(0, 0, 0, 0.16);
+  margin: 2px
+
+
+.h-line
+  float: left;
+  width: auto;
+  height: 1.3px;
+  background: rgba(0, 0, 0, 0.16);
+  margin: 2px
 
 @import '_partials/header/*'
 @import '_partials/footer/*'