🌈 style: 归档标签样式调整

demo/source/_posts/code_snippet.md

@@ -1,6 +1,8 @@
 ---
 title: Code Snippet
 date: 2023-01-05 15:08:29
+tags: [code]
+categories: 测试分类四
 ---
 
 {% include_code lang:yaml config.yml %}

demo/source/_posts/hello-world.md

@@ -3,6 +3,8 @@ title: Hello Theme Async
 date: 2022-09-21 15:08:29
 cover: [https://hexo-theme-async.imalun.com/imgs/demo2.png]
 sticky: 1
+categories: 测试分类三
+tags: [hexo-theme-async]
 ---
 ![1663833969157.png](https://hexo-theme-async.imalun.com/imgs/demo2.png)_示例图_
 

demo/source/_posts/katex.md

@@ -3,6 +3,8 @@ title: KaTeX
 date: 2022-09-22 15:45:29
 katex: true
 toc: false
+categories: 测试分类二
+tags: [KaTeX]
 ---
 ## KaTeX
 

demo/source/_posts/markdown.md

@@ -3,6 +3,7 @@ title: Markdown
 date: 2022-09-21 15:25:29
 categories: 测试分类
 katex: true
+tags: [Markdown]
 ---
 
 主题 Hexo-theme-async 文章页面适配预览。

demo/source/_posts/tag_plugins.md

@@ -2,6 +2,7 @@
 title: Tag Plugins
 date: 2022-12-30 15:08:29
 categories: Plugins
+tags: [plugins]
 ---
 主题内置的一些标签插件说明和示例。
 

demo/source/tags/index.md

@@ -0,0 +1,5 @@
+---
+title: 标签
+date: 2019-11-16 10:46:27
+layout: tag
+---

packages/hexo-theme-async/layout/_partial/page/archive.ejs

@@ -5,18 +5,18 @@
                 <% if(is_archive()){%>
                     <%- list_archives({
                         type: "yearly",
-                        ulclass: "row trm",
-                        liclass: "col-lg-4 trm"
+                        ulclass: "trm-tag",
+                        liclass: "trm-tag"
                     }) %>
                 <% } else if (is_category()){ %>
                     <%- list_categories({
-                        ulclass: "row trm",
-                        liclass: "col-lg-4 trm"
+                        ulclass: "trm-tag",
+                        liclass: "trm-tag"
                     }) %>
                 <% } else if (is_tag()) { %>
                     <%- list_tags({ class: {
-                        ul: "row trm-tag-list trm-list",
-                        li:"col-lg-4 trm-list-item"
+                        ul: "trm-tag-list",
+                        li:"trm-tag-list-item"
                     } }) %>
                 <% } %>
             </div>

packages/hexo-theme-async/layout/_partial/page/category.ejs

@@ -2,7 +2,7 @@
     <div class="col-lg-12">
         <div class="trm-card">
             <div style="padding: 0 20px;">
-                <%- list_categories({ ulclass: "row trm" , liclass: "col-lg-4 trm" }) %>
+                <%- list_categories({ ulclass: "trm-tag" , liclass: "trm-tag" }) %>
             </div>
         </div>
     </div>

packages/hexo-theme-async/layout/_partial/page/tag.ejs

@@ -3,7 +3,7 @@
         <div class="trm-card">
             <div style="padding: 0 20px;">
                 <!-- <%- tagcloud(site.tags,{ min_font:20,max_font:36 }) %> -->
-                <%- list_tags({ class: { ul: "row trm-tag-list trm-list" , li:"col-lg-4 trm-list-item" } }) %>
+                <%- list_tags({ class: { ul: "trm-tag-list" , li:"trm-tag-list-item" } }) %>
             </div>
         </div>
     </div>

packages/hexo-theme-async/scripts/helper/list_archives.js

@@ -65,12 +65,12 @@ function listArchivesHelper(options = {}) {
 	};
 
 	if (style === 'list') {
-		result += `<ul class="${ulClassName}-list" style="margin-bottom: 0px;">`;
+		result += `<ul class="${ulClassName}-list">`;
 
 		for (let i = 0, len = data.length; i < len; i++) {
 			const item = data[i];
 
-			result += `<li class="${liClassName}-list-item" style="margin: 6px 0;">`;
+			result += `<li class="${liClassName}-list-item">`;
 
 			result += `<a class="${className}-list-link" href="${link(item)}">`;
 			result += transform ? transform(item.name) : item.name;
@@ -90,11 +90,11 @@ function listArchivesHelper(options = {}) {
 
 			if (i) result += separator;
 
-			result += `<a class="${className}-link" href="${link(item)}">`;
+			result += `<a class="${className}-tag-link" href="${link(item)}">`;
 			result += transform ? transform(item.name) : item.name;
 
 			if (showCount) {
-				result += `<span class="${className}-count">（${item.count}）</span>`;
+				result += `<span class="${className}-tag-count">（${item.count}）</span>`;
 			}
 
 			result += '</a>';

packages/hexo-theme-async/scripts/helper/list_categories.js

@@ -62,7 +62,7 @@ function listCategoriesHelper(categories, options) {
 
 			const additionalClassName = child && childrenIndicator ? ` ${childrenIndicator}` : '';
 
-			result += `<li class="${liClassName}-list-item ${additionalClassName}" style="margin: 6px 0;">`;
+			result += `<li class="${liClassName}-list-item ${additionalClassName}">`;
 
 			result += `<a class="${className}-list-link${isCurrent ? ' current' : ''}" href="${url_for.call(this, cat.path)}${suffix}">`;
 			result += transform ? transform(cat.name) : cat.name;

packages/hexo-theme-async/source/css/_components/list.less

@@ -27,16 +27,47 @@
 }
 
 .trm-tag-list {
-	li {
-		white-space: nowrap;
-		margin: 6px 0 !important;
+	list-style: none;
+	display: flex;
+	padding: 0;
+	margin: 0;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 0.6em;
+
+	.trm-tag-list-item {
+		border: 1px solid var(--tab-border-color);
+		padding: 0.4em 0.8em;
+		border-radius: 8px;
+		display: flex;
+		align-items: center;
+		cursor: pointer;
 
-		.tag-list-count::before {
-			content: "（";
+		.transition-mixin();
+
+		&::before {
+			content: "#";
+			margin-right: 0.2em;
+			font-size: 1.2em;
+			font-weight: 600;
 		}
 
-		.tag-list-count::after {
-			content: "）";
+		&:hover {
+			background-color: var(--primary);
+			color: #fcfcfe;
+			transform: scale(1.1);
 		}
 	}
+	// li {
+	// 	white-space: nowrap;
+	// 	margin: 6px 0 !important;
+
+	// 	.tag-list-count::before {
+	// 		content: "（";
+	// 	}
+
+	// 	.tag-list-count::after {
+	// 		content: "）";
+	// 	}
+	// }
 }