归档页面优化、友情链接新样式、缩略图显示优化

theme-nexmoe · Nov 8, 2020 · a858d66 · a858d66
1 parent f05fabb
commit a858d66
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 10 deletions.
diff --git a/layout/archives.ejs b/layout/archives.ejs
@@ -1,9 +1,25 @@
-<% // 参考：https://github.com/SukkaW/hexo-theme-suka/blob/master/layout/_pages/archive.ejs %>
 <section class="nexmoe-archives">
+
     <div class="tagcloud nexmoe-rainbow">
-        <%- tagcloud() %>
+        <%- list_tags({
+            show_count: true,
+            style: "unordered list",
+            class: "mdui-ripple ",
+            separator: ""
+        }) %>
     </div>
+
+    <div class="categories nexmoe-rainbow">
+        <%- list_categories({
+            show_count: true,
+            style: "unordered list",
+            class: "mdui-ripple ",
+            separator: ""
+        }) %>
+    </div>
+
     <article>
+        <% // 参考：https://github.com/SukkaW/hexo-theme-suka/blob/master/layout/_pages/archive.ejs %>
         <% function buildArchive(posts, year) { %>
             <h2><%= year %></h2>
             <ul>

diff --git a/source/css/archives.styl b/source/css/archives.styl
@@ -3,9 +3,14 @@
     font-size: 0;  
 }
 
+.nexmoe-archives .categories {
+    margin-bottom: 12px;
+    font-size: 0;  
+}
+
 .nexmoe-archives .tagcloud a {
     border-radius: 15px;
-    padding: 5px 10px;
+    padding: 6px 12px;
     font-size: 15px!important;
     display: inline-block;
     margin-bottom: 7px;
@@ -16,6 +21,45 @@
     content: "# ";
 }
 
+.nexmoe-archives .tagcloud a span:before {
+    content: " ";
+}
+
+.nexmoe-archives .categories a {
+    border-radius: 12px;
+    padding: 12px;
+    font-size: 16px;
+    display: inline-block;
+    margin-bottom: 8px;
+    margin-right: 8px;
+    width: calc(20% - 6.4px);
+}
+
+.nexmoe-archives .categories a:nth-child(5n+5) {
+    margin-right: 0;
+}
+
+.nexmoe-archives .categories a span {
+    pointer-events: none;
+}
+
+@media screen and (max-width: 768px) {
+    .nexmoe-archives .categories a {
+        width: calc(50% - 4px);
+    }
+    .nexmoe-archives .categories a:nth-child(2n+2) {
+        margin-right: 0;
+    }
+}
+
+.nexmoe-archives .categories a span {
+    margin-top: 5px;
+    display: block;
+}
+
+.nexmoe-archives .categories a span:after {
+    content: " Articles";
+}
 .nexmoe-archives article > *:first-child {
     margin-top: 0;
 }
@@ -65,6 +109,6 @@
     display: none;
 }
 
-.nexmoe-archives span {
+.nexmoe-archives ul span {
     margin-right: 15px;
 }
diff --git a/source/css/py.styl b/source/css/py.styl
@@ -11,7 +11,7 @@ article.nexmoe-py ul {
 }
 article.nexmoe-py ul li {
     transition: all .03s;
-    width: calc(12.5% - 10px);
+    width: calc(14.285714285714285714285714285714% - 10px);
     margin: 5px;
     border-radius: 10px;
     border: 1px solid #eee;
@@ -23,22 +23,43 @@ article.nexmoe-py ul li > a {
     display: block;
     position: relative;
 }
+article.nexmoe-py ul li > a:before {
+    background-image: -moz-linear-gradient(to top,rgba(16,16,16,.35) 25%,rgba(16,16,16,0) 100%);
+    background-image: -webkit-linear-gradient(to top,rgba(16,16,16,.35) 25%,rgba(16,16,16,0) 100%);
+    background-image: -ms-linear-gradient(to top,rgba(16,16,16,.35) 25%,rgba(16,16,16,0) 100%);
+    background-image: linear-gradient(to top,rgba(16,16,16,.35) 25%,rgba(16,16,16,0) 100%);
+    -moz-pointer-events: none;
+    -webkit-pointer-events: none;
+    -ms-pointer-events: none;
+    pointer-events: none;
+    background-size: cover;
+    content: '';
+    display: block;
+    height: 36px;
+    left: 0;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 1;
+    opacity: 0.8;
+}
 article.nexmoe-py ul li > a::after {
     font-size: 13px;
-    color: #606266;
+    color: #fff;
     -webkit-transition: none;
     transition: none;
     content: attr(title);
     display: block;
-    position: relative;
     width: 100%;
     border: none;
-    padding: 3px 10px 5px 10px;
-    margin-top: -2px;
+    padding: 2px 10px;
     text-align: center;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    position: absolute;
+    bottom: 0;
+    z-index: 2;
 }
 article.nexmoe-py ul li img {
     width: 100%;
@@ -48,6 +69,7 @@ article.nexmoe-py ul li img {
     position: absolute;
     width: 100%;
     top: 0;
+    pointer-events: none;
 }
 article.nexmoe-py ul li img.lazyload {
     padding-bottom: 100%;

diff --git a/source/css/style.styl b/source/css/style.styl
@@ -311,7 +311,7 @@ body {
     .nexmoe-post {
             .nexmoe-post-cover {
                 width: 100%;
-                padding-bottom: 66%;
+                padding-bottom: 56.25%;
                 position: relative;
                 overflow: hidden;
                 border-radius: $radius;