footer

_config.yml

@@ -35,6 +35,11 @@ social:
   Twitter: lensfrex || https://www.twitter.com
   Bilibili: lensfrex || https://bilibili.com
 
+beginTime: "2022·02·23"
+
 lazyload:
   enable: true
-  
+
+icp: 
+  text: 桂ICP备2022001653号
+  link: https://beian.miit.gov.cn/

layout/includes/_partials/data_row.pug

@@ -1,8 +1,8 @@
-mixin data_row(name, value, target_href)
+mixin data_row(data)
   .data-row
-    span.data-name=name
+    span.data-name= data.name
-    if target_href
+    if data.target_link
       span.data-value
-        a(href=target_href target='_balnk')=value
+        a(href=data.target_link target='_balnk')= data.value
     else
-      span.data-value=value
+      span.data-value(id=data.value_id)= data.value

layout/includes/_partials/footer.pug

@@ -0,0 +1,26 @@
+include ./button.pug
+
+#footer-content-base
+  .footer-content
+    include ./left_declaration.pug
+    .footer-info
+      .left
+        span.bold Framework 
+        br
+        a.small(href="https://github.com/hexojs/hexo" target="_blank") Hexo
+        br
+        span.bold Theme
+        br
+        a.small(href="https://github.com/lensferno/hexo-theme-yorha" target="_blank") YoRHa
+        br
+        br
+        a.small.icp(href=theme.icp.link)= theme.icp.text
+      .v-line
+      .right
+        span.bold= 'By ' 
+        a(href='/')= config.author
+        br
+        br
+        span.time= theme.beginTime 
+        span   -  
+        span.time= date(Date.now(), 'YYYY·MM·DD')

layout/includes/_partials/information_card.pug

@@ -14,10 +14,10 @@ mixin information_card(...extendData)
             span.sign= config.description
 
         hr
-        +data_row("文章", site.posts.length)
+        +data_row({name: "文章", value: site.posts.length})
-        +data_row("页面", site.pages.length)
+        +data_row({name: "页面", value: site.pages.length})
-        +data_row("标签", site.tags.length)
+        +data_row({name: "标签", value: site.tags.length})
-        +data_row("分类", site.categories.length)
+        +data_row({name: "分类", value: site.categories.length})
 
         if theme.social
           hr
@@ -25,14 +25,16 @@ mixin information_card(...extendData)
             - const splitValue = value.split('||')
             - const displayValue = splitValue[0]
             - const link = splitValue[1]
-              +data_row(name, displayValue, link)
+              +data_row({name: name, value: displayValue, target_link: link})
 
         hr
         if extendData
           each data in extendData
-            +data_row(data.name, data.value)
+            +data_row({name: data.name, value: data.value})
         
-        +data_row("运行时间", "421天")
+        +data_row({name: "运行时间", value: "432天", value_id: "run_time"})
-
+        script.
+          const runTime = document.getElementById("run_time");
+          
         hr
         span.no-error-declaration NO ERROR

layout/includes/_partials/post_list/paginator.pug

@@ -15,4 +15,17 @@ mixin paginator_button(prev, disabled, link)
       - const is_first = page.prev == 0
       - const is_last = page.next == 0
       +paginator_button(true, is_first, url_for(page.prev_link))
+      input.page-jump-input(
+        type= "text"
+        placeholder= page.current
+        oninput= "this.value=this.value.replace(/\\D/g, '')"
+        onpaste= "this.value=this.value.replace(/\\D/g, '')"
+        onkeypress= `if(event.charCode == 13) jmp(this.value, ${page.total}, '/${config.pagination_dir}/')`
+      )
+      script.
+        function jmp(page, max_page, dir) {
+          if(page >= 0 && page <= max_page) {
+            document.location = (page == '1') ? '/' : dir + page;
+          }
+        }
       +paginator_button(false, is_last, url_for(page.next_link))

layout/includes/layout.pug

@@ -18,24 +18,26 @@ html(lang=config.language)
       each url in theme.stylesheets
         link(rel='stylesheet', href=url)
   body
