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
+        .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
     
     .article-container
-        h1.article-title= (page.title === undefined || page.title === '') ? 'NO TITLE' : page.title
+      .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}
+            br
+            span.stat-info.
+              总字数 #{word_count}， 阅读时长 约#{read_cost}分钟， 阅读量 100
+            br
+            span.big publish by 
+            span.author #{author}
+
       hr
+      .main-content
         != page.content
-
-    .side-information
-      +information_card({name: '全站总字数', value: totalcount(site)})

layout/post.pug

@@ -3,29 +3,33 @@ include includes/_partials/information_card.pug
 
 block content
   .markdown-container
-    .content
     include includes/_partials/left_declaration.pug
+    
     .article-container
       .article-header
-          h1.article-title= page.title
+        - const has_cover = (page.cover !== undefined && page.cover !== null && page.cover != '')
-          hr
+        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
+      .main-content
         != page.content
-
-    .side-information
-      +information_card({name: '全站总字数', value: totalcount(site)})

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;
-    flex-direction: row;
-    gap: 12px
   .article-container
     background-color: rgb(231, 225, 199)
     height: fit-content
-      padding: 4px 64px
+    padding: 1em 40px
     display: flex
     flex-direction: column
-      gap: 16px
     width: 100%
-      // overflow-y: scroll
     overflow-x: hidden
     justify-content: space-between
     font-size: 18px
-  .side-information
+
-    width: 24%
+  .article-header
-    position: sticky
+    display: flex
-    top: 16px
+    flex-direction: row
-    align-self: flex-start
+    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: 1em
+      width: 100%
+      .h-line
+        margin-left: -2%
+      .article-title
+        font-size: 2.3em
+        font-weight: bold
       .info-box
-    margin-left: -1.6em
         line-height: 1.6em
+        font-family: 'Consolas'
         .time-info, .stat-info
           font-size: 14px
-    .big
+        .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

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/*'