fix: too many tags line breaks on the article page & syntax name scro…

…ll bar is misplaced
17px · Oct 20, 2023 · 3f5c7d7 · 3f5c7d7
1 parent ab40507
commit 3f5c7d7
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 14 deletions.
diff --git a/apps/dockyard/src/modules/post/article.less b/apps/dockyard/src/modules/post/article.less
@@ -19,6 +19,10 @@ article {
   a {
     text-decoration: none;
     color: var(--color-primary);
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   >pre {
@@ -41,13 +45,17 @@ article {
 
     position: relative;
 
-    &::after {
+    &::before {
       content: attr(data-language);
       position: absolute;
-      right: 6px;
-      top: 6px;
-      color: var(--color-font-3);
       font-size: 12px;
+      color: var(--color-font-3);
+      top: 3px;
+      left: 3px;
+      font-size: 10px;
+      // background: var(--color-bg);
+      // border-radius: var(--radius) 0 var(--radius) 0;
+      // padding: 2px;
       line-height: 1;
     }
   }
@@ -92,8 +100,7 @@ article {
   h6 {
     font-weight: 600;
     padding-top: 12px;
-    margin-top: 24px;
-    margin-bottom: 12px;
+    margin: 2.5rem 0 .5rem 0;
     color: var(--color-font);
   }
 
@@ -104,6 +111,10 @@ article {
     li {
       line-height: 24px;
       color: var(--color-font);
+
+      &::marker {
+        color: var(--color-font-2);
+      }
     }
   }
 

diff --git a/apps/dockyard/src/modules/post/index.ejs b/apps/dockyard/src/modules/post/index.ejs
@@ -10,10 +10,9 @@
         <!-- 文章tags -->
         <% if (page.tags.length > 0) { %>
         <ul class="tags">
-          <li>#</li>
           <% page.tags.each(function(tag){ %>
           <li>
-            <a><%- tag.name %></a>
+            <a># <%- tag.name %></a>
           </li>
           <% }) %>
         </ul>

diff --git a/apps/dockyard/src/modules/post/index.less b/apps/dockyard/src/modules/post/index.less
@@ -38,25 +38,27 @@
 
         .tags {
           display: flex;
+          align-items: center;
           color: var(--color-font-2);
+          flex-wrap: wrap;
           margin: 0 auto;
           max-width: 860px;
-          width: calc(100% - 120px);
           margin: 20px 0;
           padding: 0;
 
           li {
             margin-right: 6px;
-            font-size: 13px;
+            font-size: 12px;
             list-style: none;
+            margin-bottom: 8px;
 
             a {
+              padding: 2px 4px;
+              display: inline-block;
+              border-radius: var(--radius);
+              background: var(--color-primary-2);
               color: var(--color-font-2);
               text-decoration: none;
-
-              &:hover {
-                color: var(--color-primary);
-              }
             }
 
           }

diff --git a/test/hexo-test/source/_posts/demo.md b/test/hexo-test/source/_posts/demo.md
@@ -6,6 +6,21 @@ tags:
   - blog
   - Hexo
   - example
+  - blog1
+  - Hexo2
+  - example3
+  - blog4
+  - Hexo56
+  - example7
+  - blog8
+  - Hexo9
+  - example0
+  - blog111
+  - Hexo22
+  - example33
+  - blog444
+  - Hexo555
+  - example66
 author: "John Doe"
 color: 2
 top: 3