-    #container.container 
+    #container.container
       header#header.header 
-        .header-box 
+        include ./_partials/header.pug
-          include ./_partials/header.pug
 
       .bottom-declaration
         .bottom-declaration-line
         .bottom-declaration-dotted
 
-      main#main.main 
+      main#main.main
-        .main-box 
+        #content.content 
-          #content.content 
+          block content
-            block content
 
-      footer#footer.footer 
+      footer#footer.footer
-        .footer-box
+        include ./_partials/footer.pug
-          include ./_partials/footer.pug
+          
-    //- 这这段一定要放在body结束前，否则lazyload不生效
+      .bottom-declaration
+        .bottom-declaration-line
+        .bottom-declaration-dotted
+
+    //- 这段script一定要放在body结束前，否则lazyload不生效
     script(src="/js/lazyload.min.js") 
     script.
       window.lazyLoad = new LazyLoad({

source/css/_partials/footer/footer.styl

@@ -0,0 +1,39 @@
+.footer-content  
+  display: flex
+  flex-direction: row
+  gap: 16px
+  height: auto
+  justify-content: left
+  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)
+    a:hover
+      text-decoration: underline
+    span
+      font-size: 16px
+    .bold
+      font-weight: bold
+      font-size: 20px
+    .small
+      font-size: 14px
+    .normal
+      font-size: 16px
+    .medium
+      font-size: 18px
+    .icp
+      margin-top: 8px
+      line-height: 1em
+    .time
+      font-weight: bold

source/css/_partials/footer/left_declaration.styl

@@ -0,0 +1,3 @@
+footer .left-declaration .declaration
+  background-color: rgb(74, 71, 62)
+  

source/css/_partials/header/header.styl

@@ -1,4 +1,4 @@
-.menu-items-container
+header .menu-items-container
   display: flex;
   flex-direction: row;
   gap: 16px;

source/css/_partials/index.styl

@@ -8,11 +8,11 @@
     display: flex;
     flex-direction: row;
     .post-list
-      background-color: rgba(231, 225, 199, 0.5);
+      background-color: rgba(231, 225, 199, 0.5)
-      height: auto
+      height: fit-content
-      display: flex;
+      display: flex
-      flex-direction: column;
+      flex-direction: column
-      gap: 16px;
+      gap: 16px
       width: 100%
       // overflow-y: scroll
       overflow-x: hidden

source/css/_partials/post_list/paginator.styl

@@ -9,6 +9,20 @@
     font-size: 18px
     font-weight: bold
   .right
+    input.page-jump-input
+      width: 32px
+      height: 32px
+      border: none
+      outline: none
+      text-align: center
+      background-color: rgb(180, 175, 154)
+      color: rgb(74, 71, 62)
+      font-size: 18px
+      user-select: none
+      &::-webkit-input-placeholder
+        color: rgb(74, 71, 62);
+      &::-moz-placeholder
+        color: rgb(74, 71, 62);
     .paginator-btn-box
       display: flex
       flex-direction: row

source/css/_partials/post_list/post_item.styl

@@ -11,6 +11,7 @@
   min-height: 144px;
   &:hover
     background-color: $light
+    filter: drop-shadow(0px 0px 2px rgb(74, 71, 62));
     .no-cover
       transition: all 0.2s linear 0s !important
       filter: invert(100%)

source/css/common.styl

@@ -17,10 +17,10 @@ body > * ::selection
   color: rgb(231, 225, 199)
 
 #container
-  padding: 1.5% 2% 2% 2%
+  padding: 1.5% 2% 1% 2%
 
 #main
-  margin-top: 2em
+  margin: 2em 0
 
 span::selection
   background-color: rgb(74, 71, 62)
@@ -65,6 +65,13 @@ img
   &[data-src].error
     filter: none
 
+.v-line
+  float: left;
+  width: 1.3px;
+  height: auto;
+  background: rgba(0, 0, 0, 0.16);
+
 @import '_partials/header/*'
+@import '_partials/footer/*'
 @import '_partials/post_list/*'
 @import '_partials/*'