style:调整标签的排列样式。

This commit is contained in:
徐涛 2021-04-25 18:19:01 +08:00
parent 98bfa267a3
commit a52efc148f
3 changed files with 69 additions and 52 deletions

View File

@ -1,12 +1,15 @@
<% page.posts.sort("date", "desc" ).each(function(post, i) { %> <% page.posts.sort("date", "desc" ).each(function(post, i) { %>
<div class="uk-card uk-card-default uk-card-small uk-width-1-1 mb-2"> <div class="uk-card uk-card-default uk-card-small uk-width-1-1 mb-2">
<div class="uk-card-header"> <div class="uk-card-header">
<h3 class="uk-card-title"> <h3 class="uk-card-title">
<a href="/<%= post.path %>"><%= post.title %></a> <a href="/<%= post.path %>">
<%= post.title %>
</a>
</h3> </h3>
<div class="uk-flex uk-flex-left"> <div class="uk-flex uk-flex-left">
<div class="uk-text-meta mr-1">最后更新:<%= date(post.date, "YYYY-MM-DD HH:mm") %></div> <div class="uk-text-meta mr-1">最后更新:<%= date(post.date, "YYYY-MM-DD HH:mm" ) %>
<% if (post.categories.length > 0) { %> </div>
<% if (post.categories.length> 0) { %>
<div class="uk-text-meta">知识分类: <div class="uk-text-meta">知识分类:
<%- list_categories(post.categories, { <%- list_categories(post.categories, {
class: { a: 'uk-link-muted' }, class: { a: 'uk-link-muted' },
@ -23,13 +26,17 @@
<%- post.excerpt %> <%- post.excerpt %>
</div> </div>
<% } %> <% } %>
<% if (post.tags.length > 0) { %> <% if (post.tags.length> 0) { %>
<div class="uk-card-footer uk-flex uk-flex-left"> <div class="uk-card-footer uk-flex uk-flex-left">
<span>分类标签:</span> <div class="tag-title">分类标签:</div>
<div class="uk-flex uk-flex-left uk-flex-wrap uk-flex-1">
<% post.tags.each(function(tag) { %> <% post.tags.each(function(tag) { %>
<span class="uk-label ml-1 <% if (is_tag(tag.name)) { %>uk-label-warning<% } %>"><%= tag.name %></span> <span class="uk-label ml-1 mb-1 <% if (is_tag(tag.name)) { %>uk-label-warning<% } %>">
<%= tag.name %>
</span>
<% }) %> <% }) %>
</div> </div>
</div>
<% } %> <% } %>
</div> </div>
<% }) %> <% }) %>

View File

@ -4,11 +4,14 @@
<div class="uk-card-header"> <div class="uk-card-header">
<h3 class="uk-card-title uk-flex uk-flex-left uk-flex-middle"> <h3 class="uk-card-title uk-flex uk-flex-left uk-flex-middle">
<a href="javascript:history.go(-1)" uk-icon="icon: chevron-left" uk-tooltip="后退到上一个页面"></a> <a href="javascript:history.go(-1)" uk-icon="icon: chevron-left" uk-tooltip="后退到上一个页面"></a>
<span class="ml-1"><%= page.title %></span> <span class="ml-1">
<%= page.title %>
</span>
</h3> </h3>
<div class="uk-flex uk-flex-left"> <div class="uk-flex uk-flex-left">
<div class="uk-text-meta mr-1">最后更新:<%= date(page.date, "YYYY-MM-DD HH:mm") %></div> <div class="uk-text-meta mr-1">最后更新:<%= date(page.date, "YYYY-MM-DD HH:mm" ) %>
<% if (page.categories.length > 0) { %> </div>
<% if (page.categories.length> 0) { %>
<div class="uk-text-meta">知识分类: <div class="uk-text-meta">知识分类:
<%- list_categories(page.categories, { <%- list_categories(page.categories, {
class: { a: 'uk-link-muted' }, class: { a: 'uk-link-muted' },
@ -23,17 +26,21 @@
<article class="uk-card-body"> <article class="uk-card-body">
<%- page.content %> <%- page.content %>
</article> </article>
<% if (page.tags.length > 0) { %> <% if (page.tags.length> 0) { %>
<div class="uk-card-footer uk-flex uk-flex-left"> <div class="uk-card-footer uk-flex uk-flex-left">
<span>分类标签:</span> <div class="tag-title">分类标签:</div>
<div class="uk-flex uk-flex-left uk-flex-wrap uk-flex-1 tag-host">
<% page.tags.each(function(tag) { %> <% page.tags.each(function(tag) { %>
<span class="uk-label ml-1"><%= tag.name %></span> <span class="uk-label ml-1 mb-1">
<%= tag.name %>
</span>
<% }) %> <% }) %>
</div> </div>
</div>
<% } %> <% } %>
</div> </div>
</section> </section>
<section class="uk-width-1-4"> <section class="uk-width-1-4">
<%- partial('partial/side', {'noCategories': false, 'noTags': false}) %> <%- partial('partial/side', {'noCategories': false, 'noTags' : false}) %>
</section> </section>
</div> </div>

View File

@ -23,6 +23,9 @@ footer {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.tag-title {
min-width: 100px;
}
.category-list, .category-list-child { .category-list, .category-list-child {
padding-left: 8px; padding-left: 8px;
list-style-position: inside; list-style-position: inside;