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,35 +1,42 @@
<% 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-header">
<h3 class="uk-card-title">
<a href="/<%= post.path %>"><%= post.title %></a>
</h3>
<div class="uk-flex uk-flex-left">
<div class="uk-text-meta mr-1">最后更新:<%= date(post.date, "YYYY-MM-DD HH:mm") %></div>
<% if (post.categories.length > 0) { %>
<div class="uk-text-meta">知识分类:
<%- list_categories(post.categories, {
class: { a: 'uk-link-muted' },
show_count: false,
style: false,
separator: ' / '
}) %>
<div class="uk-card uk-card-default uk-card-small uk-width-1-1 mb-2">
<div class="uk-card-header">
<h3 class="uk-card-title">
<a href="/<%= post.path %>">
<%= post.title %>
</a>
</h3>
<div class="uk-flex uk-flex-left">
<div class="uk-text-meta mr-1">最后更新:<%= date(post.date, "YYYY-MM-DD HH:mm" ) %>
</div>
<% if (post.categories.length> 0) { %>
<div class="uk-text-meta">知识分类:
<%- list_categories(post.categories, {
class: { a: 'uk-link-muted' },
show_count: false,
style: false,
separator: ' / '
}) %>
</div>
<% } %>
</div>
</div>
<% if (post.excerpt) { %>
<div class="uk-card-body">
<%- post.excerpt %>
</div>
<% } %>
</div>
<% if (post.tags.length> 0) { %>
<div class="uk-card-footer uk-flex uk-flex-left">
<div class="tag-title">分类标签:</div>
<div class="uk-flex uk-flex-left uk-flex-wrap uk-flex-1">
<% post.tags.each(function(tag) { %>
<span class="uk-label ml-1 mb-1 <% if (is_tag(tag.name)) { %>uk-label-warning<% } %>">
<%= tag.name %>
</span>
<% }) %>
</div>
</div>
<% } %>
</div>
<% if (post.excerpt) { %>
<div class="uk-card-body">
<%- post.excerpt %>
</div>
<% } %>
<% if (post.tags.length > 0) { %>
<div class="uk-card-footer uk-flex uk-flex-left">
<span>分类标签:</span>
<% post.tags.each(function(tag) { %>
<span class="uk-label ml-1 <% if (is_tag(tag.name)) { %>uk-label-warning<% } %>"><%= tag.name %></span>
<% }) %>
</div>
<% } %>
</div>
<% }) %>
<% }) %>

View File

@ -4,36 +4,43 @@
<div class="uk-card-header">
<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>
<span class="ml-1"><%= page.title %></span>
<span class="ml-1">
<%= page.title %>
</span>
</h3>
<div class="uk-flex uk-flex-left">
<div class="uk-text-meta mr-1">最后更新:<%= date(page.date, "YYYY-MM-DD HH:mm") %></div>
<% if (page.categories.length > 0) { %>
<div class="uk-text-meta">知识分类:
<%- list_categories(page.categories, {
class: { a: 'uk-link-muted' },
show_count: false,
style: false,
separator: ' / '
}) %>
<div class="uk-text-meta mr-1">最后更新:<%= date(page.date, "YYYY-MM-DD HH:mm" ) %>
</div>
<% } %>
<% if (page.categories.length> 0) { %>
<div class="uk-text-meta">知识分类:
<%- list_categories(page.categories, {
class: { a: 'uk-link-muted' },
show_count: false,
style: false,
separator: ' / '
}) %>
</div>
<% } %>
</div>
</div>
<article class="uk-card-body">
<%- page.content %>
</article>
<% if (page.tags.length > 0) { %>
<div class="uk-card-footer uk-flex uk-flex-left">
<span>分类标签:</span>
<% page.tags.each(function(tag) { %>
<span class="uk-label ml-1"><%= tag.name %></span>
<% }) %>
</div>
<% } %>
<% if (page.tags.length> 0) { %>
<div class="uk-card-footer uk-flex uk-flex-left">
<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) { %>
<span class="uk-label ml-1 mb-1">
<%= tag.name %>
</span>
<% }) %>
</div>
</div>
<% } %>
</div>
</section>
<section class="uk-width-1-4">
<%- partial('partial/side', {'noCategories': false, 'noTags': false}) %>
<%- partial('partial/side', {'noCategories': false, 'noTags' : false}) %>
</section>
</div>

View File

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